Reading Time: 6 minutes

In the name of God

Hey guys, welcome back to my blog.

Today I’m going to talk about RecyclerView and how we can make our lives 100 levels easier and also how to make more reusable RecyclerViews. I’m very excited about this topic so without any further delay let’s get started. A note before we start, this post will be in Kotlin!

RecyclerView is a very very good tool and provides great functionality to our apps.
But Have you ever tried to create a RecyclerView? ever counted how many classes you need to create? how many edge cases have handled? or maybe how many libraries have you tried to ease the way everything works on RecyclerView?

I guess The simplest implementation is:

  1. Add RecyclerView on XML
  2. Add List Item XML
  3. Create a ViewHolder for that Item XML
  4. Create a RecyclerView Adapter (and make sure you implement functions correctly and handle all the nulls!)
  5. Create a LayoutManager
  6. Add all of this together in another class (usually Activity, Fragment, View and …)





 

These steps are very familiar to us. they are so routine that sometimes we even forget how complex could it be!
let’s add even more complexities! shall we?!

I want to use DiffUtil with RecyclerView Adapter so every time I call submitList(list) the adapter handles the differences and applies the correct notify*() function instead of always calling.
that means I have to at least create another class called DiffUtil.ItemCallback. not so bad ha?!




 

Now to go another step further let’s say our view has changed and we have to add another type to our adapter. OMG handling two types with DiffUtil?!! alright, let’s do this. first of all, we have to abstract our Model class and probably create a Sealed class and then create types and re-implement DiffUtil.ItemCallback. not to mention all the fuss about ViewHolders, getItemViewType() list size, and correct onBindViewHolder().


 

I can make this RecyclerView Adapter harder and harder. but there is only one more step I like to talk about

Let’s consider a case that our view has changed again and view have to create a Horizontal list instead of the second type! that means we have to create a ViewHolder that contains another RecyclerView inside with its own separate adapter! but what about all those DiffUtil.ItemCallback and type handling? yeah, we have to change and re-implement them again! and even one more type for the inner RecyclerView adapter!

For me, that’s almost the hardest thing to do with RecyclerView Adapter. but there should be a way to help and ease this implementation and reduce the boilerplate code we write. but how?!

Here comes the Epoxy.
ٍEpoxy is a library that allows you to implement RecyclerView in a declarative way. it’s been created and maintained by AirBnB Android Engineers.

So what is this tool and what does it do exactly? Should I learn a whole new tool just to show my lists?

Epoxy is just a wrapper around RecyclerView and RecyclerView.Adapter. so all the fundamentals and basics and underlying are still the same and nothing new to learn there. Epoxy is very Kotlin friendly  As I have mentioned before it will help you create your list a lot easier and pleasant! on top of easy to use API, it has a lot of features (including DiffUtil) built right into it which makes us focus more on building great UIs rather than boilerplate code.

Ok, that’s enough introduction let’s see how we can get started and make simple use of Epoxy!

First Step:

Head into the project repository on Github. copy these few lines to your app build.gradle file:


 

Second Step:

In order to show our items in Epoxy we need to create a model extending EpoxyModel (they are very similar to old ViewHolder classes but a lot easier to work with and more flexible). the easiest way to do this is by extending this KotlinModel class.


now time to create our unique list item


 

Third Step:

In your Activity/Fragment/View XML add EpoxyRecyclerView instead of a normal RecylerView.


 

Fourth Step:

Find epoxyView, then call list.withModels{} this is the function that allows you to build your list. to do that, we just have to create instances of our earlier model, set Id and finally, add to list.


 

That’s it. our final result looks like this.

Epoxy Final Result App ScreenShot
Epoxy Sample part one final result

You might have already noticed that we did not implement any adapter at all neither there was no LayoutManager. They are all handled for us by EpoxyRecyclerView.
Earlier we talked about DiffUtil, let’s see how we implement it using EpoxyRecyclerView? we don’t!
epoxy has a built-in DiffUtil and applies the correct notify*() call on the adapter itself. what’s even better is you may call .withModels() many times and nothing bad (like a jank won’t happen!) because Epoxy will queue these calls, diffs them and apply them in the same order you called.

There was one more concern about RecyclerView.Adapter at the beginning of this post: MultiType.
now let’s see how hard would it be to add a new type to our list.

All we have to do is to repeat the Second and Forth Steps. So we create a new Model and then create objects of it in .withModels() call. remember the order is important so the first you add to the list will be shown on top followed by the models you added next.


 

Wasn’t it just amazing? it’s absolutely mind-blowing when comparing Epoxy with the old way of doing lists on Android.

Hopefully, this post helps you get started with Epoxy. we at Noavaran are building every screen using Epoxy (even the ones that are not a list!) it has improved our productivity and performance.

There are a lot more topics we can talk about Epoxy but not in this post. it’s been already a long one so make sure to come back next week for part Two.

Thanks again, everyone. as always you may find the project and resources on Github. (make sure you wait for the images to load completely, they are a bit large)

Happy Coding

2 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here