Monday , September 20 2021

RecyclerView with Multiple View Types Tutorial – Android Coding by DMTechnolab

In this post we will learn building a complex list for our Android Application. In other words we will be building a RecyclerView with Multiple View Types. Most of the times in our android application we show a List. And sometimes it is needed that we want a list that contains different type of items in it. And this is what we will be learning in this post.

We will build the following List in this post.

RecyclerView with Multiple View TypesRecyclerView with Multiple View Types
RecyclerView with Multiple View Types

As you can see here I have a complex list, that contains three different types of items in it.

  1. Heading Section, that explains what is below. (It contains two TextViews).
  2. Movies List. (It contains only a single ImageView).
  3. Directors List. (It contains ImageView and a couple of TextViews).

In all the previous RecyclerView Tutorials, we built a list that contains similar item in every row. But this time we are going to build a completely different kind of list that contains multiple type of items. Sounds interesting right? So let’s do it.

Building a RecyclerView with Multiple View Types

If you want to learn this topic in more detailed manner, then I would advise going through this playlist, here you will learn each step that we have to make in order to build this RecyclerView.

https://www.youtube.com/watch?v=videoseries

But if you are ok with a written post then keep reading.

Pre-requisites of the project

APIs

For the list I’ve created two dummy apis using mockapi.io. The APIs are working while writing this post, but if in case the apis are not working when you are reading it, then you have to make your own dummy apis to make this project work. 

The API URLs are:

Both APIs will give us a List of Movies and List of Directors. In case the APIs stopped working, I am also posting the response structure here so that you can make your own dummy apis.

List of Movies

List of Directors

Project Architecture

I have used the following things in the project

  1. MVVM Architecture
  2. Dependency Injection using Hilt
  3. Retrofit for API Calls
  4. Fresco for loading images from URL

I will assume you know these things, and in this post my focus is just in building the RecyclerView.

Creating an Android Project

This time you should not create a new android studio project, but you should clone my source code. You will find the download link at the bottom. I have arranged the source code in different branches and you need to clone the first branch that is 1-introduction, to get the basic project that is needed for this RecyclerView with Multiple View Types Tutorial.

Assuming you’ve got the basic project, let’s move ahead.

Creating Layouts

In this project we have only a single Activity that is MainActivity.kt  and inside this activity we have a RecyclerView  and a ProgressBar .

And for our List we have three individual layout files, for Title, Movie and Director in our List.

item_title.xml

item_movie.xml

item_director.xml

Keep in mind that we have ViewBinding enabled for this project, and it will generate classes for all your layout files and in the coding section we will be using these binding classes generated by ViewBinding. 

Creating RecyclerView Item Data Class

To hold RecyclerView data we will create a sealed class.

Creating RecyclerView ViewHolders

I hope you know that, we make ViewHolders for our ListItems when we use RecyclerView as it enforces us to use the ViewHolder pattern. And to make a ViewHolder, we can write our own implementation of RecyclerView.ViewHolder class. Each ViewHolder will hold a specific view of our list. In most cases we make only a single ViewHolder, but this time we are building a complex list and hence we will make multiple ViewHolders. Each ViewHolder will hold a specific View that is needed for our list.

As you can see first I have created a sealed ViewHolder class and then all three of my ViewHolder classes are defined using the same sealed ViewHolder class. Using sealed class will help us to make sure that these are only the options available for the ViewHolder. And if you need more types of Views then you can add more ViewHolder implementations inside this sealed class.

We also have a bind function inside each ViewHolder implementation, that will bind the given item with the View.

Creating RecyclerViewAdapter

We can create the ReclerViewAdapter like this.

The code is similar to a normal RecyclerViewAdapter, the only difference is this time we have one more function getItemViewType() .  Inside this function we are checking what is the type of current item based on that we are returning the layout id.

And with the help of this layout id returned, inside onCreateViewHolder()  we are checking the current ViewType, and generating the ViewHolder instance accordingly.

And finally inside onBindViewHolder()  we are checking the type of the holder and accordingly we are binding the data with the ViewHolder .

Now we can use this adapter to create our RecyclerView with Multiple View Types.

Getting Movies and Directors and Merging into a Single List

Now we we need to get the data from API, then we will merge individual lists (Movies and Directors) to a single List (HomeRecyclerViewItem).

Creating the RecyclerView

Now, let’s come to MainActivity.kt  and write the following code.

You can also use Hilt to inject adapter in your Activity class, but that’s I leave onto you. So basically here I am getting the List from the ViewModel and adding the items to the adapter. And that’s it.

You can run the project now to see if it is working or not.

RecyclerView with Multiple View Types AndroidRecyclerView with Multiple View Types Android
RecyclerView with Multiple View Types

RecyclerView with Multiple View Types Source Code

And if you are in hurry you can simply get my source code from this link. But make sure you SHARE this post with your friends, only when if you think I’ve earned it.

So that is all for this RecyclerView with Multiple View Types tutorial friends. In case you have any kind of question, please leave it in the comments below. Thank you.

belal khan profilebelal khan profile

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.


Source link

About dmtechnolab

Check Also

Simplified Coding

Android Unit Test Room Database – Android Coding by DMTechnolab

In the previous post we learned Writing the first unit test In our Android project. …

Leave a Reply

Your email address will not be published. Required fields are marked *