Recycler view with Empty View, Loading View and Error View

Photo by Adam Chang on Unsplash

Well, in this age of Android development, apps without recycler view is incomplete. Most of the application use network to fetch the data and show in recycler view. So one of the common pattern is to show a loader when the app is fetching the data from the network. Then display a empty view if there is no data or a error view with retry buttons.

In my opinion, this is the kind of situation where using a library will be a overkill and implementing for every list in the app is real pain.

Compound Control to the rescue. Here is the link if you want to learn more about it. In this story I will create a Compound Control to handle the loading, content, empty and error states for recycler view.

TL DR; Here is the a sample project using a compound control for Recycler View.

susonthapa/LCEERecyclerViewDemo

LCEE

LCE(Loading Content Error) is a class used to wrap the data with it’s status. You can learn more about it here. LCEE is well LCEE(Loading Content Empty Error) is also wrapper like LCE with extra Empty state. Why I named it LCEE, well I am so creative with naming :).

Layouts

Let’s first define our loading, empty and error layout.

Loading Layout

Simple layout with just a circular progress bar

Here is how it looks.

loading layout

Empty Layout

A simple linear layout with a ImageView and TextView indicating a empty content.

Here is how it looks.

empty layout

Error Layout

Oh I wish I would have to never show this layout but let’s face it. A simple view with ImageView , TextView and Retry button indicating an error.

Here is how it looks.

error layout

These layout are very simple, I know you can do so much better and get creative with the icons and text :).

Compound Control Layout

Let’s get down to business. We now need to create a compound control that combines all these layout into a single layout. So create a new layout lcee_recycler_layout.xml.

I am using merge as the root layout because we will be creating a custom view in kotlin that will extend Constrain Layout and will be the root of this layout. If you use layouts like LinearLayouts in xml as the root layout , you will end up creating two nested layout (one in xml and one in kotlin). Then make the visibility of all the layouts except RecyclerView to gone.

Custom Attributes

To make our life easy, let’s define attributes that can be easily used in xml. Start by creating attrs.xml in the res/values folder. The name of file must be attrs.xml. Then create a declare-styleable and define the attributes like this.

This way you can easily customize the text and icons from xml. You can also add further attributes like colors etc.

Compound Control

Finally, we can create a compound control in kotlin. Start by creating LCEERecyclerView that extends ConstrainLayout. Then define all the attributes and let kotlin handle the getters and setters :). I will be using ViewBinding. Now get all the attributes from the attrs.xml we defined above. Also, you can expose the views like recyclerView and define functions to handle the visibility of the loading, error and empty view. Enough talking let’s write some code.

Well It’s almost done. Now whenever you need to use this layout just include in the xml layout like this with attributes like emptyText, emptyIcon etc that you want to configure.

The way that I have implemented, I have exposed all the functions like setting empty view, error view etc from our compound control. You can also use recycler’s view data observers to handle the empty case. But In my opinion view should be as dumb as possible, it shouldn’t decide weather to display empty view by inspecting the adapter’s data.

Here is a little demo of the sample app.

Hope you guys enjoy this story. Let me know in the comments if you have any suggestion or questions.