Display Data From Firebase Firestore in Android RecyclerView
By: Hannah Olukoye
Tags: Android, Recyclerview, Firebase, Firestore, Firebaseui

Photo by Ruchindra Gunasekara on Unsplash

Using Firebase on an Android application may seem scary at first but with time when you get the hang of it, you start to look for tools and libraries that will display your data in a few common layouts on Android.

This article will touch on implementing a recycler view on Android after querying data from Firebase Firestore Database.

Firebase Recycler Adapter

This is one type of RecyclerView adapters offered by the FirebaseUI for Firestore.

How does it work? It binds the results of a query to a recyclerview while responding to all the real-time events i.e. items added/removed/moved/changed.

It is advised to use this option when querying small result sets since all results are loaded at once.

Step 1: Follow the steps here to get started with Firebase Firestore on your Android application. This will allow you to add, read and manage your data on Firestore DB.

Step 2: Include the Firebase UI library as a dependency in your grade file.

dependencies {

// FirebaseUI for Cloud Firestore

implementation 'com.firebaseui:firebase-ui-firestore:6.2.1'

}

Step 3: Following the guideline in step 1 to read data from the DB, you can define your query as:

Query query = FirebaseFirestore.getInstance()

.collection("chats")

.orderBy("timestamp")

.limit(50);

Step 4: Bind the query to the recyclerview as:

FirestoreRecyclerOptions<Chat> options = new FirestoreRecyclerOptions.Builder<Chat>()

.setQuery(query, Chat.class)

.build();

Where the model class can be defined as:

Step 5: Define the adapter object and attach it to your recycler view

FirestoreRecyclerAdapter adapter = new FirestoreRecyclerAdapter<Chat, ChatHolder>(options) {

@Override

public void onBindViewHolder(ChatHolder holder, int position, Chat model) {



}



@Override

public ChatHolder onCreateViewHolder(ViewGroup group, int i) {

// Using a custom layout called R.layout.message for each item, we create a new instance of the viewholder

View view = LayoutInflater.from(group.getContext())

.inflate(R.layout.message, group, false);



return new ChatHolder(view);

}

}; //Final step, where " mRecyclerView" is defined in your xml layout as

//the recyclerview

mRecyclerView.setAdapter(adapter);

Important!!! Remember to add the following listeners in your activity’s lifecycle, otherwise, your recycler view will not be populated when you run the app.

@Override

protected void onStart() {

super.onStart();

adapter.startListening();

} @Override

protected void onStop() {

super.onStop();

adapter.stopListening();

}

!!!Disclaimer!!! Sometimes you may end up with this error on your log trace.



com.google.firebase.firestore.FirebaseFirestoreException: FAILED_PRECONDITION: The query requires an index. You can create it here: com.hannah.blog.firechat W/Firestore Adapter: onEvent:errorcom.google.firebase.firestore.FirebaseFirestoreException: FAILED_PRECONDITION: The query requires an index. You can create it here: https://console.firebase.google.com/project/...

This is because indexes are required for most compound queries in Cloud Firestore. Clicking on the link from the error message will automatically open the index creation UI in the Firebase console with the correct parameters filled in. So far, I have not found an automatic way to resolve this issue. Clicking on the link manually works well.

Special thanks to the article by Nur Rohman and Ankit Suda

References:

https://firebaseopensource.com/projects/firebase/firebaseui-android/firestore/readme/