Android RecyclerView and CardView Tutorial

We have an enhanced ListView in android called RecyclerView. And here is Android RecyclerView and CardView Tutorial.

It is recommended not to use ListView for large data sets. If you have a big List with custom UI components then you should use RecyclerView. RecyclerView is much more customizable than ListView and in terms of performance it is also very far ahead. So lets see how we use RecyclerView in our application.

Below you can see a simple RecyclerView and this is actually what we will be building in this post.

Remember we don’t use RecyclerView for a List where we display only a Single item. Actually we can use it for displaying a single name or string as well. But the main use of RecyclerView is in displaying a complex list, as you can see above. So lets see how we can build a List as shown above.

Android RecyclerView and CardView Tutorial

Creating a new Android Studio Project

• The first step is always creating the new project 😛 . So create a new android studio project. I have create a project named RecyclerViewExample.
• Remember RecyclerView and CardView are not available by default. You need to add it to your project.

Adding RecyclerView and CardView

• Click on File -> Project Structure.

• Now from the left select app and then from the top click on Dependencies. Here you will see a green plus icon, click on it and then select Library dependency.

• Now you will see another dialog, and from here you can select RecyclerView. Select RecyclerView and press ok.

• The same way you have to add CardView as well.

Creating RecyclerView Layouts

RecyclerView

• Now you can create a RecyclerView inside your activity_main.xml.

RecyclerView Item Layout using CardView

• We also need a separate layout for items inside RecyclerView. For example we have the following layout.

• We have a CardView and inside the CardView we have the design as we want. So you can create any design inside your Card.
• It is not mandatory that you use a CardView. A CardView gives you a nice elevated look only.
• So to create the above layout, just create a new layout resource file named layout_products.xml and use the following xml code.

• So thats all for the layout files.

Model Class for Storing Product

• Here we don’t have a single item for our list, and that is why it can’t be stored in a String array. We need a class to store all the attributes that we have for item in our list. Here I have product as the List Item and each product has
  • Id
  • Title
  • Image
  • Short Description
  • Rating
  • Price
• So to store these attributes lets create a class named Product.java and write the following code.

• Now we will create a ProductAdapter.

Creating RecyclerView Adapter

• To manage and display the data of our RecyclerView we need a class that will extend RecyclerView.Adapter. Inside this class we need RecyclerView.ViewHolder. Now what are these two?
• RecyclerView.ViewHolder represents the views of our RecyclerView and the RecyclerView.Adapter represents the data that is to be shown with the ViewHoder.
• We have 3 methods inside RecyclerView.Adapter that we need to override.
  1. RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
     • This method returns a new instance of our ViewHolder.
  2. void onBindViewHolder(ProductViewHolder holder, int position)
     • This method binds the data to the view holder.
  3. int getItemCount()
     • This returns the size of the List.
• So lets create our Adapter. For this create a new class named ProductAdapter.java and write the following code.

Setting Adapter to RecyclerView

• The last step to show RecyclerView. Come inside MainActivity and write the following code.

• For the images I am using some images, you can get it from below link. You need to post these images to drawable folder. You can also use other images if you want.

Android RecyclerView Images

• Now you can try running your application.

• You see we have our RecyclerView. The items are looking nice in the Cards.
• Here I am using static items for RecyclerView. But if you want to load the data from Server using PHP and MySQL you can visit the following post.

RecyclerView using PHP and MySQL Tutorial

• You can get my source code from below link.

So thats all for this Android RecyclerView Tutorial friends. If you are having any confusions or queries please do comment. Thank You 🙂

Belal Khan

Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.