How to make Android CardView visible when using Dark Theme

Question

I am investigating CardView and Dark Theme in my current Android application

The majority of my application works as expected when Dark Mode is enables except for the CardViews.

my Gradle resembles this

android {
    compileSdkVersion 29
    defaultConfig {
        applicationId "org.application.investigation"
        minSdkVersion 23
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }
}

  implementation 'androidx.cardview:cardview:1.0.0'

My Theme is as follows:-

<resources>

    <style name="AppTheme" parent="@style/Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorError">@color/design_default_color_error</item>
        <item name="android:textColor">?attr/colorOnBackground</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

My CardView layout resembles this:-

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/item_films_cardview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="?android:attr/colorBackground"
    card_view:cardCornerRadius="10dp"
    card_view:cardElevation="5dp"
    card_view:cardUseCompatPadding="true"
    tools:context=".films.Films">

    <LinearLayout
        android:id="@+id/item_films_film"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:focusable="true"
        android:background="?attr/colorSurface"
        android:foreground="?android:attr/selectableItemBackground"
        android:orientation="vertical"
        android:padding="@dimen/default_padding">

        <TextView
            android:id="@+id/film_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:textColor="?android:attr/textColorPrimary"
            android:textSize="@dimen/text_heading"
            android:textStyle="bold"
            tools:text="Title Of Film" />

        <TextView
            android:id="@+id/film_director"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:textColor="?android:attr/textColorPrimary"
            android:textStyle="italic"
            tools:text="Director Of Film" />

        <TextView
            android:id="@+id/film_description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:gravity="center_horizontal"
            android:lineSpacingMultiplier="@dimen/line_spacing_item"
            android:maxLines="3"
            android:textColor="?android:attr/textColorPrimary"
            tools:text="Description Of Film" />

    </LinearLayout>
</androidx.cardview.widget.CardView>

The CardViews are "perfect" in Light Mode, however when I switch to Dark Mode the CardViews are not visible.

What mistake(s) have I made ?

Is it possible to employ CardViews in Dark Mode and see them?

Answer 1

Since you are using the Theme.MaterialComponents.DayNight.* theme use the com.google.android.material.card.MaterialCardView instead of androidx.cardview.widget.CardView.

The MaterialCardView extends the androidx.cardview.widget.CardView and uses a different style: Widget.MaterialComponents.CardView.