android recyclerview and cardview tutorial using Android Studio

Android RecyclerView and CardView tutorial using Android Studio

Vamsi Tallapudi Android, Tutorials 3 Comments

Note: If you are using Kotlin Programming Language, please refer to the latest article on How to Implement RecyclerView using Kotlin Programming Language.

RecyclerViews and CardViews are currently the most popularly used elements replacing the listviews and GridViews. In this tutorial, we are going to discuss about Android RecyclerView and CardView tutorial using New Android recyclerview and cardview tutorial using Android Studio

What is a RecyclerView?:

Recyclerview in Android is the most recent and advanced version of Listview. The main Advantage of RecyclerView over ListView can be seen from the following link. Google’s I/O Conference explains why Google has moved from ListView to RecyclerView.

In this Android RecyclerView and CardView tutorial, we are going to discuss about creating a list of Cards using RecyclerView and CardView.

What is a CardView?:

Cardview is the latest element added to Android’s Material Design which extends FrameLayout class. Using Cardview and RecyclerView, you can display list items in beautiful cards which can have shadows and Rounded Corners. You can refer to Developer’s Documentation of CardView here.

Android RecyclerView and CardView tutorial:

The following video demonstrates what we are about to create in this tutorial:


The complete code for the Project Android RecyclerVIew and CardView Tutorial is available below this article.

Let us start creating our project on Android RecyclerView and CardView Tutorial.

  1. Adding RecyclerView and CardView to the Project:

To add recyclerview and CardView to the project, we need to add the following dependencies to our app’s build.gradle file:

a. Adding a RecyclerView:

A RecyclerView can be added to any layout by using the following code:

Here, I’ve added the RecyclerView to my activity_main.xml file with the code below:

Now open res > values > colors.xml and add the following color codes to the file:
b. Adding a CardView:

A CardView can be added to our XML file using the following code:

2. Creating a List Item:

Now we shall create a list item for our RecyclerView so that we can populate the required data into RecyclerView.

Here is my XML layout for the list item which I named it as song_list_item.xml with the following code:

All the drawables and remaining files used in this project can be downloaded from the link above.

3. Creating a Model:

Next we will create a model so that we can get and set the required values.

In this tutorial, I’ve created a Model class which I named it as which consists of the following code:

4. Creating an Adapter:

Let us define a custom adapter for our Recyclerview. Here I named the class as The code is commented wherever it is necessary. A ViewHolder is used in recyclerview where as it is optional in ListView. Here onCreateViewHolder() is used to create Views and onBindViewHolder() is used to bind the views according to the position.

5. Changing the Activity’s Code:

Now we add the following code to our so that we will get and set the data to a model and set the adapter to our recyclerview.

6. Implementing Click Listener for RecyclerView Item:

RecyclerView does not have onItemClickListener() unlike ListView. So we need to add a custom class which extends RecyclerView.OnItemTouchListener().

Here I created a new class and named it as RecyclerItemClickListener and added the following code to it:


Next, we need to modify our android recyclerview and cardview tutorial’s file so that the click will be detected. We write the following code to it in onCreate() method:

Now I am creating Options Menu to display Various kinds of Views available in RecyclerView Android. I’ve added the following methods to the file:

Now the modified of our android recyclerview and cardview tutorial will look like:
The complete code for the Project Android RecyclerVIew and CardView Tutorial can be cloned/downloaded from the github repo link below:



Related Posts