Android CardView Example

By | October 31, 2015

As with material design many new views has been introduced through the support v7 library , and here in this post we will see one of the UI Widget that came with support library called CardView . As per the android documentation CardView is nothing but a FrameLayout with a rounded corner background and shadow . Before android L creation and customization of CardView was tedious ,since L it becomes simple and easy to customize .

Build Gradle

Add the following dependencies to apps build.gradle .

file : build.gradle

dependencies {
    compile fileTree(dir: ‘libs’, include: [‘*.jar’])
    compile ‘com.android.support:appcompat-v7:23.0.1’
    compile ‘com.android.support:cardview-v7:23.0.1’
}

XML Layout

Create a XML Layout in res/layout and add CardView as a parent View and the UI component inside which will be shown as card .

file : activity_main.xml

<android.support.v7.widget.CardView
    xmlns:android=”http://schemas.android.com/apk/res/android”
    xmlns:card_view=”http://schemas.android.com/apk/res-auto”
    android:id=”@+id/cardview”
    android:layout_width=”match_parent”
    android:layout_height=”160dp”
    android:layout_margin=”20dp”
    android:foreground=”@drawable/card_foreground”>

    <RelativeLayout
        android:layout_width=”match_parent”
        android:layout_height=”match_parent”>

        <ImageView
            android:id=”@+id/thumbnail”
            android:layout_width=”120dp”
            android:layout_height=”120dp”
            android:layout_alignParentLeft=”true”
            android:layout_centerVertical=”true”
            android:layout_marginLeft=”10dp”
            android:src=”@drawable/profile_pic” />

        <TextView
            android:id=”@+id/title”
            android:layout_width=”match_parent”
            android:layout_height=”wrap_content”
            android:layout_centerVertical=”true”
            android:layout_marginLeft=”10dp”
            android:layout_toRightOf=”@+id/thumbnail”
            android:text=”Pawan Deshpande”
            android:textColor=”#222″
            android:textSize=”15sp”
            android:textStyle=”bold” />

        <TextView
            android:id=”@+id/description”
            android:layout_width=”match_parent”
            android:layout_height=”wrap_content”
            android:layout_below=”@+id/title”
            android:layout_centerVertical=”true”
            android:layout_marginLeft=”10dp”
            android:layout_toRightOf=”@+id/thumbnail”
            android:text=”hdpavan@xyz.com”
            android:textColor=”#222″
            android:textSize=”15sp” />

    </RelativeLayout>
</android.support.v7.widget.CardView>

Main Activity

Create a class MainActivity which extends activity and set the content of this activity with above defined XML layout .

Get the reference to CardView and set the on click listener .

file : MainActivity.java

package com.tutorialsbuzz.cardview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private CardView mcardView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mcardView = (CardView) findViewById(R.id.cardview);

        mcardView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, “On Card Clicked”, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Customizing CardView

Some of the common attribute or property of xml tag like android:padding, android:background which doesn’t support for cardview   , there are some custom property for CardView to work with , lets see some of them

First add the below property for cardview
xmlns:card_view=”http://schemas.android.com/apk/res-auto”

Padding

card_view:contentPaddingTop=”20dp”
card_view:contentPaddingLeft=”20dp”
card_view:contentPaddingBottom=”20dp”
card_view:contentPaddingRight=”20dp”

Background Color

card_view:cardBackgroundColor=”#91B2DE”

Radius

card_view:cardCornerRadius=”10dp”

Elevation ( Shadow )

card_view:cardUseCompatPadding=”true”
card_view:cardElevation=”30dp”

  • helpful tutorial,thanks for posting this type of tutorials

  • I am trying to run cardview project in eclipse but it is showing me an following error:
    'No resource found that matches the given name 'android:Theme.Holo.Light.DialogWhenLarge'.
    in the console window plz help me

  • @Rushikesh
    Open res/styles.xml check whether app theme parent " Theme.AppCompat.Light.DarkActionBar "

    it should be like

    <resources>

    <!– Base application theme. –>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!– Customize your theme here. –>
    </style>

    </resources>

  • Welcome