Quick Tip — Cloud Firestore, Android RecyclerView and empty state

App without nice empty states can often look bad or at least empty. It’s worth spending time together with the design team to figure out what can be shown when there’s no data. Usually a good approach is to explain what the list will have and encourage user to start the action required.

Android ListViews allowed us to define a View that was shown when the ListView didn’t have any content but ListView is long gone (good riddance). RecyclerView, the replacement, doesn’t have the same functionality out of the box but it’s not difficult to add when you control the data.

But what when you don’t control the data? What if the data is automatically populated for you like when you use the Firebase Could Firestore in combination with the awesome Firebase UI library?

It’s not difficult here either. It just requires hooking into an API interface that might not immediately be completely obvious.

The FirestoreRecyclerAdapter has a function onDataChanged() which you can override to react to content changes. Inside this function you can check if the adapter is empty or not and call whatever handles your UI’s state for you.

In my case I’m changing the visibility of my static empty-state view and using an animation trick (delayed) to show highlight on the action button to encourage user to hit the button.

The result looks like this: