How to retrieve data from Firebase Realtime Database into Recycler View in Android
Hello Guys, We are back with a new topic. Today, we will discuss how to retrieve data from Firebase Realtime Database into Recycler View in Android.

Firebase:
Firebase is a backend service that is ready to use immediately developed by Google to Develop High-Quality Apps. Including Machine Learning there are many features like real-time Database, Cloud messaging, Hosting, Storage, Analytics, Stream View, Testing your releases, Remote-Config, In-app Messaging in Firebase.
Our Topic – Realtime Database
Realtime Database is used to store and retrieve data in real-time to all the users. Today, we will retrieve data from Realtime Database and display it in a Recycler View in Android Studio. For this topic, I’m going to use sample json data that consists of an image Url and image name. In this Implementation, we use Glide Library to display the Images from the URL in our App.
Now Let’s got Implementation Part. First we have to create a Project in Forebase. To Create Projects Follow the below steps:
- Go to Firbase Console https://console.firebase.google.com/u/0/
- Now Click Add Project and Create a New Project with a Name.

- Go to Projects Setting and Click on Add App.
- On the Next Screen, You are asked to Register your App.
- Add your Package name there and click on Register App.

- Now download google-services.json and add it in Android Studio Project in app folder.
- Now add Required Dependencies in build.gradle files

add these dependencies in app-level build.gradle file
dependencies{ //Firebase implementation platform('com.google.firebase:firebase-bom:28.0.1') implementation 'com.google.firebase:firebase-analytics' implementation 'com.google.firebase:firebase-database' } apply plugin: 'com.google.gms.google-services'
Now add this in Project level build.gradle file
//project-level build.gradle classpath 'com.google.gms:google-services:4.3.8'
I have Created a sample data Firebase Realtime database under Images node with ten items in the json.

Now Let’s go to activity_main.xml file and design our Recyclerview
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 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/recycler_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:nestedScrollingEnabled="false" android:elevation="10dp" tools:targetApi="lollipop"/> <com.google.android.material.progressindicator.CircularProgressIndicator android:id="@+id/progress_circular" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:indeterminate="true"/> </RelativeLayout>
Now We have to Create Image item to display image.
item_image.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:id="@+id/card_view_top" android:layout_width="match_parent" android:layout_height="280dp" android:foreground="?android:attr/selectableItemBackground" app:cardCornerRadius="5dp" app:cardElevation="3dp" app:cardUseCompatPadding="true"> <RelativeLayout android:id="@+id/lyt_container" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/post_img" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/light_gray" android:contentDescription="@string/app_name" android:scaleType="centerCrop" /> <RelativeLayout android:id="@+id/lyt_secondary" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@drawable/rectangle_transparent" android:padding="8dp"> <TextView android:id="@+id/title_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginStart="8dp" android:maxLines="1" android:textColor="@color/white" android:textSize="14sp" tools:text="This" android:layout_marginLeft="8dp" /> </RelativeLayout> </RelativeLayout> </androidx.cardview.widget.CardView>
I have created a model class to fetch and store the data from firebase. Create an Imagemodel.java file and paste the below code.
package com.example.firebasedatabse; public class Imagemodel { public String imageUrl; public String imagename; public Imagemodel(){ } public Imagemodel(String imageUrl,String imagename){ this.imageUrl = imageUrl; this.imagename = imagename; } public String getImageUrl() { return imageUrl; } public void setImageUrl(String imageUrl) { this.imageUrl = imageUrl; } public String getImagename() { return imagename; } public void setImagename(String imagename) { this.imagename = imagename; } }
I have Created an Adapter Class to handle the fetched data. Create an ImageAdapter.java file and paste the below code inside it.
ImageAdapter.java
package com.example.firebasedatabse; import android.app.Activity; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.TextView; import androidx.annotation.NonNull; import androidx.cardview.widget.CardView; import androidx.recyclerview.widget.RecyclerView; import com.bumptech.glide.Glide; import java.util.ArrayList; public class ImageAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> { private Context mContext; private Activity mActivity; private ArrayList<Imagemodel> mContentList; public ImageAdapter(Context mContext, Activity mActivity, ArrayList<Imagemodel> mContentList) { this.mContext = mContext; this.mActivity = mActivity; this.mContentList = mContentList; } @NonNull @Override public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_image, parent, false); return new ViewHolder(view, viewType); } public static class ViewHolder extends RecyclerView.ViewHolder { private CardView cardView; private ImageView imgPost; private TextView tvTitle; public ViewHolder(View itemView, int viewType) { super(itemView); // Find all views ids cardView = (CardView) itemView.findViewById(R.id.card_view_top); imgPost = (ImageView) itemView.findViewById(R.id.post_img); tvTitle = (TextView) itemView.findViewById(R.id.title_text); } } @Override public void onBindViewHolder(@NonNull RecyclerView.ViewHolder mainHolder, int position) { ViewHolder holder = (ViewHolder) mainHolder; final Imagemodel model = mContentList.get(position); // setting data over views String imgUrl = model.getImageUrl(); if (imgUrl != null && !imgUrl.isEmpty()) { Glide.with(mContext) .load(imgUrl) .into(holder.imgPost); } holder.tvTitle.setText(model.getImagename()); } @Override public int getItemCount() { return mContentList.size(); } }
Now Pastethe below Code in MainActivity.java. This Code retreives data from direbase and display it in Recyclerview.
MainActivity.java
package com.example.firebasedatabse; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.View; import android.widget.Toast; import androidx.annotation.NonNull; import androidx.appcompat.app.AppCompatActivity; import androidx.recyclerview.widget.GridLayoutManager; import androidx.recyclerview.widget.RecyclerView; import com.google.android.material.progressindicator.CircularProgressIndicator; import com.google.firebase.FirebaseApp; import com.google.firebase.database.DataSnapshot; import com.google.firebase.database.DatabaseError; import com.google.firebase.database.DatabaseReference; import com.google.firebase.database.FirebaseDatabase; import com.google.firebase.database.ValueEventListener; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private static final String TAG = "MainActivity"; CircularProgressIndicator progress_circular; RecyclerView recyclerView; DatabaseReference databaseReference; private Context mContext; private Activity mActivity; private ArrayList<Imagemodel> imagesList; private ImageAdapter imageAdapter = null; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mActivity = MainActivity.this; mContext = getApplicationContext(); FirebaseApp.initializeApp(this); recyclerView = findViewById(R.id.recycler_view); progress_circular = findViewById(R.id.progress_circular); recyclerView.setHasFixedSize(true); recyclerView.setLayoutManager(new GridLayoutManager(mActivity, 2, GridLayoutManager.VERTICAL, false)); recyclerView.setNestedScrollingEnabled(false); imagesList = new ArrayList<>(); databaseReference = FirebaseDatabase.getInstance().getReference().child("Images"); databaseReference.addValueEventListener(new ValueEventListener() { @Override public void onDataChange(@NonNull DataSnapshot snapshot) { imagesList.clear(); for (DataSnapshot dataSnapshot : snapshot.getChildren()){ Imagemodel imagemodel = dataSnapshot.getValue(Imagemodel.class); imagesList.add(imagemodel); } imageAdapter = new ImageAdapter(mContext,mActivity, (ArrayList<Imagemodel>) imagesList); recyclerView.setAdapter(imageAdapter); imageAdapter.notifyDataSetChanged(); progress_circular.setVisibility(View.GONE); } @Override public void onCancelled(@NonNull DatabaseError error) { Toast.makeText(MainActivity.this,"Error:" + error.getMessage(),Toast.LENGTH_SHORT).show(); } }); } }
Finally, We have Finished. Now Using the above code you can retrieve data from firebase and display it in recycler view.
If you have any issues you can contact me using the Contact form or Comment on your Issue. I’ll try to solve it. Thank you. Stay Home Stay Safe.
Check Our Other Android Tutorials here
Happy Coding 🙂