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 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:
