How to Add Gradient to CardView in Android?

UI stands for User Interface, which represents the graphical interface that allows the user to interact with software or any other devices. It comprises some visual elements like Buttons, icons, text, and Images that allow users to steer and interact with the software. UI basically concentrate on creating instinctive and User-Friendly interfaces that make user easily learn and adapt to the environment of the software or device.

What are CardViews In Android?

A CardView is a user interface widget that is used by developers to create a holder that ideally looks like a normal card having defined corners as well as elevated shadow. It was first introduced in Android Support Library but now you will find it in AndroidX Library.

What Actually Gradients Are?

In android, gradients represent transition or progression between two or more colors, shades, or tones. They are basically used for backgrounds like Buttons, Splash Screens, and CardView. So now let’s start the implementation of Gradient in CardView.

Step By Step Implementation

Step 1: Create a CardView in your Android Studio

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#F3F0F8"
    android:gravity="center_horizontal"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:textSize="24sp"
        android:text="Add Gradient To Your CardView"/>

    <androidx.cardview.widget.CardView
        android:id="@+id/grad"
        android:layout_width="300dp"
        android:layout_marginTop="90dp"
        android:layout_height="400dp"
        app:cardCornerRadius="15dp"/>

</LinearLayout>

White base CardView

Step 2: Create an xml file for the gradient in your drawable section

XML

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape
        android:shape="rectangle">
        <corners
            android:radius="15dp">
        </corners>
        <gradient
            android:startColor="#026A3D"
            android:endColor="#22C686">
        </gradient>
    </shape>
</item>
</selector>

Gradient green

Step 3: See through your Themes folder in the res folder in your Android Studio and add the Style attribute to it

Note: Make sure that you attach the same drawable file in which you have created the gradient.

res>themes>themes.xml

Step 4: Now go to your CardView xml file and add this new style to it.

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#F3F0F8"
    android:gravity="center_horizontal"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:textSize="24sp"
        android:text="Add Gradient To Your CardView"/>

    <androidx.cardview.widget.CardView
        android:id="@+id/grad"
        android:layout_width="300dp"
        android:layout_marginTop="90dp"
        android:layout_height="400dp"
        app:cardCornerRadius="15dp"
        style="@style/CardView."/>

</LinearLayout>

cardView.xml

Points To Remember

• Take the start color as Dark Color and the end Color as light color of that same color which you have chosen and vice versa for better visualization.
• Keep the cardView corner radius and grad corner radius the same so that it fits perfectly on it.
• If you want any other color then find its hexa color code and copy and paste it into your gradient file.