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

Time:11-02

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>

CodePudding user response:

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

CodePudding user response:

What you are looking for is:


Java File:

CardView card = ...
card.setCardBackgroundColor(color);

In XML

app:cardBackgroundColor="@android:color/white"
  • Related