How to populate RecyclerView with Firebase data using FirebaseUI in Android Studio

23 Nov, 2021
Firebase is one of the most popular online databases in use today and will be the same for at least a few years to come. Firebase offers a Realtime Database that can be used to store and retrieve data in real-time to all users. In this post, let’s connect the Realtime Database with an Android application and show the data in RecyclerView using the FirebaseUI. FirebaseUI is an open-source library for Android that provides to quickly connect common UI elements to Firebase APIs. We are going to cover the following things in this article.
How to create a Firebase project and add some data manually to show in the app.How to create an Android project and add Firebase and FirebaseUI support in it.How to add RecyclerView in the android app and display the data in Firebase Realtime Database.
How to create a Firebase project and add some data manually to show in the app.
How to create an Android project and add Firebase and FirebaseUI support in it.
How to add RecyclerView in the android app and display the data in Firebase Realtime Database.
Step 1: Create a Firebase ProjectGo to https://console.firebase.google.com/u/0/Log in to Firebase with your Google account if are not already logged in.Click on create the project.
Go to https://console.firebase.google.com/u/0/Log in to Firebase with your Google account if are not already logged in.Click on create the project.
Go to https://console.firebase.google.com/u/0/
Log in to Firebase with your Google account if are not already logged in.
Click on create the project.
Step 2: Give a name to the projectWrite the name.Click on continue.
Write the name.Click on continue.
Write the name.
Click on continue.
Step 3: Disable Google Analytics(There is no need to do this for this project)Click on the toggle button.Click Continue.       Firebase will create a project for you and open it for you.
Click on the toggle button.Click Continue.
Click on the toggle button.
Click Continue.
       Firebase will create a project for you and open it for you.
Step 4: Create a Realtime Database:Go to Develop Option on Sidebar.Click on Database.Scroll down in a new screen and click on Create Database on Realtime Database.Select Start in Test mode (In order to get read and write access to the database).Click enable.
Go to Develop Option on Sidebar.Click on Database.Scroll down in a new screen and click on Create Database on Realtime Database.Select Start in Test mode (In order to get read and write access to the database).Click enable.
Go to Develop Option on Sidebar.
Click on Database.
Scroll down in a new screen and click on Create Database on Realtime Database.
Select Start in Test mode (In order to get read and write access to the database).
Click enable.
Step 5: Add data to the database using the ‘+’ symbol in the database in the same manner as given in the picture.Note:All data values are stored in a string format for ease.Key-value can be any string but should not include spaces ” “.The same sub-keys should be present parent keys so that they can read by Recycler View without any error.
Note:
All data values are stored in a string format for ease.
Key-value can be any string but should not include spaces ” “.
The same sub-keys should be present parent keys so that they can read by Recycler View without any error.
Step 1: Open Android Studio and create a new project named “RecyclerView” with an empty activity.
Step 2: Connect your Firebase project with your app.
Step 3: Add the following dependency in your app/build.gradle file in order to get the FirebaseUI and Firebase Realtime Database support in the app.dependencies {   // Dependency FirebaseUI for Firebase Realtime Database   implementation 'com.firebaseui:firebase-ui-database:6.2.1'        // Dependency for Firebase REaltime Database   implementation 'com.google.firebase:firebase-database:19.3.1'   }
dependencies {   // Dependency FirebaseUI for Firebase Realtime Database   implementation 'com.firebaseui:firebase-ui-database:6.2.1'        // Dependency for Firebase REaltime Database   implementation 'com.google.firebase:firebase-database:19.3.1'   }
Step 1: Add the following dependencies to get the support of Cardview in the app.dependencies {    // This dependency includes all material components of the android app.    implementation 'com.google.android.material:material:1.1.0'   }
dependencies {    // This dependency includes all material components of the android app.    implementation 'com.google.android.material:material:1.1.0'   }
Step 2: First, add Recycler View in the activity_main.xml and name it recycler1 paste the given code in the activity_main.xml file in order to do so.XMLXML<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">      <androidx.recyclerview.widget.RecyclerView        android:id="@+id/recycler1"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#65E4A6"/>    </androidx.constraintlayout.widget.ConstraintLayout>
XML
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">      <androidx.recyclerview.widget.RecyclerView        android:id="@+id/recycler1"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="#65E4A6"/>    </androidx.constraintlayout.widget.ConstraintLayout>
Step 3: Now, let’s create another XML file in the layout directory to store the data from the database of a particular person. We will name the file as person.xml. Copy the following code in the created file.XMLXML<?xml version="1.0" encoding="utf-8"?><androidx.cardview.widget.CardView     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginHorizontal="10dp"    android:layout_marginTop="10dp"    android:layout_marginBottom="20dp"    android:scrollbars="vertical"    app:cardCornerRadius="20dp">        <androidx.constraintlayout.widget.ConstraintLayout        android:layout_width="match_parent"        android:layout_height="match_parent">          <TextView            android:id="@+id/textView1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="16dp"            android:text="First name: "            android:textStyle="bold"            app:layout_constraintStart_toStartOf="parent"            app:layout_constraintTop_toTopOf="parent" />          <TextView            android:id="@+id/firstname"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="16dp"            android:layout_marginEnd="16dp"            android:text="TextView"            app:layout_constraintEnd_toEndOf="parent"            app:layout_constraintStart_toEndOf="@+id/textView1"            app:layout_constraintTop_toTopOf="parent" />          <TextView            android:id="@+id/textView2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="16dp"            android:text="Last name:"            android:textStyle="bold"            app:layout_constraintStart_toStartOf="parent"            app:layout_constraintTop_toBottomOf="@+id/textView1" />          <TextView            android:id="@+id/lastname"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="16dp"            android:layout_marginEnd="16dp"            android:text="TextView"            app:layout_constraintEnd_toEndOf="parent"            app:layout_constraintStart_toEndOf="@+id/textView2"            app:layout_constraintTop_toBottomOf="@+id/firstname" />          <TextView            android:id="@+id/textView3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="16dp"            android:layout_marginBottom="16dp"            android:text="Age"            android:textStyle="bold"            app:layout_constraintBottom_toBottomOf="parent"            app:layout_constraintStart_toStartOf="parent"            app:layout_constraintTop_toBottomOf="@+id/textView2" />          <TextView            android:id="@+id/age"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="16dp"            android:layout_marginEnd="16dp"            android:layout_marginBottom="16dp"            android:text="TextView"            app:layout_constraintBottom_toBottomOf="parent"            app:layout_constraintEnd_toEndOf="parent"            app:layout_constraintStart_toEndOf="@+id/textView3"            app:layout_constraintTop_toBottomOf="@+id/lastname" />      </androidx.constraintlayout.widget.ConstraintLayout></androidx.cardview.widget.CardView>
XML
<?xml version="1.0" encoding="utf-8"?><androidx.cardview.widget.CardView     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginHorizontal="10dp"    android:layout_marginTop="10dp"    android:layout_marginBottom="20dp"    android:scrollbars="vertical"    app:cardCornerRadius="20dp">        <androidx.constraintlayout.widget.ConstraintLayout        android:layout_width="match_parent"        android:layout_height="match_parent">          <TextView            android:id="@+id/textView1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="16dp"            android:text="First name: "            android:textStyle="bold"            app:layout_constraintStart_toStartOf="parent"            app:layout_constraintTop_toTopOf="parent" />          <TextView            android:id="@+id/firstname"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="16dp"            android:layout_marginEnd="16dp"            android:text="TextView"            app:layout_constraintEnd_toEndOf="parent"            app:layout_constraintStart_toEndOf="@+id/textView1"            app:layout_constraintTop_toTopOf="parent" />          <TextView            android:id="@+id/textView2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="16dp"            android:text="Last name:"            android:textStyle="bold"            app:layout_constraintStart_toStartOf="parent"            app:layout_constraintTop_toBottomOf="@+id/textView1" />          <TextView            android:id="@+id/lastname"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="16dp"            android:layout_marginEnd="16dp"            android:text="TextView"            app:layout_constraintEnd_toEndOf="parent"            app:layout_constraintStart_toEndOf="@+id/textView2"            app:layout_constraintTop_toBottomOf="@+id/firstname" />          <TextView            android:id="@+id/textView3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="16dp"            android:layout_marginBottom="16dp"            android:text="Age"            android:textStyle="bold"            app:layout_constraintBottom_toBottomOf="parent"            app:layout_constraintStart_toStartOf="parent"            app:layout_constraintTop_toBottomOf="@+id/textView2" />          <TextView            android:id="@+id/age"            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_marginStart="16dp"            android:layout_marginTop="16dp"            android:layout_marginEnd="16dp"            android:layout_marginBottom="16dp"            android:text="TextView"            app:layout_constraintBottom_toBottomOf="parent"            app:layout_constraintEnd_toEndOf="parent"            app:layout_constraintStart_toEndOf="@+id/textView3"            app:layout_constraintTop_toBottomOf="@+id/lastname" />      </androidx.constraintlayout.widget.ConstraintLayout></androidx.cardview.widget.CardView>
Step 4: After this, We have to create a java file to fetch and store data of a particular person from the database and give it to Recycler View one by one. Create person.java in the same folder in which MainActivity.java file is present. Paste the following code in the file.JavaJava// Your package name can be different depending// on your project namepackage com.example.recyclerview;  public class person {    // Variable to store data corresponding    // to firstname keyword in database    private String firstname;        // Variable to store data corresponding    // to lastname keyword in database    private String lastname;        // Variable to store data corresponding    // to age keyword in database    private String age;      // Mandatory empty constructor    // for use of FirebaseUI    public person() {}      // Getter and setter method    public String getFirstname()     {       return firstname;    }    public void setFirstname(String firstname)    {        this.firstname = firstname;    }    public String getLastname()     {       return lastname;    }    public void setLastname(String lastname)    {        this.lastname = lastname;    }    public String getAge()     {       return age;     }    public void setAge(String age)     {       this.age = age;    }}
Java
// Your package name can be different depending// on your project namepackage com.example.recyclerview;  public class person {    // Variable to store data corresponding    // to firstname keyword in database    private String firstname;        // Variable to store data corresponding    // to lastname keyword in database    private String lastname;        // Variable to store data corresponding    // to age keyword in database    private String age;      // Mandatory empty constructor    // for use of FirebaseUI    public person() {}      // Getter and setter method    public String getFirstname()     {       return firstname;    }    public void setFirstname(String firstname)    {        this.firstname = firstname;    }    public String getLastname()     {       return lastname;    }    public void setLastname(String lastname)    {        this.lastname = lastname;    }    public String getAge()     {       return age;     }    public void setAge(String age)     {       this.age = age;    }}
Step 5: In order to show the data from person.java in person.xml, we have to create an Adapter class. Create another java file named personAdapter.java in the same folder as MainActivity.java and paste the following code.JavaJavapackage com.example.recyclerview;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import androidx.annotation.NonNull;import androidx.recyclerview.widget.RecyclerView;import com.firebase.ui.database.FirebaseRecyclerAdapter;import com.firebase.ui.database.FirebaseRecyclerOptions;  // FirebaseRecyclerAdapter is a class provided by// FirebaseUI. it provides functions to bind, adapt and show// database contents in a Recycler Viewpublic class personAdapter extends FirebaseRecyclerAdapter<    person, personAdapter.personsViewholder> {      public personAdapter(        @NonNull FirebaseRecyclerOptions<person> options)    {        super(options);    }      // Function to bind the view in Card view(here    // "person.xml") iwth data in    // model class(here "person.class")    @Override    protected void    onBindViewHolder(@NonNull personsViewholder holder,                     int position, @NonNull person model)    {          // Add firstname from model class (here        // "person.class")to appropriate view in Card        // view (here "person.xml")        holder.firstname.setText(model.getFirstname());          // Add lastname from model class (here        // "person.class")to appropriate view in Card        // view (here "person.xml")        holder.lastname.setText(model.getLastname());          // Add age from model class (here        // "person.class")to appropriate view in Card        // view (here "person.xml")        holder.age.setText(model.getAge());    }      // Function to tell the class about the Card view (here    // "person.xml")in    // which the data will be shown    @NonNull    @Override    public personsViewholder    onCreateViewHolder(@NonNull ViewGroup parent,                       int viewType)    {        View view            = LayoutInflater.from(parent.getContext())                  .inflate(R.layout.person, parent, false);        return new personAdapter.personsViewholder(view);    }      // Sub Class to create references of the views in Crad    // view (here "person.xml")    class personsViewholder        extends RecyclerView.ViewHolder {        TextView firstname, lastname, age;        public personsViewholder(@NonNull View itemView)        {            super(itemView);              firstname                = itemView.findViewById(R.id.firstname);            lastname = itemView.findViewById(R.id.lastname);            age = itemView.findViewById(R.id.age);        }    }}
Java
package com.example.recyclerview;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import androidx.annotation.NonNull;import androidx.recyclerview.widget.RecyclerView;import com.firebase.ui.database.FirebaseRecyclerAdapter;import com.firebase.ui.database.FirebaseRecyclerOptions;  // FirebaseRecyclerAdapter is a class provided by// FirebaseUI. it provides functions to bind, adapt and show// database contents in a Recycler Viewpublic class personAdapter extends FirebaseRecyclerAdapter<    person, personAdapter.personsViewholder> {      public personAdapter(        @NonNull FirebaseRecyclerOptions<person> options)    {        super(options);    }      // Function to bind the view in Card view(here    // "person.xml") iwth data in    // model class(here "person.class")    @Override    protected void    onBindViewHolder(@NonNull personsViewholder holder,                     int position, @NonNull person model)    {          // Add firstname from model class (here        // "person.class")to appropriate view in Card        // view (here "person.xml")        holder.firstname.setText(model.getFirstname());          // Add lastname from model class (here        // "person.class")to appropriate view in Card        // view (here "person.xml")        holder.lastname.setText(model.getLastname());          // Add age from model class (here        // "person.class")to appropriate view in Card        // view (here "person.xml")        holder.age.setText(model.getAge());    }      // Function to tell the class about the Card view (here    // "person.xml")in    // which the data will be shown    @NonNull    @Override    public personsViewholder    onCreateViewHolder(@NonNull ViewGroup parent,                       int viewType)    {        View view            = LayoutInflater.from(parent.getContext())                  .inflate(R.layout.person, parent, false);        return new personAdapter.personsViewholder(view);    }      // Sub Class to create references of the views in Crad    // view (here "person.xml")    class personsViewholder        extends RecyclerView.ViewHolder {        TextView firstname, lastname, age;        public personsViewholder(@NonNull View itemView)        {            super(itemView);              firstname                = itemView.findViewById(R.id.firstname);            lastname = itemView.findViewById(R.id.lastname);            age = itemView.findViewById(R.id.age);        }    }}
Step 6: Then we have called the database and ask for data from it. This will be done in MainActivity.java itself.JavaJavapackage com.example.recyclerview;import androidx.appcompat.app.AppCompatActivity;import androidx.recyclerview.widget.LinearLayoutManager;import androidx.recyclerview.widget.RecyclerView;import android.os.Bundle;import com.firebase.ui.database.FirebaseRecyclerOptions;import com.google.firebase.database.DatabaseReference;import com.google.firebase.database.FirebaseDatabase;import com.google.firebase.database.Query;  public class MainActivity extends AppCompatActivity {      private RecyclerView recyclerView;    personAdapter        adapter; // Create Object of the Adapter class    DatabaseReference mbase; // Create object of the                             // Firebase Realtime Database      @Override    protected void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);          // Create a instance of the database and get        // its reference        mbase            = FirebaseDatabase.getInstance().getReference();          recyclerView = findViewById(R.id.recycler1);          // To display the Recycler view linearly        recyclerView.setLayoutManager(            new LinearLayoutManager(this));          // It is a class provide by the FirebaseUI to make a        // query in the database to fetch appropriate data        FirebaseRecyclerOptions<person> options            = new FirebaseRecyclerOptions.Builder<person>()                  .setQuery(mbase, person.class)                  .build();        // Connecting object of required Adapter class to        // the Adapter class itself        adapter = new personAdapter(options);        // Connecting Adapter class with the Recycler view*/        recyclerView.setAdapter(adapter);    }      // Function to tell the app to start getting    // data from database on starting of the activity    @Override protected void onStart()    {        super.onStart();        adapter.startListening();    }      // Function to tell the app to stop getting    // data from database on stopping of the activity    @Override protected void onStop()    {        super.onStop();        adapter.stopListening();    }}
Java
package com.example.recyclerview;import androidx.appcompat.app.AppCompatActivity;import androidx.recyclerview.widget.LinearLayoutManager;import androidx.recyclerview.widget.RecyclerView;import android.os.Bundle;import com.firebase.ui.database.FirebaseRecyclerOptions;import com.google.firebase.database.DatabaseReference;import com.google.firebase.database.FirebaseDatabase;import com.google.firebase.database.Query;  public class MainActivity extends AppCompatActivity {      private RecyclerView recyclerView;    personAdapter        adapter; // Create Object of the Adapter class    DatabaseReference mbase; // Create object of the                             // Firebase Realtime Database      @Override    protected void onCreate(Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);          // Create a instance of the database and get        // its reference        mbase            = FirebaseDatabase.getInstance().getReference();          recyclerView = findViewById(R.id.recycler1);          // To display the Recycler view linearly        recyclerView.setLayoutManager(            new LinearLayoutManager(this));          // It is a class provide by the FirebaseUI to make a        // query in the database to fetch appropriate data        FirebaseRecyclerOptions<person> options            = new FirebaseRecyclerOptions.Builder<person>()                  .setQuery(mbase, person.class)                  .build();        // Connecting object of required Adapter class to        // the Adapter class itself        adapter = new personAdapter(options);        // Connecting Adapter class with the Recycler view*/        recyclerView.setAdapter(adapter);    }      // Function to tell the app to start getting    // data from database on starting of the activity    @Override protected void onStart()    {        super.onStart();        adapter.startListening();    }      // Function to tell the app to stop getting    // data from database on stopping of the activity    @Override protected void onStop()    {        super.onStop();        adapter.stopListening();    }}
Step 7: Before running the project In AndroidManifest.xml, one needs to include below permission, in order to access the internet:“uses-permission android:name=”android.permission.INTERNET”
“uses-permission android:name=”android.permission.INTERNET”
Output:
varshagumber28
android
Java
Java
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.