Material-components-android: [MaterialCardView] Background color can't be set to white

[risalfajar]

Description:
I'm trying to set the cardBackgroundColor to #FFF, but it turns to grey. It can't be set to white unless I added foregroundTint with #FFF too.
It works normally with colors other than white.

You can view the screenshot here

Expected behavior:
It should be pure white #FFF

Source code:

<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/cardViewVideo"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardElevation="0dp"
    app:contentPaddingBottom="4dp"
    app:cardPreventCornerOverlap="true"
    app:cardBackgroundColor="#FFF"
    app:strokeColor="@color/cardview_stroke_color"
    app:strokeWidth="0.5dp">

styles.xml

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
</style>

Android API version:
API version for Preview: 29

Material Library version:
1.1.0

Device:
Android Studio 4.0

Note:
Changing the app theme to other than Theme.MaterialComponents.Light seems to fix the issue, but I don't want to change the app theme.

[risalfajar]

UPDATE
I looked into material-1.1.0 library values.xml and found out that they set this:
<item name="cardForegroundColor">@color/mtrl_card_view_foreground</item>"

Which contains:

<selector xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto">
  <item android:alpha="0.08" android:color="?attr/colorPrimary" android:state_checked="true"/>
  <item android:alpha="0.08" android:color="?attr/colorOnSurface" app:state_dragged="true"/>
  <item android:color="@android:color/transparent" android:state_checked="false" app:state_dragged="false"/>
</selector>

I don't know why in Preview the cardForegroundColor doesn't show as @android:color/transparent knowing that it is neither checked nor dragged.

My temporary workaround is adding app:cardForegroundColor="@android:color/transparent" to CardView in my layout.

[ardhikarafi]

Run + Enter

[consp1racy]

Probably another case of using -1 (which in fact is 0xffffffff aka white) as a default color marker, the code is littered with this nonsense...

[henningBunk]

I got the same problem but the workaround setting the foreground color to transparent does not work for me. What does work for me is setting the cardElevation to 0dp. Only than I get a white background. Problem is I am losing the shadow of the card and therefore the card isn't recognizable anymore.
Any solution not get darker colors with increasing elevation?

[LoicJ]

I had the same issue and I noticed by having a look to the source code that an overlay was drawn on the card background when it has some elevation defined.

Try adding <item name="elevationOverlayEnabled">false</item> to your theme or try defining a ThemeOverlay overriding this value and apply it to your CardView. It should solve your problem.

[gabrielemariotti]

It is not a bug, it is related to the Elevation Overlays.

@LoicJ @risalfajar
You can check the doc:

Shadows are less effective in an app using a dark theme, because they will have less contrast with the dark background colors and will appear to be less visible. In order to compensate for this, Material surfaces in a dark theme become lighter at higher elevations, when they are closer to the implied light source.
This is accomplished via elevation overlays, which are semi-transparent white (colorOnSurface) overlays that are conceptually placed on top of the surface color. The semi-transparent alpha percentage is calculated using an equation based on elevation, which results in higher alpha percentages at higher elevations, and therefore lighter surfaces.

By default the elevationOverlayEnabled (whether the elevation overlay functionality is enabled) is false in Light themes, true in Dark themes.

Just an example with a MaterialCardView with app:cardElevation="4dp" and app:cardElevation="8dp".

Light mode:

Dark mode:

If you want to disable it in a dark theme just add in your app theme:
<item name="elevationOverlayEnabled">false</item>

[LoicJ]

@gabrielemariotti Thanks but you should mention the original author as I do know this is not a bug and I gave him the same answer as you to disable it in his app theme :D

[gabrielemariotti]

@LoicJ sorry, my bad. wrong mention.

[henningBunk]

Thank you both for your input. Weirdly setting elevationOverlayEnabled to false did not solve my problem but changing the parent of my main theme from Theme.MaterialComponents.NoActionBar to Theme.MaterialComponents.Light.NoActionBar did work

[gabrielemariotti]

@henningBunk
Where did you put elevationOverlayEnabled?

[henningBunk]

At the same place where I manipulated the elevation of the cards: a card style which is set as the default card style in my app theme:

<style name="Base.Theme" parent="Theme.MaterialComponents.NoActionBar">
         ...
        <item name="materialCardViewStyle">@style/MyApp.Widget.CardView</item>
</style>

<style name="MyApp.Widget.CardView" parent="Widget.MaterialComponents.CardView">
        <item name="cardElevation">8dp</item>
        <item name="elevationOverlayEnabled">false</item>
</style>

[gabrielemariotti]

@henningBunk
elevationOverlayEnabled is a theme attribute.

<style name="Base.Theme" parent="Theme.MaterialComponents.NoActionBar">
         ...
        <item name="materialCardViewStyle">@style/MyApp.Widget.CardView</item>
        <item name="elevationOverlayEnabled">false</item>
</style>

[henningBunk]

Ah, gotcha. Thanks a lot for your help!