 

Ad

HOMEPAGE  MAT ER IAL DESIGN

MATERIAL DESIGN

Android CardView Tutorial

     
 Android Card View Tutorial

ListView Using Android CardView Tutorial

     
We have already discussed about RecyclerView in the following tutorial Listing Items using RecyclerView and shown a
recyclerview example in android studio.

Today we will discuss about Android CardView in Android SDK which was introduced with the android material design
through the support v7 library. We will show you how Android CardView can be implemented in a RecyclerView list.
After reading this article you should feel comfortable creating Lists and Cards view in your android app.

Android CardView provides a more advanced and flexible way of implementing complex and custom listview with
more functionality that is required nowadays for our apps.

We would be creating an Android CardView Example List app, where we will list 7 wonders of Modern World along with
a Like Button and a Share Button. On clicking the Like Button it will get highlighted and show a message. Clicking the
Share Button will provide you options to share the photo of the Item you clicked. After completion, the app would look
like as shown in the video.

Pre-requisites
1. Android Studio installed on your PC (Unix or Windows). You can learn how to install it here .
2. A real time android device (Smartphone or Tablet) configured with Android Studio. .
3. Before proceeding we advice you to go through the Recycler View tutorial at the following link => Listing Items using
RecyclerView. Since we won’t be repeating the concepts described in earlier above post.
Creating a New Project
1. Open Android Studio and create a new project Android CardView Tutorial and company domain
application.example.com (We have used our own company domain i.e androidtutorialpoint.com. Similarly you can use
yours).
2. Click Next and choose Min SDK, we have kept the default value. Again Click Next and Choose Blank Activity .
3. Choose the Activity as MainActivity and click next.
4. Leave all other things as default and Click Finish.
A new project will be created and gradle will resolve all the dependencies.
We would be listing wonders of the world so create a new WonderModel.java class which will have all the field as well
getter,setter methods required for a wonder. Add the following code to the class

WonderModel.java

package com.androidtutorialpoint.cardviewtutorial;

public class WonderModel {

     
S i d
 String cardName;
int imageResourceId;
int isfav;
int isturned;

public int getIsturned() {

return isturned;
}

public void setIsturned(int isturned) {

this.isturned = isturned;
}

public int getIsfav() {

return isfav;
}

public void setIsfav(int isfav) {

this.isfav = isfav;
}

public String getCardName() {

return cardName;
}

public void setCardName(String cardName) {

this.cardName = cardName;
}

public int getImageResourceId() {

return imageResourceId;
}

public void setImageResourceId(int imageResourceId) {

this.imageResourceId = imageResourceId;
}
}

Adding Support Library for RecyclerView

Add the following code to the App Level build.gradle

compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:cardview-v7:23.1.1'
Now, Gradle will sync your project and add the dependencies.

Add a RecyclerView
1. Create a layout file by Right-clicking on the res/layout directory and selectingNew → Layout resource file. Name the

file fragment_card.xml click OK to create the
and  file.Open the file add
 the following code.
 
fragment_card.xml

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_left_margin"
android:paddingRight="@dimen/activity_right_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MyActivity">

<android.support.v7.widget.RecyclerView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Let’s create a layout file. Create a new Layout resource file name it recycle_items.xml and paste the following code.

recycle_items.xml

<android.support.v7.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:card_view="https://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
card_view:cardCornerRadius="4dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/card_height"
android:orientation="vertical"
android:weightSum="4">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="3.2"
android:orientation="vertical">

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal">
     
 <ImageView
android:id="@+id/coverImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerCrop"
/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:background="@android:drawable/screen_background_dark_transparent"
android:orientation="vertical">

<TextView
android:id="@+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:textSize="@dimen/text_size"
android:textColor="#FFFFFF"
android:textStyle="bold" />
</LinearLayout>
</FrameLayout>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.8"
android:gravity="center|right"
android:orientation="horizontal">

<ImageView
android:id="@+id/likeImageView"
android:layout_width="@dimen/icon_width"
android:layout_height="@dimen/icon_height"
android:padding="@dimen/icon_padding"
android:src="@drawable/ic_like" />

<ImageView
android:id="@+id/shareImageView"
android:layout_width="@dimen/icon_width"
android:layout_height="@dimen/icon_height"
android:padding="@dimen/icon_padding"
android:src="@drawable/ic_share" />
</LinearLayout>
     
 </LinearLayout>
</android.support.v7.widget.CardView>

The layout is pretty much self explanatory, We have used a combination of LinearLayout and FrameLayout‘s to
generate a beautiful Android Carview layout. We have an ImageView for the android cardview background and a
TextView for the displaying the name of the place. Then we have used another LinearLayout for rendering the Like
and Share buttons.

Adding The Functionality

1. Create a new fragment, name it CardFragment.java and add the following code.
Let’s use arrays to store the name and ImageId for each 7 wonders. We have already added the photos of the places
to the drawable folder. You can download the code by clicking on the Download Now Button provided at the top.
CardFragment.java

String Wonders[] = {"Chichen Itza","Christ the Redeemer","Great Wall of China","Machu

Picchu","Petra","Taj Mahal","Colosseum"};
int Images[] =
{R.drawable.chichen_itza,R.drawable.christ_the_redeemer,R.drawable.great_wall_of_china,R.drawable.mac

2. In the onCreate() method we use the initializeList() method to initialize the ArrayList in Android Cardview which will be
passed to the Adapter later.

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initializeList();
getActivity().setTitle("7 Wonders of the Modern World");
}
Following is the implementation of the intializeList() method. Add this method after the onCreate() method in the file.

public void initializeList() {

listitems.clear();

for(int i =0;i<7;i++){

WonderModel item = new WonderModel();

item.setCardName(Wonders[i]);
item.setImageResourceId(Images[i]);
item.setIsfav(0);
item.setIsturned(0);
listitems.add(item);

 }     
 }
3. A view Holder is required to hold on to the views, so add the following code.

public class MyViewHolder extends RecyclerView.ViewHolder {

public TextView titleTextView;

public ImageView coverImageView;
public ImageView likeImageView;
public ImageView shareImageView;

public MyViewHolder(View v) {
super(v);
titleTextView = (TextView) v.findViewById(R.id.titleTextView);
coverImageView = (ImageView) v.findViewById(R.id.coverImageView);
likeImageView = (ImageView) v.findViewById(R.id.likeImageView);
shareImageView = (ImageView) v.findViewById(R.id.shareImageView);
likeImageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

int id = (int)likeImageView.getTag();
if( id == R.drawable.ic_like){

likeImageView.setTag(R.drawable.ic_liked);
likeImageView.setImageResource(R.drawable.ic_liked);
Toast.makeText(getActivity(),titleTextView.getText()+" added to
favourites",Toast.LENGTH_SHORT).show();

}else{

likeImageView.setTag(R.drawable.ic_like);
likeImageView.setImageResource(R.drawable.ic_like);
Toast.makeText(getActivity(),titleTextView.getText()+" removed from
favourites",Toast.LENGTH_SHORT).show();

}
}
});

shareImageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

Uri imageUri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE +

"://" + getResources().getResourcePackageName(coverImageView.getId())
  + '/' + "drawable"
 + '/' +   
i i
getResources().getResourceEntryName((int)coverImageView.getTag()));

Intent shareIntent = new Intent();

shareIntent.setAction(Intent.ACTION_SEND);
shareIntent.putExtra(Intent.EXTRA_STREAM,imageUri);
shareIntent.setType("image/jpeg");
startActivity(Intent.createChooser(shareIntent,
getResources().getText(R.string.send_to)));
}
});
}
}

The above code extends the RecyclerView.ViewHolder class and references the ImageView and the TextViews for
each view it will be holding.

It also has setOnClickListener() attached to the likeImageView and the shareImageView.

On clicking the like button the state of the button is toggled and it shows a corresponding message that it has
added/removed the item to/from favourites.

In the OnClick() for the shareImageView an Intent is fired that shows an option to share the image of the place you
have selected.

4. Next, extend the RecyclerView.Adapter class, this adapter is link between the RecyclerView and the data which we
want to list. It creates required ViewHolders and also binds the ViewHolder to data from the WonderModel class.
It has three main methods:

1. onCreateViewHolder() : Inflates the layout and creates a new view Holder.

2. onBindViewHodler() : Binds the data to the view holder.
3. getItemCount() : returns the size of the data to be dispalyed.
Use the following code to create a MyAdapter.

public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {

private ArrayList<WonderModel> list;

public MyAdapter(ArrayList<WonderModel> Data) {

list = Data;
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent,int viewType) {
// create a new view
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.recycle_items, parent, false);
MyViewHolder holder = new MyViewHolder(view);
 return holder;
    
 }

@Override
public void onBindViewHolder(final MyViewHolder holder, int position) {

holder.titleTextView.setText(list.get(position).getCardName());
holder.coverImageView.setImageResource(list.get(position).getImageResourceId());
holder.coverImageView.setTag(list.get(position).getImageResourceId());
holder.likeImageView.setTag(R.drawable.ic_like);

@Override
public int getItemCount() {
return list.size();
}
}

5. In the onCreateView() method of the CardFragment.java, we reference the RecyclerView that was added in the
layout file. We create a new LinearLayoutManager and later set the RecyclerView to use it. The purpose of the
LayoutManager is to handle the positioning of the list items and scrolling behaviour.

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_card, container, false);

MyRecyclerView = (RecyclerView) view.findViewById(R.id.cardView);
MyRecyclerView.setHasFixedSize(true);
LinearLayoutManager MyLayoutManager = new LinearLayoutManager(getActivity());
MyLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
if (listitems.size() > 0 & MyRecyclerView != null) {
MyRecyclerView.setAdapter(new MyAdapter(listitems));
}
MyRecyclerView.setLayoutManager(MyLayoutManager);

return view;
}
Here is the completed CardFragment.java file.

CardFragment.java

package com.androidtutorialpoint.cardviewtutorial;

import android.content.ContentResolver;
import android.content.Intent;
 import android.net.Uri;
    
 import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;

public class CardFragment extends Fragment {

ArrayList<WonderModel> listitems = new ArrayList<>();

RecyclerView MyRecyclerView;
String Wonders[] = {"Chichen Itza","Christ the Redeemer","Great Wall of China","Machu
Picchu","Petra","Taj Mahal","Colosseum"};
int Images[] =
{R.drawable.chichen_itza,R.drawable.christ_the_redeemer,R.drawable.great_wall_of_china,R.drawable.mac

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
initializeList();
getActivity().setTitle("7 Wonders of the Modern World");
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

View view = inflater.inflate(R.layout.fragment_card, container, false);

MyRecyclerView = (RecyclerView) view.findViewById(R.id.cardView);
MyRecyclerView.setHasFixedSize(true);
LinearLayoutManager MyLayoutManager = new LinearLayoutManager(getActivity());
MyLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
if (listitems.size() > 0 & MyRecyclerView != null) {
MyRecyclerView.setAdapter(new MyAdapter(listitems));
}
MyRecyclerView.setLayoutManager(MyLayoutManager);

return view;
}     
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);

public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {

private ArrayList<WonderModel> list;

public MyAdapter(ArrayList<WonderModel> Data) {

list = Data;
}

@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent,int viewType) {
// create a new view
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.recycle_items, parent, false);
MyViewHolder holder = new MyViewHolder(view);
return holder;
}

@Override
public void onBindViewHolder(final MyViewHolder holder, int position) {

holder.titleTextView.setText(list.get(position).getCardName());
holder.coverImageView.setImageResource(list.get(position).getImageResourceId());
holder.coverImageView.setTag(list.get(position).getImageResourceId());
holder.likeImageView.setTag(R.drawable.ic_like);

@Override
public int getItemCount() {
return list.size();
}
}

public class MyViewHolder extends RecyclerView.ViewHolder {

public TextView titleTextView;

public ImageView coverImageView;
public ImageView likeImageView;
public ImageView shareImageView;

public MyViewHolder(View v) {
super(v);
 titleTextView
 = (TextView) v.findViewById(R.id.titleTextView);
   
 coverImageView = (ImageView) v.findViewById(R.id.coverImageView);
likeImageView = (ImageView) v.findViewById(R.id.likeImageView);
shareImageView = (ImageView) v.findViewById(R.id.shareImageView);
likeImageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

int id = (int)likeImageView.getTag();
if( id == R.drawable.ic_like){

likeImageView.setTag(R.drawable.ic_liked);
likeImageView.setImageResource(R.drawable.ic_liked);

Toast.makeText(getActivity(),titleTextView.getText()+" added to
favourites",Toast.LENGTH_SHORT).show();

}else{

likeImageView.setTag(R.drawable.ic_like);
likeImageView.setImageResource(R.drawable.ic_like);
Toast.makeText(getActivity(),titleTextView.getText()+" removed from
favourites",Toast.LENGTH_SHORT).show();

}
});

shareImageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {

Uri imageUri = Uri.parse(ContentResolver.SCHEME_ANDROID_RESOURCE +

"://" + getResources().getResourcePackageName(coverImageView.getId())
+ '/' + "drawable" + '/' +
getResources().getResourceEntryName((int)coverImageView.getTag()));

Intent shareIntent = new Intent();

shareIntent.setAction(Intent.ACTION_SEND);
shareIntent.putExtra(Intent.EXTRA_STREAM,imageUri);
shareIntent.setType("image/jpeg");
startActivity(Intent.createChooser(shareIntent,
getResources().getText(R.string.send_to)));
     
 }
});

}
}

public void initializeList() {

listitems.clear();

for(int i =0;i<7;i++){

WonderModel item = new WonderModel();

item.setCardName(Wonders[i]);
item.setImageResourceId(Images[i]);
item.setIsfav(0);
item.setIsturned(0);
listitems.add(item);

}
}
}
6. Next, we will be hosting CardFragment in the MainActivity. Open MainActivity.java and add the following code.
MainActivity

package com.androidtutorialpoint.cardviewtutorial;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

FragmentManager fm = getSupportFragmentManager();
Fragment fragment = fm.findFragmentById(R.id.fragmentContainer);

if (fragment == null) {
 fragment =  
new CardFragment();   
 ;
fm.beginTransaction()
.add(R.id.fragmentContainer, fragment)
.commit();
}
}
}

The layout file for MainActivity i.e. activity_main.xml consists of a FrameLayout as a fragmentContainer.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:id="@+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
</FrameLayout>
Run the App and you should see a scrollable List of 7 Wonders of the world. Try scrolling through and clicking Like or
Share to share the photo. So our Android Cardview Tutorial is complete. Please comment in case you have any doubts
or suggestions.

What’s Next
We hope this tutorial will help you getting started with RecyclerView and CardView on Android. You can reuse the
cards to create beautiful apps that have a list interface. We will soon be covering more such tutorials. Till then stay
tuned and don’t forget to subscribe our blog for latest android tutorials. Also do Like our Facebook Page or Add us on
Twitter.

Click on the Download Now button to download the full code.

CodeProject

Ad

     
 Subscribe to updates

Kapil

PREVIOUS NEXT

« How to Install Android Studio on Microsoft Windows or Android Login with Google Tutorial »
Linux (Unix or Ubuntu) OS.

VIEW COMMENTS

MUHAMAD SYAMIL BIN ROSLI

October 23, 2016 at 7:36 am

Hye.. I've downloaded and running the code in Android Studio but the recyclerview keeps showing me the list of the items and not images that it should
be. Please help me to solve this out.
https://uploads.disquscdn.com/images/7c9a428e964e53e0c2a91c2c3f545a09570ccc7378730fd02dfd8a158c9c53d0.png

Chirag
January 12, 2017 at 11:12 am

Bro, how can I write a listener for the cardview ? I want to lauch another activity when the user clicks on the cardview element. Where can i find a way to
do that?

Manasa
January 17, 2017 at 11:34 am

I have used the above codes in studio. It is displaying images, favorite button is working when I remove onClick from viewholder. When I add onclick
block back again. It says getActivity () cannot resolve in favorite and getResources () , start activity cannot resolve.
Please help me.
It is awesome tutorial for recyclerview I found on all.
Thanks in advance

Manasa
January 18, 2017 at 6:00 pm

Share option is not working for me. Means its says file format is not supported.
And I want to know how to save the image to gallery.
It is awesome tutorial I ever found for recyclerview.

jeev
January 25, 2017 at 11:04 am

download link is not working will you send me the code to the email pls

Abhijeet
March 16, 2017 at 10:52 am

nice tutorial very useful

premiumpartnerug
April 7, 2017 at 2:59 pm

thanks nice tut

Cheda.M
May 8, 2017 at 4:16 am

 tutorial, can you how we

Very helpful can connect the favorites.
Heart to actually send that
 specific cardview to another
 activity(Favorites) instead.
 Of
( )
just a Toast. And if possible using SharedPref or Sqlite to Save the Favorites which can be removed or added as the button (heart ) onclick functions
Thank you in Advance

bhatti019
July 21, 2017 at 4:08 pm

very nice website for android i appreciate you Sir Please tell me in card view ,recycle view etc items on click on the item a new detailed activtiy is open
with full image and full description how we can do it please reply with some solid tutorials
#thanks in advance

unnamed
July 22, 2017 at 8:14 pm

please i want to download the project but the link for download it not send to my email
can u send it to me please

Leave a Comment

SHARE

     

PUBLISHED BY

Kapil

TAGS:

android cardview background / Android CardView Example / android cardview gradle / android cardview sample / android cardview
tutorial / android developer listview / android development listview / android listview add item / android listview arrayadapter /
android listview click / android listview onclick / android listview selected item / android listview tutorial / android listview with section /
android material design / Creating Lists and Cards / custom listview android / Getting Started With recyclerView and CardView on
Android / listview android / listview android tutorial / listview example in android / update listview android

3 YEARS AGO

Ad

RELATED POST

Android Spinner-Search Implementation

Android Custom Gridview Example with Image and Text

YouTube Video in Android App using YouTube Player API

RECENT POSTS

BASICS
     
Android Animations Tutorial
Hello, Developers, Hope you are having a great time learning with
AndroidtutorialPoint. In this tutorial, we will learn how to…
2 years ago

BASICS

Android Shared Preferences Tutorial

Hello, Developers! As we know there are different ways to store data in Android. For
ex: SQLite Firebase Android Shared…
2 years ago

BASICS

Kotlin – New Language of Choice for Android

Development
These days we can see a lot of buzz going around about Kotlin. Well, what actually is
Kotlin? Is it…
2 years ago

MATERIAL DESIGN

Android Spinner-Search Implementation

Hey, Developers! This Tutorial will teach you how to implement a spinner with inbuilt
search functionality. Here we have taken…
2 years ago

BASICS

Android Filterable ListView

Hey, Developers! Hope you are having a great time learning with
AndroidTutorialPoint. This tutorial will explain to you how you can,…
2 years ago

BASICS

Android Rock Paper Scissors Game Tutorial

Android Rock Paper Scissors Game Tutorial Hey, Developers! Hope you are having a
great time learning with us. In this…
2 years ago

Ad

All Rights Reserved View Non-AMP Version

     