使用深色主题时如何使 Android CardView 可见

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 .

Answer 2

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

So, in your xml, inflate card_view:cardBackgroundColor="?attr/colorSurface" instead of card_view:cardBackgroundColor="?android:attr/colorBackground" , as Material Guideline state that

Additionally, the Material Android library provides PrimarySurface styles for components that act as large surfaces and commonly use colorPrimary for their background in light theme. These styles will automatically switch between the component's primary colored style in light theme and surface colored style in dark theme.

reference : material.io

Answer 3

It is Quite Easy I mean it worked for me so. first change your CardView to materialCardView because you are using Theme.MaterialComponents.DayNight . After That Just add style="@style/CardView.Light" this attribute in your XML. file You can keep any style as per your need