MaterialToolbar on Material3 DayNight still using Material2 default coloring

[ArcherEmiya05]

Description: Using Theme.Material3.DayNight as base theme. Styling the MaterialToolbar like title and action menu icon color still uses the Material2 default value like android:textColorPrimary for the title and colorControlNormal for navigation/action menu icon.

Expected behavior: colorOnSurface for title color and colorOnSurfaceVariant for icons should work based on the documentation. However background color works perfectly fine, even I define colorPrimary it won't work until I set colorOnSurface .

Source code:

<!-- Base application theme -->
    <style name="Theme.Cryptonian" parent="Theme.Material3.DayNight">
  <!-- Toolbar navigation icon tint -->
        <item name="android:textColorPrimary">@android:color/holo_red_dark</item>
        <item name="colorControlNormal">@android:color/holo_red_dark</item>
</style>

<!-- Base application theme -->
    <style name="Theme.Cryptonian" parent="Theme.Material3.DayNight">
  <!-- Toolbar navigation icon tint -->
        <item name="colorOnSurface">@android:color/holo_green_dark</item>
        <item name="colorOnSurfaceVariant">@android:color/holo_green_dark</item>
</style>

Minimal sample app repro: N/A

Android API version: SDK 21

Material Library version: 1.6.0-beta01

Device: Samsung J1

[ArcherEmiya05]

Worth mentioning that the background color does not work as well when using colorSurface and colorOnSurface as stated in the documentation

[dsn5ft]

The default toolbar style is not really a "surface" toolbar (it's transparent as per the initial design of AppCompat toolbars which can be embedded within other containers), so that's why none of those surface colors are having an effect.

If you use the Surface or OnSurface style then it should work more as you expect.

[ArcherEmiya05]

The default toolbar style is not really a "surface" toolbar (it's transparent as per the initial design of AppCompat toolbars which can be embedded within other containers), so that's why none of those surface colors are having an effect.

If you use the Surface or OnSurface style then it should work more as you expect.

I tried to change the parent to Widget.Material3.Toolbar.OnSurface still doesn't work. I also tried to change from toolbarStyle to toolbarSurfaceStyle but no luck. Can you show a sample? Thanks

[ArcherEmiya05]

I am having similar issue setting materialThemeOverlay on other component as well like Chips

[dsn5ft]

Re: a sample, if I add the following to our Catalog demo app theme, then the surface colors get applied as expected to the toolbarSurfaceStyle MaterialToolbars:

<item name="colorSurface">@android:color/holo_red_dark</item>
<item name="colorOnSurface">@android:color/holo_blue_dark</item>
<item name="colorOnSurfaceVariant">@android:color/holo_green_dark</item>

[ArcherEmiya05]

Re: a sample, if I add the following to our Catalog demo app theme, then the surface colors get applied as expected to the toolbarSurfaceStyle MaterialToolbars:

<item name="colorSurface">@android:color/holo_red_dark</item>
<item name="colorOnSurface">@android:color/holo_blue_dark</item>
<item name="colorOnSurfaceVariant">@android:color/holo_green_dark</item>

Thanks I already made it work but having last issue with Action items icon (showAsAction).

When an Action item is showed as action, the drawable XML icon is not following the colorOnSurfaceVariant and stuck to its own color. The navigation icon however can follow colorOnSurface.

[dsn5ft]

It should follow the color as long as the icon is a theme-able vector drawable, e.g. like the ones created by Android Studio and the one in my sample above. These types of drawables usually use colorControlNormal internally, and then in the Material styling we remap colorControlNormal to colorOnSurfaceVariant.

[ArcherEmiya05]

It should follow the color as long as the icon is a theme-able vector drawable, e.g. like the ones created by Android Studio and the one in my sample above. These types of drawables usually use colorControlNormal internally, and then in the Material styling we remap colorControlNormal to colorOnSurfaceVariant.

For some reason it does not work, as you can see above they are XML drawable and the Toolbar navigation icon works fine and follows colorOnSurface but the action item search that set showAsAction="collapseActionView|ifRoom" is not following colorControlNormal nor colorOnSurfaceVariant. Only the 3 dot action item icon does follow.

[dsn5ft]

It's hard to say why - can you try comparing your code to our demo code in the sample I linked above? And pasting our demo code into your app to see if it works, and vice versa?

[ArcherEmiya05]

It's hard to say why - can you try comparing your code to our demo code in the sample I linked above? And pasting our demo code into your app to see if it works, and vice versa?

Can you point me where are the official sample projects for Material 3? Thanks

[dsn5ft]

This one: https://github.com/material-components/material-components-android/tree/master/catalog/java/io/material/catalog/topappbar

[ArcherEmiya05]

Is there a way to apply toolbarSurfaceStyle globally together with toolbarStyle? The toolbar title and subtitle padding went crazy after applying toolbarSurfaceStyle.