Question 128575 in Android Studio Question posted in
The official documentation can be found here.

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

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0 
    <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…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search