RECYCLER VIEWS MADE EASY ON ANDROID WITH GROUPIE PART 2

A couple of months ago, I published an article showing a simple recycler view implementation using the Groupie library. However, a friend hit me up that he had a more complex use case which I didn’t cover in that article, so I decided to talk about more complex use cases that you might have as a developer for your recycler views in this article.

This article will be a continuation of a previous article, you might want to check it out first. Also, this article, like the previous article assumes that you are familiar with recycler views, If you are not, you might want to check the official documentation.

Let’s get started!

Suppose we wanted to create a recycler view that is expandable i.e, we can collapse the content to allow for some other content below the recycler view to show or better still, we want to section our recycler view into groups with headers just like the play store app.

How do we go about complex use cases like this? With your normal recycler view, these would have required lots and lots of code but thanks to Groupie, things are going to be a lot easier.

We would be building an app that displays a list of random numbers in a recycler view with some nice looking colours in the background similar to the one in the sample application on their GitHub page.

Creating a recycler view with expandable sections.

What is a section??

If you check the Groupie docs, they define a section as a list of body content with an optional header group and footer group. It supports diffing and animating moves, updates and other changes.

This definition is pretty explanatory. You can see that we can add a header or footer to a section. In this article, we will add a header, you can use the same method to add a footer as well.

I wouldn’t waste time writing the XML parts for the recycler view because I assume you are familiar with how to add recycler views to your layout already, if you are not, kindly read my previous article.

The first thing we will need to do for a recycler view with sections is to write some XML for how we want each section header to look like. This will be placed at the top of each section to define what each section is representing. Let’s look at some code.

There is nothing new here, just a text view indicating the title of the section and an image view for an icon. You are free to make your headers more complex than this.

The item class which groupie will use to bind the views using its default view holder will be the same, simply extending groupie’s item() and overriding bind() where you can do whatever you like with the views.

As you can see, the recycler item class doesn’t change, very similar to we did in the last article. Note though that we are passing an integer representing the colour we will use and another integer representing the number to be displayed which the use in our bind function as constructor parameters.

Creating an Expandable item

We would like to make our sections expandable, as I said earlier, and to do that will would need to create an Expandable item class.

There are a few things to note here:

1. We can see that we are not just extending Item , we are also implementing an ExpandableItem . This will tell groupie that this item class is not for the recycler view but for the header of an item group. Recall that in the last article, we said that groups are the building blocks of Groupie. There is a special type of group called expandable group. An expandable group is a single parent group with a list of body content that can be toggled hidden or shown. The toggling will be done with the header of the group. Implementing the expandable item interface will make us override setExpandableGroup() where we will initialize our expandable group to the onToggleListener , a parameter that comes with the function which is also of type ExpandableGroup .
2. In getLayout() we are getting the layout item we created earlier.
3. In bind() , we set the click listener of the header to either expand or collapse the recycler view when clicked, set the title of the header to the constructor parameter and pass the icon to be used.
4. In getIcon() we are changing the icon depending on whether the group is expanded or collapsed.

In the fragment or activity, we can now make use of our expandable item.

Here, we can see that we are initializing the recycler view and setting the adapter to groupie’s group adapter as usual. However, you will notice that we created two expandable groups using the expandable item class we created earlier. we pass in our title as a parameter in the expandable item.

The second parameter in the expandable group initialization is a boolean value that tells groupie whether the group should be expanded by default or not.

We can now add the list we want to display which are coloured numbers in this case and add the section to our expandable group after which we can then add the expandable group to our group adapter. In the example above, I have created two expandable groups. Let us see the result.

expandable groups of recycler views

Notice also, that we even get a nice animation for the expanding and collapsing of the recycler view.

What if we wanted to shuffle the list??

Shuffling the list is very easy, we just have to call shuffle() on the list and update the section we are shuffling. We will also get a nice default animation for that.

Below, we have the result

shuffled list

That’s it! we can now create expandable recycler views with few lines of code and even shuffle and update them. Feel free to explore the groupie library. All code samples here can be found on this repository.

Happy Coding!!!