Ever wondered how to implement a synchronizer between Android’s RecyclerView and TabLayout? What are the use cases of such on mobile devices? We’ll be discussing just that.

Most common case is when you’re trying to show a list of categories, each category has it’s own body, and that body has to be synchronized with an item of a TabLayout. This has been implemented in many today’s apps really, like Telegram in their emoji’s section for example.

Telegram’s emoji section synchronization

As I’m working on an app, this synchronization had to be implemented, so I searched for a good way to implement it, but I haven’t really found any good library or a built-in ways to sync, so I decided to build my own synchronizer, and now I’m publishing it as an open source library.

The behavior we want from the synchronizer is that as you scroll through the RecyclerView’s items, the corresponding TabLayout items will be selected automatically, and vice-versa; when pressing on a TabLayout item, we want the RecyclerView to scroll to the corresponding item to view. Simple.. right? Well you might be surprised how easy it’ll be.

Let’s make a sample app to demonstrate the synchronization.

Prerequisites:

• You have a good knowledge of RecyclerView and how it works, and how nesting RecylerViews work.
• Understands the concept of TabLayout.
• Kotlin; since this tutorial is written in Kotlin.

Follow these steps:

1- Make some models in order to display them as items in the RecyclerView:

We’ll be making an Item class that will have a simple String field:

And a Category class that will be nesting a list of items:

And therefore, our example list is going to be initialized like this:

And now we have a list of categories, each category has a list of items.

2- Create your xml file that contains your TabLayout and RecyclerView:

3- Initialize your RecyclerView and TabLayout adapters with their data:

The number of tabs will be equal to the number of categories we have initialized.

4- Add the library’s dependencies:

We will be using my library I used in my development app.

Add the maven central repository in root build.gradle:

Add dependency of the synchronizer library in your app’s build.gradle:

5- Create a TabbedListMediator object and pass the required parameters:

• The first two parameters are the RecyclerView and TabLayout that you wish to be synced.
• The third parameter is a list of indices of the RecyclerView items that you wish to be syncing with tabs.

Call attach on the mediator object to start syncing.

Note: that the third parameter must not provide a list of size of more than the tabs count of the TabLayout.

And the results are:

TabSync in action!

You may find it more smooth to look at if it smooth scrolls to the required destination, and for that case, you can add a fourth parameter to the constructor for smooth scrolling:

Results with smooth scroll on:

TabSync with smooth scroll flagged

And that’s about it! Told you it will be easy!

Here’s a preview of our in-production app FoodVibes:

FoodVibes’s implementation of TabSync

Check out the GitHub repository of the library for the full code of the example, and other public methods provided by the library that you would probably need during your usage of this library, like re-attaching on certain scenarios, detaching to stop syncing, and more.

If you found this library useful, don’t forget to give the repo a star that would be much appreciated 😉

You can follow me on LinkedIn too:

Thanks for reading, and happy coding!