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

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.

  1. How to create a Firebase project and add some data manually to show in the app.
  2. How to create an Android project and add Firebase and FirebaseUI support in it.
  3. How to add RecyclerView in the android app and display the data in Firebase Realtime Database.

How to create a Firebase project and add data manually to show in the app

  • Step 1: Create a Firebase Project
    1. Go to https://console.firebase.google.com/u/0/
    2. Log in to Firebase with your Google account if are not already logged in.
    3. Click on create the project.

    Create a Firebase Project

  • Step 2: Give a name to the project
    1. Write the name.
    2. Click on continue.

    Give a name to your project.

  • Step 3: Disable Google Analytics(There is no need to do this for this project)
    1. Click on the toggle button.
    2. Click Continue.

    Disable Google Analytics

           Firebase will create a project for you and open it for you.

  • Step 4: Create a Realtime Database:
    1. Go to Develop Option on Sidebar.
    2. Click on Database.
    3. Scroll down in a new screen and click on Create Database on Realtime Database.
    4. Select Start in Test mode (In order to get read and write access to the database).
    5. Click enable.

    Create a Realtime Database.Select Realtime DatabaseStart in Test mode

  • Step 5: Add data to the database using the ‘+’ symbol in the database in the same manner as given in the picture.

    Add sample data in database

    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.

How to create an android project and add Firebase and FirebaseUI support in it

  • 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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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'
       }

    chevron_right

    
    

How to add RecyclerView in the android app and display the data in Firebase Realtime Database

  • Step 1: Add the following dependencies to get the support of Cardview in the app.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    dependencies {
        // This dependency includes all material components of the android app.
        implementation 'com.google.android.material:material:1.1.0'
       }

    chevron_right

    
    

  • 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.

    XML

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout 
        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>

    chevron_right

    
    

  • 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.

    XML

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.cardview.widget.CardView 
        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>

    chevron_right

    
    

  • 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.

    Java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    // Your package name can be different depending
    // on your project name
    package 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;
        }
    }

    chevron_right

    
    

  • 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.

    Java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 View
    public 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);
            }
        }
    }

    chevron_right

    
    

  • Step 6: Then we have called the database and ask for data from it. This will be done in MainActivity.java itself.

    Java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 stoping of the activity
        @Override protected void onStop()
        {
            super.onStop();
            adapter.stopListening();
        }
    }

    chevron_right

    
    

  • 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”

Output:


Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.