将 CardView 颜色与 App Background Color XML 分开设置（浅色视图）

Posted 2023-02-16

【中文标题】将 CardView 颜色与 App Background Color XML 分开设置（浅色视图）

【英文标题】：Set CardView color separate from App Background Color XML (light view)

【发布时间】：2021-12-15 20:06:28

【问题描述】：

我正在尝试在我的应用中设置灯光模式的背景颜色。我显示的卡片在浅色或深色模式下都应该是白色的。

我正在阅读的所有内容都告诉我，我可以简单地放置这条线： app:cardBackgroundColor="#FFEF00" 进入我的<androidx.cardview.widget.CardView>，但这似乎并没有覆盖我在themes.xml 背景中的颜色。

我希望背景颜色为浅灰色，卡片背景为白色（在浅色模式下）。

XML 文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/movie_item"
    android:layout_
    android:layout_
    android:layout_below="@+id/progress_bar"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:id="@+id/card_view"
        android:layout_
        android:layout_
        android:layout_margin="10dp"
        card_view:cardCornerRadius="16dp"
        app:cardBackgroundColor="#FFEF00"
        >

        <RelativeLayout
            android:layout_
            android:layout_>

            <ImageView
                android:id="@+id/movie_photo"
                android:layout_
                android:layout_
                android:layout_centerHorizontal="true"
                android:contentDescription="Movie Image" />

            <TextView
                android:id="@+id/movie_title"
                android:layout_below="@+id/movie_photo"
                android:layout_
                android:layout_
                android:layout_margin="5dp"
                android:text="Title: "
                android:textSize="15sp" />

            <TextView
                android:id="@+id/movie_overview"
                android:layout_below="@+id/movie_title"
                android:layout_
                android:layout_
                android:layout_margin="5dp"
                android:text="OverView : " />

            <TextView
                android:id="@+id/movie_rating"
                android:layout_
                android:layout_
                android:layout_below="@+id/movie_overview"
                android:layout_margin="5dp"
                android:text="Rating : "
                android:textSize="15sp" />


        </RelativeLayout>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

我的主题.xml 文件：

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.MovieSpotter" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="android:background">@color/gray</item>
    </style>
</resources>

【参考方案1】：

我最终在我的主题中为 CardView 小部件创建了卡片样式，并决定使其具有适应性（浅色/深色模式）。

我在 XML 文件的 CardView 中添加了style="Widget.App.CardStyle"：

<androidx.cardview.widget.CardView
        android:id="@+id/card_view"
        android:layout_
        android:layout_
        android:layout_margin="10dp"
        style="Widget.App.CardStyle"
        card_view:cardCornerRadius="16dp">

然后根据我的theme.xml，我在现有的<style> </style>标签下面添加了这个：

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name=...>
...
</style>

    <style name="Widget.App.CardStyle"
        parent="Widget.MaterialComponents.CardView">
        <item name="materialThemeOverlay">@style/Widget.App.CardStyle</item>
    </style>
    <style name="materialThemeOverlay">
        <item name="colorPrimary">@color/white</item>
    </style>

</resources>

以及night/themes.xml 中随附的暗模式视图

<resources...
<style...
</style>
    
<style name="Widget.App.CardStyle"
            parent="Widget.MaterialComponents.CardView">
            <item name="materialThemeOverlay">@style/Widget.App.CardStyle</item>
        </style>
        <style name="materialThemeOverlay">
            <item name="colorPrimary">@color/black</item>
        </style>

</resources>

【参考方案2】：

选项 1：

---

如果您不希望这种行为，请将其添加到您的主题中。

<item name="elevationOverlayEnabled">false</item>

您还可以通过更改 alpha 将其调整为另一种颜色甚至更微妙的叠加版本：

<item name="elevationOverlayColor">#FFEF00</item>

您可以在此处阅读： https://material.io/develop/android/theming/dark/ 在Elevation Overlays 部分中

---

选项 2：

---

Style.xml：

<item name="android:forceDarkAllowed" tools:targetApi="q">false</item>

【讨论】：

我看到过类似的答案。我将Java File 信息放在哪里？我要创建一个新的 Java 文件吗？

更新我的答案请检查它

【参考方案3】：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/movie_item"
android:layout_
android:layout_
android:layout_below="@+id/progress_bar"
android:background="#D3D3D3"
android:orientation="vertical">

<androidx.cardview.widget.CardView
    android:id="@+id/card_view"
    android:layout_
    android:layout_
    android:layout_margin="10dp"
    app:cardBackgroundColor="#FFFFFFFF"
    card_view:cardCornerRadius="16dp">

    <RelativeLayout
        android:layout_
        android:layout_>

        <ImageView
            android:id="@+id/movie_photo"
            android:layout_
            android:layout_
            android:layout_centerHorizontal="true"
            android:contentDescription="Movie Image" />

        <TextView
            android:id="@+id/movie_title"
            android:layout_
            android:layout_
            android:layout_below="@+id/movie_photo"
            android:layout_margin="5dp"
            android:text="Title: "
            android:textSize="15sp" />

        <TextView
            android:id="@+id/movie_overview"
            android:layout_
            android:layout_
            android:layout_below="@+id/movie_title"
            android:layout_margin="5dp"
            android:text="OverView : " />

        <TextView
            android:id="@+id/movie_rating"
            android:layout_
            android:layout_
            android:layout_below="@+id/movie_overview"
            android:layout_margin="5dp"
            android:text="Rating : "
            android:textSize="15sp" />


    </RelativeLayout>

</androidx.cardview.widget.CardView>

</RelativeLayout>

你想设置背景颜色浅灰色和卡片颜色白色而不是试试这个......

谢谢...

【讨论】：

这确实有效，但我发布的themes.xml 文件是特定于浅色主题的。当我对xml 文件进行硬编码时，它最终会在明暗中使用相同的配色方案。

我更新了我的原始帖子以反映该信息。谢谢！