Introducing Nachos — Tutorial Series for Airbnb’s Epoxy with Kotlin

This is a tutorial series for using Airbnb’s Epoxy with Kotlin for developing complex views on Android easily. This blog assumes intermediate knowledge of Android development and is suited for someone who has been developing Android apps for a while and are looking for something to decrease their frontend development time along with making it more flexible and modular. Well, you guessed it right — Epoxy will just do that for you!

TL;DR
Epoxy removes boilerplate code needed to build a recycler-view having multiple view type by putting datas in EpoxyModel and Adapter and more in EpoxyController.
Have a look here for simple RecyclerView implementation using Epoxy.

Epoxy — A short Technical Overview

Epoxy is a new library open sourced by Airbnb. They call it Airbnb’s view architecture. You can head to their article or below embedded video for more general overview of Epoxy and I will recommend it too as they have shared some insights about why epoxy was developed and how they have used it to make their application development easier. In this blog, I have drawn parallels from RecyclerView Implementation and shown how Epoxy handles all those functionalities. Later, in this series I have focused on concrete implementation of the Epoxy in Kotlin for showing the possibilities and power of Epoxy.

A good technical overview of Epoxy by Eli Hart

What does it do best?

I believe every library or framework does one thing best and we as developers can make our choices around them.

Epoxy can handle multiple view types in Recycler View efficiently and thus if your app has multiple view types and you want to display them using recycler view, then Epoxy is the best choice for you.

Generally, every big app has more than one view type i.e. if we look at Facebook’s app, there are lots of different view types in normal news feed as shown below:

Three Different kind of View types in Facebook News Feed

As you can see, though they look similar but the above posted snapshots are three different view types implementation wise.

1. The first one is complex view of horizontal carousal with its own image view, text views and button.
2. The second view is complex view of single element with text views, image views and button.
3. The third view is complex view of single element with some text and a video.

There are many other view types in Facebook, almost all kinds of permutation and combinations of native view types are present. And we want to show them in RecyclerView scrollable fashion. Well Epoxy makes it easy to achieve the same.

Cool, But How does it do it?

As we know, RecyclerView needs particularly three objects to display endless scrollable list of items:-

1. RecyclerView Object — This is overall container and contains information about layout manager and adapter which takes care for data injection in the view. This part is more or less not much affected by Epoxy, it can be dealt with in same fashion as before.
2. RecyclerView.ViewHolder — This is an object which is in charge of displaying a single item with view. This is where Epoxy majorly comes into picture and handles all these abstractions beautifully. They are dealt with EpoxyModel classes.
3. RecyclerView.Adapter — This creates view holders as necessary and also binds the data with their views. This is where main epoxy has shined maximum and has made it extremely easy to build various view types easily. This is dealt with Epoxy Models and Epoxy Controllers.

At the core, Epoxy handles the last two of the RecyclerView objects and handles them by its own abstractions. Those are:-

1. Epoxy Models — This one handles the Recycler.ViewHolder objects and is actually tasked with creating a model class that can be used to display a single item with view along with associated data.
2. Epoxy Controllers — This controls which models will be added to recycler view and gives us a pretty plug in-out interface to add EpoxyModels or view holders to the recycler view and hence make it easy to develop different kind of screens with same components easily and fast.

Hmm, seems interesting what else it can do?

Epoxy comes with all kinds of functionalities and they have covered most of the things in their wiki page here. I will also be developing and showcasing various features through this Github repo. A tentative list of features are-

1. A simple implementation of Recycler View with Epoxy (Check this out).
2. Modifying RecyclerView with two view types and arranging them in two different ways in two different fragments, something as shown below.
3. A nested recycler view. (This will take some time.. :P)

A Recycler View object with 3 view types but arranged in different fashions.

Great, Where should I start?
I have created a simple recycler view implementation using Epoxy, you can check it here.
Also Stay tuned and follow this blog series to find more implementations in Kotlin and if you want to learn more, following are some good resources to get started too:-

1. Epoxy Wiki
2. A good talk by Eli hart
3. Airbnb’s article about Epoxy

Also go through Recycler’s View documentation, if you have trouble understanding some concept as essentially epoxy is also accomplishing same task of showing scrollable list of items easily.

Happy Coding!