Easy Skeleton Views with Recyclers
Waiting for content really sucks! As developers and UX enthusiasts it is our job to ensure that each user has the best experience even while waiting✨
In most modern mobile applications you’ll find lists and collections of data of some sort. As you already know, in android we usually use RecyclerViews in order to present such collections of data to the user. In this article I will show you how to create simple skeleton views and placeholder for recycler items.
There are numerous ways of representing skeleton content on RecyclerViews. In this solution what we’ll do is pre-render a set number of dummy items. Just enough to fill the users’s screen! These items will be shown as skeletons. Once the data is available we can replace the dummy items with the real data and voila!
Lets explore the solution
In the example code snippets below, I will try to stay as close as possible to a typical production application.
Imagine our RecyclerView adapter data looks the following way:
We also have some simple resource wrapper for the data we get from our repository/service. The wrapper allows us to know the state of our data. When making an API call we’ll create an empty loading resource and post/emit it to the ViewModel. This will let the view know that the data is currently being loaded. We can for example determine that the data is loading if our data is null, or even by checking the loading flag. An example of this is shown further below. Once the data has been retrieved, we can post/emit a Success resource with the real live data to the ViewModel. Our resource wrapper looks like this:
The above wrapper handles the loading state of our data. Error and empty states have been omitted for simplicity. As shown in the examples below using the resource is quite straight forward.
Imagine we have our demo live data, based on the state of our request our data is usually updated in more or less the following way:
We can later let the viewModel handle our data and determine when to show the dummy skeleton data. This can be done in the following way:
In the code above, we have a collection of null elements that we can then map to the data based on the data’s state. When the data is loading we map it to a Loading resource containing the null data collection. All of this can also be done directly on the repository. But it is best if the repository does not know about visual dummy data.
With this approach each item in our RecyclerView can be represented as an individual skeleton. The item is in the loading state when the viewModel is null. Our item xml could look like this:
When done we should be left with a result similar to this:
If you wish to have the shimmer ray effect on the RecyclerView instead of having it on each individual item, all you have to do is let the recycler view be the parent skeleton and set the skeletonGenerateBones flag to false.
For more information about the Skeleton-Bones library check out my other article! You can also find a full working example of the code above in the demo-2 branch of the Github repository
Feel free to leave a comment! Ohh! And one more thing, If you liked this article or found it useful make sure to 👏
