Creating RecyclerView with multiple view-types
This tutorial is the second part of the RecyclerView tutorial series.
If you don’t know how to use RecyclerView or you need to refresh your knowledge, please read this tutorial first:
What will we build in this tutorial?
In this tutorial, we’ll develop a news application that has a RecyclerView with multiple view-types.
Adding dependencies
In addition to the RecyclerView’s dependency, we’ll add the CardView’s dependency, because we want to use it in our items’ layouts. So open the build.gradle file in your app module and add these dependencies to the dependencies section and then click on the Sync Now.
// RecyclerView dependency
implementation "androidx.recyclerview:recyclerview:1.1.0"
// CardView dependency
implementation "androidx.cardview:cardview:1.0.0"You can find the latest version of the dependencies here.
Creating layouts
As you know, the first step of using the RecyclerView is adding it to our Activity or Fragment’s layout, so we add it to our activity_main.xml layout:
For each view-type in our RecyclerView, a different layout file must be created. In this tutorial, we create a layout that contains an ImageVeiw( with id imgNews) and a TextView(with id txtNews) wrapped in a CardView which is called type_a_item.xml. Also, we create another layout that consists of an ImageView(with id imgBanner) wrapped in a CardView which is colled type_b_item.xml.
type_a_item.xml:
type_b_item.xml:
Creating models
The same as layouts, for each view-type in our RecyclerView, we have to create a different model. To do this, we use Kotlin Sealed Classes, so create a sealed class named Model and two subclasses named TypeAModel and TypeBModel.
As you see, TypeAModel has two properties named image and text also TypeBModel has a property named image. Later, we use a list of these models and their properties to fill up our RecyclerView items.
Note: If you’re not familiar with sealed classes in Kotlin, please read its documentation here.
Creating ViewHolders and Adapter
Create a class named NewsAdapter and give it a constructor that takes a list of Models. As well as layouts and models, for each view type, we have to create a different ViewHolder. So create two nested classes named TypeAViewHolder and TypeBViewHolder.
Now, it’s time to complete our NewsAdapter. To do so, this calss has to extend RecyclerView.Adapter<RecyclerView.ViewHolder>. In an adapter for multiple view-types RecyclerView, in addition to the onCreateViewHolder, onBindViewHolder, and getItemCount, the getItemViewType function has to be overridden.
The getItemViewType function returns an Int value that indicates the view type of the item at a specific position. In this function, we check if our data type at the current position is TypeAModel then we return 1, and if not, we return 2. Later, we’ll get these values in the onCreateViewHolder function to indicate what type of ViewHolder we have to create.
As it’s shown, in the onCreateViewHolder function we check if the view type is equal to 1 then we return an instance of the TypeAViewHolder and if it's equal to 2, we return an instance of the TypeBViewHolder.
Also in the onBindViewHolder, we determine the type of the item by checking the holder type.
Connecting all pieces together
Now it’s time to connect all pieces together, so in our Activity, we must create an instance of the NewsAdapter and set it to the RecyclerView.adapter.
Practice: Add click-events for items. If you don’t know how to do this, please refer to this tutorial’s Handling click-events section.
Summary
This tutorial wanted to teach us how easy we can create a RecyclerView with multiple view-types. Now we are able to create a RecyclerView with unlimited view-types. Just don’t forget that for each view type we have to create a different layout, model, and ViewHolder.
You can find the source code from this repo at part_2_creating_recycler_view_with_multiple_view_types
I hope you enjoyed this tutorial and found it educational, thanks for the devoted time.
