Open In App

CardView in Android With Example

Improve
Improve
Like Article
Like
Save
Share
Report

CardView is a new widget in Android that can be used to display any sort of data by providing a rounded corner layout along with a specific elevation. CardView is the view that can display views on top of each other. The main usage of CardView is that it helps to give a rich feel and look to the UI design. This widget can be easily seen in many different Android Apps. CardView can be used for creating items in listview or inside Recycler View. The best part about CardView is that it extends Framelayout and it can be displayed on all platforms of Android. Now we will see the simple example of CardView implementation. 

Implementation: CardView

Step 1: Create a new Android Studio Project. 

For creating a new Android Studio Project. Click on File>New>New Project. Make sure to keep your language as JAVA and select Empty Activity.

Step 2: Add material dependency in build.gradle file.

Navigate to Gradle Scripts then to build.gradle(app) and then add below dependency to it. 

implementation 'com.google.android.material:material:1.2.1'

After adding this dependency you will get to see a popup option at top right corner which displays sync now. Click on that option to sync your project. 

Step 3: Add google repository in the build.gradle file of the application project if by default it is not there

buildscript {

repositories {

   google()

   mavenCentral()

}

All Jetpack components are available in the Google Maven repository, include them in the build.gradle file

allprojects {

repositories {

   google()

  mavenCentral()

}

}

Step 4: Now we will create a simple CardView. 

Navigate to app>res>layout>activity_main.xml then create new CardView widget to it. 

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="10dp"
    app:cardCornerRadius="20dp"
    android:layout_margin="10dp"
    app:cardBackgroundColor="@color/white"
    app:cardMaxElevation="12dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true"
    >
 
    <!--
    In the above cardview widget
    cardelevation property will give elevation to your card view
    card corner radius will provide radius to your card view
    card background color will give background color to your card view
    card max elevation will give the cardview maximum elevation
    card prevent corner overlap will add padding to CardView on v20 and before to prevent intersections between the Card content and rounded corners.
    card use compact padding will add padding in API v21+ as well to have the same measurements with previous versions.
    below are the two widgets imageview and text view we are displaying inside our card view.
    -->
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center"
        android:src="@drawable/gfgimage"
        android:layout_margin="10dp"
        android:id="@+id/img"
        android:contentDescription="@string/app_name" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:textSize="20sp"
        android:textStyle="bold"
        />
 
 
 
</androidx.cardview.widget.CardView>
 
</RelativeLayout>


Step 5: Now run your app on your emulator or device you will get to see the output. 

Output: 

Some important attributes of Cardview are :

1. cardBackgroundColor : Used for setting up the background-color of the card.
2. cardElevation : Defines the elevation (the process of moving to a higher place or more important position) of the card. It’s value should not be quite large else the design may not look good.
3. cardCornerRadius : It sets radius around the corners of the card. More the value of this attribute more circular the edges would appear in the card.
4. cardUseCompactPadding : It has two values true and false. By default, the cardview is set to (0,0) top left corner of the screen. And if this attribute is set to true then the card will set padding for itself so that our UI looks good. This case is helpful in the scenarios when our gravity is not set to center or any other parameters.



Last Updated : 13 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads