Empty RecyclerView Indicator
This is a helper component that manages the recyclerView data states. It shows the loading progress and a message to the users when there is no records to show. It is a good practice showing a message to the users than just a blank screen when there are no records.
Implementing this, is quite straight forward but when you have more than one recyclerView it becomes boring 😦 . I always try to avoid repetitive code, they easily become boring and sometime you are tempted to skip or copy paste, which is always a bad idea . In most cases you have no option, you have to deliver the best and consistent user experience.
RecyclerView, is container view that shows items in a list or a grid depending on the layout manager set. The content of the recyclerView depends on the supplied list of item, which can have zero items in a case where data is not found.
The default recyclerView would be empty in case zero item are supplied through the adapter, a blank screen would be shown to the users. It is better to show a message to the users that there is no data loaded.
The traditional way of implementing this, is attaching views of on top of the recyclerView . You will have to attach the progressBar and the status TextView on top. When the data is loaded, you will have to set the view visibility of progressBar and status TextView. This is quite simple, but repetitive in case of more than one recyclerView.
To solve this, we can extend RecyclerView class and create a custom RecyclerView 😦 But personally i don’t like customViews . There can be a better solution to this, that would use the default RecyclerView without creating a custom RecyclerView.
Let’s check it out 😄
😛 i would not go through all the classes required for this implementation, i will focus on the main concepts.
- Drawing the a View on top RecyclerView
The main goal is to have a view on top of the recyclerView without manually creating it, in the xml file. To attach a view to the recyclerView at run-time, we have to use PopupWindow, a window will float on top of the recyclerView. This might look like a dialog box , Sure ? No ! we will configure the PopupWindow and have it flattened on top of the recyclerView. Check on the below snippet.
The above code snippet will add a layout on top of the recyclerView, By doing this we will no longer have to add the layout manual in every layout file where a recyclerView is created.
2. Updating the View
After data is fetched, we need update the view on top of the recyclerView, (the view that tells the user there is no content) we have to set it Invisible, and depending on the result we set the status message.
To achieve this we have to listen to the data changes in the adapter. Luckily we a method that we can override within the adapter. Below is a code snippet that observes the data changes in the adapter. When the data changes we can then change the view properties on top of the recyclerView.
The above method is called when the data changes, here we need to get the size of the item list. If the number of items within the list is zero, then “no content message” should be shown to the user.
3. Refresh
After data is loaded, there might be need to re-fetch the data therefore, the emptyView Indicator has to be reset to its initial state. This will reset the view status and the progressBar will display again to indicator the loading process.
The above general steps can be combined into an helper component that would manage the recyclerView state.
empty-recyclerview-indicator 🚀
This is a library that encapsulate the whole process into a module, it is hosted by bintray therefore it is quit easy to pull it into an android project.
Installation
To use EmptyRecyclerViewIndicator we need to create a global instance, that can be used within the entire application. This is created in the application class.
Within the activity class, we can get the instance of the EmptyRecyclerViewIndictor then attach it to the recyclerView as in below code snippet.
Finally within the adapter we need to override registerDataObserver method and notify the EmptyRecyclerViewIndicator instance of the data change.
By default, a sample view is attached to the recyclerView, but a custom xml file can be set through setCustomLayout(). This allows customization of the view so as to fit different app designs.
It is simple 😃 you can check on it’s documentation here and you are welcome to contribute and improve it.
#kotjav & happy coding.
