Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CardView in Android With Example

  • Difficulty Level : Basic
  • Last Updated : 18 Feb, 2021

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

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!

Step 1 : Create new Android Studio Project. 

For creating 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 : 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>

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

OUTPUT : 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!