Android: Recycler view using Card view
This post discusses about the ubiquitous Recycler view which is an integral UI component found in many popular apps. A good example is the Google Play Store itself! After you finish reading this post you will have a solid grasp of the fundamentals of Recycler View; And you can start using them in your apps.
But first…When should you use a Recycler view?
That’s a great question! A Recycler View must be used when you need to display a large set of scrolling items or if your data changes frequently.
Recycler view uses what is called as “view recycling”. Now what the heck is that?
Imagine a scenario — where you have a bunch of items to display in your screen. You decide to use a couple of those views and put them all under a Scroll View. That works too, however, it’s not very efficient since not all items are visible at once on your screen. The objects of those views are created even before you scroll to them, and hence it is a waste of memory:(
Enter Recycler View! It ‘reuses’ the views that are initially displayed on the screen to display the other items. That way you are saving tons on memory.
Recycler View is an improvement over the existing List View and gives the developer more flexibility (That’s us!). Check out this great video of a Udacity course that explains view recycling.
As always I’ll divide the code into steps so let’s get right into it!
Step 1:
Add the following dependencies in your build.gradle file (app level) as both Recycler View and Card View are part of the support Library.
implementation 'com.android.support:recyclerview-v7:27.0.2'
implementation 'com.android.support:cardview-v7:27.0.2'Now Let’s create the layout files. Copy-paste the following code into your activity_main.xml file
Create a new layout file called list_item.xml and copy-paste the following code into it!
In this post we are creating an app that displays a list of TV shows. Each item in the Recycler View consists of an Image and the name of the TV show next to it.
Step 2:
We create a model class that will be used to populate the Recycler View. It’s a simple POJO class that has two main methods: 1. To set the name of the show in the text view 2. The drawable resource file to be used for the Image View.
Add this code to your model class. I have named it TvShow.java
public class TvShow { private String Tvshow;
private int imgTvshow; public String getTvshow() {
return Tvshow;
} public void setTvshow(String tvshow) {
Tvshow = tvshow;
}
public int getImgTvshow() {
return imgTvshow;
}
public void setImgTvshow(int imgTvshow) {
this.imgTvshow = imgTvshow;
}
}
Step 3:
We need to create a separate class called an “Adapter” class. The adapter class is responsible for taking in the data source and creating a view for each item in the Recycler View. Here I have named my file TvShowAdapter.java
The class extends the RecyclerView.Adapter class and takes the View Holder class as a generic parameter. We will be defining our own View Holder class. Copy-paste the entire code into your adapter file and I’ll walk through all the important bits.
The three methods of importance are:
- onCreateViewHolder()
- onBindViewHolder()
- getItemCount()
onCreateViewHolder()
This method is where you inflate the layout for the view of every item in the Recycler View. You create an instance of a View Holder and pass the view object in the constructor. You then return the view holder object.
onBindViewHolder()
This method gets the view holder object as a parameter from onCreateViewHolder(). Using the holder object we can set the data on all of the views defined in the list_item xml file.
getItemCount()
This is the method where you specify the number of items the Recycler View must return.
Step 4:
In this last step we hook up everything in our MainActivity file. Copy-paste the following code into your file and I’ll explain what’s happening!
We first declare the Recycler view and the Adapter at the top of our Activity class. Inside the onCreate() method, we find the recycler view using findViewById() method. Then we add items to an ArrayList that contains our shows and their images (Remember to replace them with your own images!).
We set the layout manager for the recycler view, in our case it’s the linear layout. And finally, we set the adapter using the setAdapter() method.
If you have followed along correctly, it should look something like this!
As you can see our TV shows are on the right with their respective show images on the left.
If you find learning through a video is easier, check out this video on YouTube below:
Congratulations! Hope you enjoyed reading this one. Please don’t hesitate to post any queries whatsoever in the comments down below:)
I’ll see you guys in the next one. happy coding!
