Set CardView color separate from App Background Color XML (light view)

Question

I'm trying to set the background color for light mode in my app. The cards I'm displaying should be white in either light or dark mode.

Everything I'm reading is telling me that I can simply place the line: app:cardBackgroundColor="#FFEF00" into my <androidx.cardview.widget.CardView> but that doesn't seem to override the color I have in my themes.xml background.

I want the background color to be light gray and the card background to be white (in light mode).

XML File:

<?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_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/progress_bar"
    android:orientation="vertical">

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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/movie_photo"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_centerHorizontal="true"
                android:contentDescription="Movie Image" />

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

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

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


        </RelativeLayout>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

My themes.xml file:

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

score 0 · Answer 1 · answered Nov 01 '21 at 09:23

<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_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/progress_bar"
android:background="#D3D3D3"
android:orientation="vertical">

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/movie_photo"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_centerHorizontal="true"
            android:contentDescription="Movie Image" />

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

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

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


    </RelativeLayout>

</androidx.cardview.widget.CardView>

</RelativeLayout>

You want to set background color light gray and Card color white than try this...

Thank you...

This does work, but the `themes.xml` file I posted is specific to the light theme. When I hardcode the `xml` file it ends up with the same color scheme in light and dark. — petestmart, Nov 01 '21 at 14:36
I updated my original post to reflect that information. Thanks! — petestmart, Nov 01 '21 at 14:44

score 0 · Answer 2 · answered Nov 02 '21 at 16:07

I ended up creating a card style for the CardView widget in my themes, and I decided to make it adaptable (light/dark mode).

I added style="Widget.App.CardStyle" to my CardView in my XML file:

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

Then in my light theme.xml I added this below the existing <style> </style> tags:

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

And an accompanying dark mode view in the 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>

Set CardView color separate from App Background Color XML (light view)

XML File:

My themes.xml file:

2 Answers2