En este artículo, vamos a cargar todas las imágenes del almacenamiento de Firebase y mostrarlas en RecyclerView . Normalmente mostramos una imagen después de agregar un enlace a la base de datos en tiempo real. Digamos que queremos mostrar todas las imágenes cargadas como vemos en la galería. Solo estaremos viendo todas las imágenes. Entonces, aquí mostraremos las imágenes cargadas en el almacenamiento de Firebase en una carpeta en particular. Pero aquí mostraremos la imagen después de agregar todas las URL de imágenes en Arraylist .
Implementación paso a paso
Paso 1: Crear un nuevo Proyecto
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.
Paso 2: agregue esto en el archivo AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>
Agregue esto en el archivo build.gradle
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'
Paso 3: trabajar con el archivo item.xml
Vaya a app > res > layout > New > Layout Resource File y nombre el archivo como item . Vaya al archivo item.xml y consulte el siguiente código. A continuación se muestra el código para el archivo item.xml .
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" 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>
Paso 4: trabajar con el archivo ImageAdapter.java
Cree una nueva clase Java en Android Studio y nombre la clase como ImageAdapter. Vaya al archivo ImageAdapter.java y consulte el siguiente código. A continuación se muestra el código del archivo ImageAdapter.java .
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);
}
}
}
Paso 5: trabajar con el archivo activity_showallimages.xml
Puede trabajar con MainActivity o puede crear otra nueva actividad vacía en Android Studio . Vaya al archivo activity_showallimages.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_showallimages.xml
XML
<?xml version="1.0" encoding="utf-8"?> <FrameLayout 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=".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>
Paso 6: trabajar con el archivo ShowAllImagesFromStorage.java
Vaya al archivo ShowAllImagesFromStorage.java y consulte el siguiente código. A continuación se muestra el código del archivo ShowAllImagesFromStorage.java . Cargando los artículos en 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);
}
});
}
}
});
A continuación se muestra el código completo del archivo ShowAllImagesFromStorage.java .
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);
}
});
}
}
});
}
}
Producción:
Archivos cargados en Firebase Storage:
