Open In App

How to View All the Uploaded Images in Firebase Storage?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to Load all the images from the Firebase Storage and showing them in the RecyclerView. Normally we show an image after adding a link to the real-time database. Let’s say we want to show all the images uploaded as we see in the gallery. We will be just viewing all the images. So here we will be showing images uploaded in firebase storage in a particular folder. But here we will show the image after adding all the image URLs in Arraylist.

Step by Step Implementation

Step 1: Create a new Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.  

Step 2: Add this into the AndroidManifest.xml file

<uses-permission android:name="android.permission.INTERNET"/>

Add this into the build.gradle file

implementation 'com.google.firebase:firebase-storage:19.1.1'
implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

Step 3: Working with the item.xml file

Go to the app > res > layout > New > Layout Resource File and name the file as item. Go to the item.xml file and refer to the following code. Below is the code for the item.xml file.

XML




<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:layout_marginTop="5dp"
    app:cardCornerRadius="8dp">
   
<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/item"
    android:scaleType="centerCrop"/>
   
</androidx.cardview.widget.CardView>


Step 4: Working with the ImageAdapter.java file

Create a new java class in android studio and name the class as ImageAdapter. Go to the ImageAdapter.java file and refer to the following code. Below is the code for the ImageAdapter.java file. 

Java




import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
 
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
 
import com.anni.uploaddataexcelsheet.R;
import com.bumptech.glide.Glide;
 
import java.util.ArrayList;
 
public class ImageAdapter extends RecyclerView.Adapter<ImageAdapter.ViewHolder> {
 
    private ArrayList<String> imageList;
 
    public ImageAdapter(ArrayList<String> imageList, Context context) {
        this.imageList = imageList;
        this.context = context;
    }
 
    private Context context;
    @NonNull
    @Override
    public ImageAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item,parent,false);
        return new ViewHolder(view);
    }
 
    @Override
    public void onBindViewHolder(@NonNull ImageAdapter.ViewHolder holder, int position) {
      // loading the images from the position 
      Glide.with(holder.itemView.getContext()).load(imageList.get(position)).into(holder.imageView);
    }
 
    @Override
    public int getItemCount() {
        return imageList.size();
    }
 
    public class ViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            imageView=itemView.findViewById(R.id.item);
        }
    }
}


Step 5: Working with the activity_showallimages.xml file

You can work with the MainActivity or can create another new empty activity in android studio. Go to the activity_showallimages.xml file and refer to the following code. Below is the code for the activity_showallimages.xml file 

XML




<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ShowAllImagesFromStorage">
   
<androidx.recyclerview.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/recyclerview"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
    tools:listitem="@layout/item"/>
   
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/progress"
        android:layout_gravity="center"
        android:indeterminate="true"/>
   
</FrameLayout>


Step 6: Working with the ShowAllImagesFromStorage.java file

Go to the ShowAllImagesFromStorage.java file and refer to the following code. Below is the code for the ShowAllImagesFromStorage.java file. Loading the items in the Firebase Storage.

listRef.listAll().addOnSuccessListener(new OnSuccessListener<ListResult>() {
            @Override
            public void onSuccess(ListResult listResult) {
                for(StorageReference file:listResult.getItems()){
                    file.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                        @Override
                        public void onSuccess(Uri uri) {
                            // adding the url in the arraylist
                            imagelist.add(uri.toString());
                            Log.e("Itemvalue",uri.toString());
                        }
                    }).addOnSuccessListener(new OnSuccessListener<Uri>() {
                        @Override
                        public void onSuccess(Uri uri) {
                            recyclerView.setAdapter(adapter);
                            progressBar.setVisibility(View.GONE);
                        }
                    });
                }
            }
        });

Below is the complete code for the ShowAllImagesFromStorage.java file.

Java




import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
 
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ProgressBar;
 
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.storage.FileDownloadTask;
import com.google.firebase.storage.FirebaseStorage;
import com.google.firebase.storage.ListResult;
import com.google.firebase.storage.StorageReference;
 
import java.util.ArrayList;
 
public class ShowAllImagesFromStorage extends AppCompatActivity {
    ArrayList<String> imagelist;
    RecyclerView recyclerView;
    StorageReference root;
    ProgressBar progressBar;
    ImageAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_show_all_images_from_storage);
        imagelist=new ArrayList<>();
        recyclerView=findViewById(R.id.recyclerview);
        adapter=new ImageAdapter(imagelist,this);
        recyclerView.setLayoutManager(new LinearLayoutManager(null));
        progressBar=findViewById(R.id.progress);
        progressBar.setVisibility(View.VISIBLE);
        StorageReference listRef = FirebaseStorage.getInstance().getReference().child("images");
        listRef.listAll().addOnSuccessListener(new OnSuccessListener<ListResult>() {
            @Override
            public void onSuccess(ListResult listResult) {
                for(StorageReference file:listResult.getItems()){
                    file.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                        @Override
                        public void onSuccess(Uri uri) {
                            imagelist.add(uri.toString());
                            Log.e("Itemvalue",uri.toString());
                        }
                    }).addOnSuccessListener(new OnSuccessListener<Uri>() {
                        @Override
                        public void onSuccess(Uri uri) {
                            recyclerView.setAdapter(adapter);
                            progressBar.setVisibility(View.GONE);
                        }
                    });
                }
            }
        });
    }
}


Output:

Uploaded Files in Firebase Storage:



Last Updated : 23 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads