RecyclerView + SearchView + TabLayout + ViewModel + Koin

It’s been a while my fellow padawans. Well, excuse my Star Wars moment.

Let’s start again shall we?, it’s been a while since I found something useful to give to the community that I love. We all take knowledge from different places, but it feels good to give something once in a while.

This time I have an interesting “mix”, we often find blog posts about the usage of some sdk elements and libraries, but it’s hard to find these mixes that help us speed up our process.

Using a RecyclerView with a SearchView and a TabLayout, making all work inside a ViewModel and injecting the required components with Koin, this is a beautiful way to make your code look clean and beautiful.

Let’s go onto the process:

The layout

You will see all the components except for the SearchView. Let’s talk a little about the layout details, the toolbar is an include as you might want to customize its look & feel. The tabs will allow us to sort the elements in an ascending or descending order. And last, we will see the RecyclerView that will show the content, it also has the item layout to allow the preview in the layout editor.

The menu

Here we have the menu with the SearchView, this one is pretty short as it only contains this component.

The Activity

The activity contains the interaction with the UI components, it setups the RecyclerView, the TabLayout and the SearchView, there’s a trick on the last two, when the search is active the tabs are visible, otherwise they become invisible to show the original unmodified list. The ViewModel is injected using Koin’s viewModel() method, as you can see there’s no other property except for the searchView .

The ViewModel

As we can see the first two parameters are the dataSource and the adapter, these are injected using Koins methods, we also have properties to set the sort order desired and the search text, finally a method to apply the filters and a method to reset the list.

The DataSource

I Added this as a way to show what the example datasource would look like, but it can be anything you need.

The Adapter

The adapter is pretty simple, no filtering is done here, just presenting the data on screen, if needed, any UI action could be setup on the configure method, the context can be retrieved from the view, that removes the need to pass a context and leak memory.

The Injection Module

As you can see on the gists, the injected components are setup here and the module is setup on the apps onCreate method.

Final words

With the previous example you will see that the ViewModel holds the filtering capabilities. The Activity only contains the UI portion of the code. There’s a datasource that is injected and could use the repository pattern, making this an MVVMR example. The adapter being on the ViewModel could be a conflict in MVVM’s strict representation, but this adds more flexibility on the list and the best of all, no context was harmed/leaked in the making.

Hope this helps you on your everyday work, please leave a comment if it did.