Understand the messy story of Android RecyclerView with a header in Kotlin

First of all, I’m learning Kotlin after many years of Swift for iOS. I’m still learning and practicing. I decided to write this little article because sometimes I feel a bit confused about the different mechanisms between Swift and Kotlin. Here we’ll see how to implement a recyclerView with headers.

If you are here you’re probably trying to create a beautiful screen for your Android app containing a list of items. Well, I was in the same situation a few days ago. I was looking for a tutorial to create a screen containing a list of items with headers for a project. First I found a very nice article about the listView. I was like “GOT IT!”. Everything was ok until I noticed my app crashed when scrolling the listView because of the memory. If you want to display images inside the rows, it seems the memory is very sensitive with images and crash…

That’s how I faced the RecycleView mechanism. Sort of an evolution of the listView. I was like “WTF, why is there different kind of mechanisms to display a fucking list in Android ?! Why make it complicated?”. Then I found a lot of articles about RecyclerView but I was not able to understand the concept. It was very different than I used to do in Swift. I spend 2 days on it to finally achieve my goal… I’ve seen many people sick of RecycleView when reading the comments of these articles. I decided to write my own and maybe help some people to understand this messy mechanism.

Ok, fewer words more code! If you are using Swift you should know about TableView which gives you the same result for iOS. In Kotlin the mechanism is very different. You need to create a new Adapter Class and manage the rows inside of it. Then you can link this Adapter to your RecycleView. (I assume you are comfortable with Kotlin)

Step 1: Gradle

Add the following line to your Gradle Module:

(Typically it’s kinda the same as importing pods in your podfile for iOS apps)

Step 2: Layout

First, we’ll create the fragment layout containing a recycleView. Then two layouts, one for the header sections and one for the rows.

Here’s the fragment view containing the RecyclerView:

The row view containing a TextView and an ImageView :

And finally, the header view containing a simple TextView:

Step 3: Models

Ok, now we’ll create our models. The first one is just an object containing a text and an image name for the rows themselves.

The second one will set if it’s a header or a row.:

We’ll use this class by populating a map to indicate if the child view is either a row or a header.

Step 4: MyAdapter

Now we have our layouts and models we can going through the Adapter. First, we will create an Enum for our different kinds of views.

Then we will start by creating the adapter class like this:

Don’t worry about the MyViewHolder, we’ll set it later.

We’ll implement 4 abstract methods for our adapter class. The first one is “onCreateViewHolder”.

As you can see we inflate the row view and the header view depending on the view type.

Then we set the size with this line of code:

After that the “onBindViewHolder” :

Here we get the position (like indexPath.row for Swift) in the RecycleView. We check in the MutableList if it’s a row or a header and call the method to set the data.

Here we also set the click listener event for the rows. BUT here we don’t set the click listener for a button inside the view if you have one. I’ll introduce it later.

And finally, we will set the “getItemViewType” :

As you can see it just return an Integer for each type of view (Here we set 0 for header and 1for a row).

Now the whole “MyAdapter” class should look like the following code:

Step 5: MyViewHolder

Now we’ll create the holder view class which holds the inflated views and set the data on it.

First, we’ll set a map which holds all the child views:

Now we’ll add the following lines to get the views and set in the map:

Then we’ll add the methods which set the data to the layout of our headers and rows. If it’s a header we’ll call “setHeader” and if it’s a row we’ll call “setItems”. According to your project, you can also add here a clickListener for a custom button inside your rows.

Your MyViewHolder should look like this now :

We are done with the RecyclerView part! The next step is to use it in our view containing the RecyclerView and display it.

Step 6: RecylcerViewFragment

For that I’ve created a fragment called RecylcerViewFragment :

1: we add the layout variables for the RecyclerView.

2: itemList is used to hold both header and row objects.

3: “newInstance” is set to display the fragment from the MainActivity.

4: The “setData” method populates the itemList with header and row objects. I’ve added 2 images in the drawable folder (called “image1” and “image2”).

5: “setRecyclerView” links your adapter to your RecyclerView.

Step 7: MainActivity

The last thing to do now is to display this Fragment when the MainActivity appears. (adapt and call it according to your own project).

Add an id to the main activity layout. I’ve set “container ” as id. It should be like this:

Then the MainActivity class. We add some code on the “onCreate” method to call our fragment.

There we go! Let’s see the final result:

Here you can find the whole project folder:

I hope you enjoyed reading this tutorial step by step. Feel free to comment on what you think or ask any question ✌️



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Matt Jacquet

Mobile Engineer 👨🏻‍💻 Self-made guy with ambitions ✨ Writing about coding and self-management · https://www.appro-app.com/