Android CardView Example

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"

6 comments:

vishwapratap shakya said...

helpful tutorial,thanks for posting this type of tutorials

Rushikesh Parab said...

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

Pawan Deshpande said...

@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>

Android Collapsing ToolbarLayout Example - TutorialsBuzz said...

[…] Create a XML Layout inside res/layout by filename card_layout.xml and add cardview to it . In the previous tutorial we have seen how to create android cardview. […]

Android RecyclerView With CardView - TutorialsBuzz said...

[…] have seen tutorial on how to create RecyclerView with scrolling behaviour and also on how to create CardView and it’s customization . As the title of this post suggest in this tutorial we will see the combination of this two […]

TRIJIT SADHU said...

Thanks sir,it works in a single attempt...

Post a Comment