Can I change the background color of the Chromecast navigation bar?

Question

I've reviewed the custom styles available in the GoogleCast v3 SDK and unless I'm missing something I don't see a way to change the backgroundColor of the deviceChooser. See below:

Is there any way to change this gray color?

Answer 1

As per the documentation Google does not allow us to change the navigation bar style. So we might need to change the navigation bar appearance before pushing to the media control UI of SDK.

I tried it in didFinishLaunchingWithOptions

 [UINavigationBar appearance].barTintColor = [UIColor whiteColor];
 [UINavigationBar appearance].translucent = NO;

Hope it helps :)

Answer 2

There are different ways you can customize the style on Chromecast SDK for iOS by using:

GCKUIStyle.sharedInstance()

My contribution for style the navigation bar:

From DOCUMENTATION I can see the following diagram

The common thing between all the "Style class" is that all of them inherit from GCKUIStyleAttributes so:

func configureChromecast() {
    let gckCriteria = GCKDiscoveryCriteria(applicationID: "ABC123")
    let gckCastOptions = GCKCastOptions(discoveryCriteria: gckCriteria)
    
    GCKCastContext.setSharedInstanceWith(gckCastOptions)
    GCKLogger.sharedInstance().delegate = self
    
    // General
    let textColor: UIColor = UIColor.black
    let backgroundColor: UIColor = UIColor.white
    
    GCKUIStyle.sharedInstance().castViews.backgroundColor = backgroundColor
    
    GCKUIStyle.sharedInstance().castViews.headingTextColor = textColor
    GCKUIStyle.sharedInstance().castViews.headingTextFont = UIFont.textStyleRegular
    
    GCKUIStyle.sharedInstance().castViews.bodyTextColor = textColor
    GCKUIStyle.sharedInstance().castViews.bodyTextFont = UIFont.textStyleRegular
    
    GCKUIStyle.sharedInstance().castViews.captionTextColor = textColor
    GCKUIStyle.sharedInstance().castViews.captionTextFont = UIFont.textStyleRegular
    
    GCKUIStyle.sharedInstance().castViews.buttonTextColor = textColor
    GCKUIStyle.sharedInstance().castViews.buttonTextFont = UIFont.textStyleRegular
    
    GCKUIStyle.sharedInstance().castViews.iconTintColor = textColor
    
    
    // Navigation & Toolbar
    let navigationBackgroundColor: UIColor = UIColor.blue
    let navigationtintColor: UIColor = UIColor.white
    
    GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.navigation.backgroundColor = navigationBackgroundColor
    GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.toolbar.backgroundColor = navigationBackgroundColor
    
    GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.navigation.headingTextColor = navigationtintColor
    GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.toolbar.headingTextColor = navigationtintColor
    
    GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.navigation.bodyTextColor = navigationtintColor
    GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.toolbar.bodyTextColor = navigationtintColor
    
    GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.navigation.captionTextColor = navigationtintColor
    GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.toolbar.captionTextColor = navigationtintColor
    
    GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.navigation.buttonTextColor = navigationtintColor
    GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.toolbar.buttonTextColor = navigationtintColor
    
    GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.navigation.iconTintColor = navigationtintColor
    GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.toolbar.iconTintColor = navigationtintColor
    
    
    GCKUIStyle.sharedInstance().apply()
}

And the result:

Answer 3

The Navigation Bar style in question doesn't come from GoogleCast SDK (at least for version 4.6.1 dynamic on iOS 15) but from your own app's appearance. A way to change the background and title text color of the Navigation Bar (on GoogleCast SDK View Controllers, but your own app's as well) is to add

UINavigationBar.appearance().backgroundColor = UIColor.darkGray
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.white]

in your AppDelegate's didFinishLaunchingWithOptions function. But, no matter what tint color field I try setting for either UINavigationBar or UIBarButtonItem appearance, I can't get the Cancel button text color to change. I noticed that behavior in my app as well, only the Navigation Bar Buttons that have the tint set as Default in the Storyboard are affected by this global change, specifically by setting

UIBarButtonItem.appearance().tintColor = UIColor.yellow

If on the other hand you set a color in the Storyboard yourself, it will not be changed by the line of code above. This conclusion leads me to believe that is the way the Device Chooser View Controller was created, with a tint color set explicitly.

But, I see in one of the comments to the main question that someone was able to change the Cancel button color (as seen in the screenshot as well), so if anyone can share that piece of code it would be extremely appreciated.

Thanks!

EDIT

And of course only after posting this I tried pasting the entire code snippet from Reimond Hill and it worked in changing the Cancel button color, specifically this

GCKUIStyle.sharedInstance().castViews.deviceControl.connectionController.navigation.buttonTextColor = navigationtintColor

The reason why I thought this wouldn't work first time around is the fact that we are setting the navigation property of the Connection Controller, not the Device Controller (which doesn't even have this property). So I hope this will help someone else not waste time on this like I did.

Answer 4

You can style all GCK views using GCKUIStyle,

for example:

GCKUIStyle.sharedInstance().castViews.mediaControl.miniController.buttonTextColor = .black

GCKUIStyle.sharedInstance().apply()

in your case, the navigation can be styled with this line

connectionController.navigation.backgroundColor = UIColor.black

Check this URL for more info:

https://developers.google.com/cast/docs/ios_sender/customize_ui