Android Material Toolbar surface color looks different on two different toolbars

Question

I'm trying to change the background color of the material toolbar to the surface color with:

android:background="?attr/colorSurface"

which works as expected (to simplify it I set the background color directly at the view and did not create a custom style for that). In order to define multiple colors for light and dark mode I created two colors.xml files. When in light mode the applied surface color looks as expected:

But when I'm changing to dark mode the two toolbars look like this (still both referencing the same color resource):

The right toolbar has the correct background color, the left one not.

Then I checked if the same thing happens with every color I define in dark mode so I changed the surface color to my primary color. In dark mode it looks like this:

So in this case the colors look the same, but when I'm using my surface color, it does not.

I also tried to change the Widget.MaterialComponents.Toolbar.Surface toolbar to Widget.MaterialComponents.Toolbar, but still the same result.

Answer 1

So in this case the colors look the same, but when I'm using my surface color, it does not.

It happens because of Elevation Overlays.
You can avoid the elevation overlays setting elevationOverlayEnabled to false in your app theme.

Just a final note. In your MaterialToolbar you should use:

    <com.google.android.material.appbar.MaterialToolbar
        style="@style/Widget.MaterialComponents.Toolbar.PrimarySurface"
        ..>

This style will automatically switch between the component's primary colored style in light theme and surface colored style in dark theme.