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

Question

我正在研究当前 Android 应用程序中的 CardView 和 Dark Theme

除了 CardViews 之外，当启用深色模式时，我的大部分应用程序都按预期工作。

我的 Gradle 与此类似

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'

我的主题如下：-

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

我的 CardView 布局类似于：-

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

CardViews 在浅色模式下 "perfect"，但是当我切换到深色模式时，CardViews 不可见。

我犯了什么错误？

是否可以在深色模式下使用 CardView 并查看它们？

Answer 1

由于您使用的是 Theme.MaterialComponents.DayNight.* 主题，因此请使用 com.google.android.material.card.MaterialCardView 而不是 androidx.cardview.widget.CardView。

MaterialCardView 扩展了 androidx.cardview.widget.CardView 并使用了不同的样式：Widget.MaterialComponents.CardView.

Answer 2

由于您使用的是 Theme.MaterialComponents.DayNight.*，cardView 小部件必须使用 com.google.android.material.card.MaterialCardView class 而不是 androidx.cardview.widget.CardView

因此，在您的 xml 中，膨胀 card_view:cardBackgroundColor="?attr/colorSurface" 而不是 card_view:cardBackgroundColor="?android:attr/colorBackground"，因为 Material 指南指出

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.

参考：material.io

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

How to make Android CardView visible when using Dark Theme

android

android-cardview

material-components-android

android-dark-theme