How come the color I set for cardBackgroundColor isn't exactly the one that gets shown?

Question

Background

I'm trying to prepare dark theme for an app, and one of the requirements is to have a specific color for cards and dialogs : #ff3c454c

The problem

Whether I set it by force ( app:cardBackgroundColor="#3c454c") , by reference ( app:cardBackgroundColor="@color/...) or just in the theme - in all cases I don't get the color I've set. Instead I get the color of #525A61.

I've tested just a red color (#f00) just to be sure it affects the card, and it does, and for this color it indeed gets to be fine. But for the color I've set, it doesn't.

What I've tried

As I wrote, I tried multiple ways to set the color. In the beginning I wanted to use just the theme itself, so I've set it as such:

styles.xml

    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        ...
        <item name="colorBackgroundFloating">@color/colorBackgroundFloating</item>
        <item name="colorSurface">@color/colorBackgroundFloating</item>
    </style>

res/values-night/colors.xml

    <color name="colorBackgroundFloating">#ff3c454c</color>

Later I tried to use the color directly and even set it as hard coded. Still got the incorrect color when it gets shown.

Seeing this could be a bug on the library itself, I've reported about this here (include a sample project, if you wish to check it out).

I've noticed the exact same issue occurs for BottomNavigationView and probably other similar cases.

The question

Why does it occur? Is there any workaround for this? Something that will fix it globally for all views that use these attributes ?

Answer 1

What you are seeing is the elevation overlay that they introduced to make elevation more noticeable while in Dark Theme, where shadows are not so visible. You can read about it here : https://material.io/develop/android/theming/dark/ in the section "Elevation Overlays"

The simple solution if you don't want this behavior is to add this to your theme.

<item name="elevationOverlayEnabled">false</item>

And you can also adjust it to another color or even a more subtle version of the overlay by changing the alpha:

<item name="elevationOverlayColor">#80FFFFFF</item>

---

EDIT with more info from https://github.com/material-components/material-components-android/issues/1133

If you want to disable it for only one component or widget, you can define a style for it with a theme overlay and use it in a specific layout:

<style name="ThemeOverlay.MyApp.ElevationOverlayDisabled" parent="">
    <item name="elevationOverlayEnabled">false</item>
</style>

<style name="Widget.MyApp.CardView" parent="Widget.MaterialComponents.CardView">
    <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.ElevationOverlayDisabled</item>
</style>

And if you want to disable it for all cards in your app but keep it in other components you can set that style as the default style for material card views:

# Set in your app theme
<item name="materialCardViewStyle">@style/Widget.MyApp.CardView</item>