Search code examples
androidchrome-custom-tabs

Can't change Chrome Custom Tabs navigation bar color when running in the Android Emulator


Specifying colors for Chrome Custom Tabs seems a bit wonky. There are three colors you can specify: the toolbar color, "secondary toolbar" color, and navigation bar color.

There seem to be two methods to controlling these. One is to set the three properties directly in the Builder, like so:

val builder = CustomTabsIntent.Builder()
builder.setToolbarColor(ContextCompat.getColor(context, R.color.colorPrimary))
builder.setSecondaryToolbarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark))
builder.setNavigationBarColor(ContextCompat.getColor(context, R.color.colorPrimary))
val customTabsIntent = builder.build()

The other is to specify params and a scheme. There are three possible schemes: COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT and COLOR_SCHEME_SYSTEM. COLOR_SCHEME_SYSTEM, I think, lets the system decide whether to use a dark or light scheme, while the other two force a dark or light scheme. When you specify params, you can set those color params (toolbar, secondary toolbar, navigation bar) for the light scheme or the dark scheme. I think that if you force the dark scheme, you would specify params for the dark scheme. If you use the system scheme, then you could specify light color params and dark color params, and the appropriate values would be used based on what if the system decides to use a dark or light scheme. That's my best guess anyway.

An example of that might look like:

val builder = CustomTabsIntent.Builder()
builder.setColorScheme(COLOR_SCHEME_DARK)
val darkParams = CustomTabColorSchemeParams.Builder()
    .setToolbarColor(ContextCompat.getColor(context, R.color.colorPrimary))
    .setSecondaryToolbarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark))
    .setNavigationBarColor(ContextCompat.getColor(context, R.color.colorPrimary))
    .build()
builder.setColorSchemeParams(COLOR_SCHEME_DARK, darkParams)
val customTabsIntent = builder.build()

(I've tried different options for setting the color scheme and for setting what scheme the params use).

As a fun side note, if you try builder.setColorSchemeParams(COLOR_SCHEME_SYSTEM, params) you'll get a crash: java.lang.IllegalArgumentException: Invalid colorScheme: 0. Apparently this is a feature, not a bug. You're meant to specify color params for either the dark or light scheme, not system, which automatically chooses between light and dark.

I believe you can also use both methods together. The first method (directly setting the color values in the builder) is then used only if the second method (setting color params for a color scheme) cannot be used. According to the documentation,

to maintain compatibility with browsers not supporting this API, do provide the defaults.

So that's the background info. Here are the results I have.

To change the toolbar color, use the first method (builder.setToolbarColor). Easy peasy. But using the second method (CustomTabColorSchemeParams) does nothing.

I haven't actually tested the "secondary toolbar". I wasn't sure what it was. It seems to be an optional bottom toolbar, although how that is used is deprecated in favor of RemoteViews. I don't think it will be relevant to most people.

Neither method affects the navigation bar color.

To look at it another way, with the second method, builder.setColorScheme(COLOR_SCHEME_DARK) can be used to force Chrome Custom Tabs to use a light scheme or a dark scheme. That seems to work just fine. But none of the color params seem to actually affect anything.

Perhaps someone can explain some of this bizarre behavior, or confirm that it is a Google bug. Or maybe you can point out something I may be doin wrong. My main question is: how can I actually change the navigation bar color for Chrome Custom Tabs? As I noted, these methods don't seem to work.


Solution

  • Changing the navigation bar color works on a physical device, but not in the emulator.