[MaterialCardView] Background color can't be set to white

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.

[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>