How to inflate different LayoutManagers for each adapter with ConcatAdapter

This gives us the advantage to build up an entire view writing different components and then wrap them up in sequence, which makes it easier to build up complex UI’s with recyclerview.

You can read more about ConcatAdapter at the official announcement post from Florina Muntenescu here

Basically, we write individual adapters for our different views and then merge them with ConcatAdapter, the result is a sequence of views inside one recyclerview

Since we need to set up a single LayoutManager to our ConcatAdapter , this will display the items either Vertically, Horizontally or if we want as a Grid, but what is recommended is to use a vertical layoutmanager for our ConcatAdapter and then just place the different views one below the other, making the creation of this view easy.

How we inflate different views that have different layoutmanagers into this same recyclerview?

The use case could be something like this screen

If you can see here we have 3 sections, the first section is a gridlayout , the second section is a linear recyclerview and the third section is an horizontal recyclerview, now, how we can manage to build up this view with ConcatAdapter ?

At first, maybe is not really clear on how to integrate different adapters that have different layoutmanagers for each of this views but in this post, we gonna see how to build a complex UI with just a few adapters, so let's do it :)

First, you will need to create the adapters that will show the data as we normally do, there is no extra magic on it

In this example we gonna create the gridlayout for the first item of the ConcatAdapter and the linear list below it, after that, is your homework to create the horizontal layout with this concept ;)

As you can see, here is the first adapter that will hold a list of animals, as you can see here, I do some calculations to fit 4 elements in the width of the view, this is because this adapter will be held by a GridLayout, later when we create the ConcatAdapter we will see how this will be easy to integrate into our view.

Here I extend from BaseViewHolder, I have created a simple abstract class that will let me pass any ViewHolder and bind any type of element to it, this is really helpful if we, in the future, want to add an extra viewtype to this adapter, it will be very easy to add it, just in the when clause you can define the other viewholder and it's done

Now, let’s create the second adapter, this adapter will be responsible to hold a list of Dog Breeds

Pretty straight forward right? These are two simple adapters that will hold the different data for each view, the gridview and the linear view.

But, you may be wondering, but wait… why I don't just use one adapter that will hold different viewtypes, one for the Animals view and another one for the Dog breeds?

This is a really good question because we can do it that way, but here is where it comes ConcatAdapter to solve this problem.

Imagine you are working in a large home screen in your app, it needs to show multiple sections with different views, you can manage to create multiple viewtypes for this view, but imagine in the future when you have let's say 10 viewtypes for that view !! this will cause that this adapter will grow each time you add a new view to it, now your adapter will be so large that may be touching a simple line could break the whole view!

Now, imagine another scenario, you are working with a team, each team is responsible to work in each viewtype feature, let's say the first grid of animals is given to a certain team to work with, now, you are assigned to work into the second viewtype, and now, 2 teams are working in the same adapter, touching the same code and working in different features!

This could cause that if one of the team messes up any of the code that handles the other views it will impact in the code you are writing, plus that it will for sure have some merge issues when all of the teams push code to the same class.

Now, with ConcatAdapter we don't need to take that risk, we just code different adapters that will be assigned to each team, each team will touch only the adapter that holds that view and nothing more, also we prevent using multiple viewtypes inside one adapter and modularize the code in a more structured way to work with.

Now that we have our Adapters that will hold our two different views, lets put them together with ConcatAdapter

Here is where it comes another adapter, so how it works, we gonna do a new adapter that will hold the recyclerview and setup its layoutmanager inside its onCreateViewHolder, then we just pass these adapters into that concat adapter we gonna make to setup our different layoutmanagers

As you can see I also use BaseConcatHolder , it's just the same as BaseViewHolder but it just binds just the adapter since we don't need a position

So now we only need to pass our animal populated adapter inside this one to set up its GridLayout

As you see here, now we have 2 adapters, first one has a GridLayoutManager, and if we want to change the layoutmanager for the second adapter, let's say instead of a vertical list we want an horizontal list, we just do an adapter, pass our breedAdapter and just setup an horizontal layoutmanager for it, the process is the same for all our adapters!

Thats all ! is this easy to create complex views with ConcatAdapter in an easy way !

You wonder how to do this but with data binging ?

Check Lucas Nobile talk at GDG Córdoba Argentina

Related posts:

I am an artist. I write, draw, paint, sing, play, tattoo, and design. I am a Christian. I believe the God of the universe is reaching out for your hand and mine. I am a wife, a daughter, a sister, a…

My dad keeps asking about the thing that’s on TV, the thing he can’t pronounce until I write it phonetically. He has a hard time remembering, so I have numerous notes lying about that I’ll grab for…

I was waiting for 6th May 2019, when the result of students selected for google summer of code were announced. Felt exciting & overwhelmed to see my name on the much awaited list. During the…