Android CardView Tutorial - 04-13-2016

by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

Android CardView Tutorial

by Kapil - Wednesday, April 13, 2016

http://www.androidtutorialpoint.com/material-design/android-cardview-tutorial/

YouTube Video

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.

(adsbygoogle = window.adsbygoogle || []).push({});

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 .

1 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

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. class which will have all the
field as well getter,setter methods required for a wonder. Add the following code to the class

WonderModel.

[]
package com.androidtutorialpoint.cardviewtutorial;

public class WonderModel {

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;
}

2 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

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. and click OK to create the file.Open the file add the
following code.

fragment_card.

[]

<RelativeLayout ns:android="http://schemas.android.com/apk/res/android"
ns:tools="http://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. and paste the
following code.

3 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

recycle_items.

[]

<android.support.v7.widget.CardView ns:android="http://schemas.android.com/apk/res/android"
ns:card_view="http://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"

4 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

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. and add the following code.
Let's use arrays to store the name and ImageId for each 7 wonders. We have already added

5 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

the photos of the places to the drawable folder. You can download the code by clicking on
the D ow nload N ow Button provided at the top.

CardFragment.

[]

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.grea
t_wall_of_china,R.drawable.machu_picchu,R.drawable.petra,R.drawable.taj_mahal,R.dra
wable.colosseum};

[/]

2. In the onC reate() method we use the initialize List( ) 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
o n C reate() 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);

6 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

[/]

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) {

7 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

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)));
}
});
}
}

[/]
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 setO nC lickL iste ne r( ) 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 O nC lick() 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. onC reateV iew H olde r( ) : Inflates the layout and creates a new view Holder.
2. onB indV iew H odler( ) : Binds the data to the view holder.
3. getItem C ount() : 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) {

8 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

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 onC reateV iew () method of the CardFragment., we reference the RecyclerView
that was added in the layout file. We create a new Line arLay outM anage r 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);

9 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

if (listitems.size() > 0 & MyRecyclerView != null) {

MyRecyclerView.setAdapter(new MyAdapter(listitems));
}
MyRecyclerView.setLayoutManager(MyLayoutManager);

return view;
}
[/]

Here is the completed CardFragment. file.

CardFragment.

[]

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 .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.grea
t_wall_of_china,R.drawable.machu_picchu,R.drawable.petra,R.drawable.taj_mahal,R.dra
wable.colosseum};

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {

10 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

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) {

11 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

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();

12 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

}
});

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. and add
the following code.

13 / 15
Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

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. consists of a FrameLayout as a

fragmentContainer.

activity_main.

[]

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

<FrameLayout ns:android="http://schemas.android.com/apk/res/android"
ns:tools="http://schemas.android.com/tools"
android:id="@+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"

14 / 15
 Android CardView Tutorial - 04-13-2016
by Kapil - Android Tutorial Point - http://www.androidtutorialpoint.com

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.

(adsbygoogle = window.adsbygoogle || []).push({});

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.

_______________________________________________

PDF generated by Kalin's PDF Creation Station

15 / 15

Powered by TCPDF (www.tcpdf.org)