Android Kotlin: How to set CardView background color

Android Kotlin: Setting CardView Background Color

This code demonstrates how to set the background color of a CardView programmatically in an Android application written in Kotlin. It utilizes two approaches: defining the color in the layout file (XML) and setting it dynamically in code.

The code consists of three main parts:

MainActivity.kt: This file contains the main activity class that manages the UI. It inflates the layout (activity_main.xml) and sets the background color of the second CardView programmatically in the onCreate method.
activity_main.xml: This file defines the layout of the activity. It includes two CardViews stacked on top of each other. The first card has its background color defined directly in the XML using the app:cardBackgroundColor attribute. The second card has the same attributes defined except for the background color.
build.gradle(app): (Code not provided) This file specifies the project's dependencies. It includes the androidx.cardview:cardview library which provides the CardView functionality.

Summary

This example showcases the flexibility of CardViews in Android. You can define the background color both declaratively in the layout and programmatically in code to achieve dynamic UI adjustments based on user actions or other conditions.

MainActivity.kt


package com.example.jetpack

import android.graphics.Color
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // set second card view background color programmatically
        cardViewBottom.setCardBackgroundColor(Color.parseColor("#FF0800"))
    }
}

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#EDEAE0">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:cardBackgroundColor="#FFEF00"
        app:cardCornerRadius="12dp"
        app:cardElevation="4dp"
        app:cardMaxElevation="6dp"
        app:contentPadding="25dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:padding="30dp"
            android:fontFamily="sans-serif-condensed-medium"
            android:text="CardView Background Color In XML"
            android:textSize="30sp" />

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardViewBottom"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="16dp"
        app:cardCornerRadius="12dp"
        app:cardElevation="4dp"
        app:cardMaxElevation="6dp"
        app:contentPadding="25dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cardView">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="30dp"
            android:fontFamily="sans-serif-condensed-medium"
            android:text="CardView Background Color Programmatically"
            android:textSize="30sp" />

    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

build.gradle(app) [code to add]


dependencies {
    // card view
    implementation "androidx.cardview:cardview:1.0.0"
}