¿Cómo crear Dynamic Horizontal RecyclerView en Android usando Firebase Firestore?

HorizontalRecyclerView se ve en muchas aplicaciones. Generalmente se usa para mostrar las categorías en la mayoría de las aplicaciones y sitios web. Este tipo de RecyclerView se ve en muchas aplicaciones de comercio electrónico para indicar categorías en la aplicación. Y este RecyclerView también es dinámico para que el administrador pueda agregar o eliminar cualquier elemento de ese RecyclerView en cualquier momento. Entonces, en este artículo, veremos cómo crear una Vista de reciclador horizontal dinámica en Android usando Firebase . Usaremos Firebase Firestore para mostrar los elementos de RecyclerView. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que mostraremos un RecyclerView horizontal en el que mostraremos diferentes tecnologías utilizadas en informática. Así que representaremos esta asombrosa tecnología informática en nuestro Horizontal RecyclerView.

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: conecta tu aplicación a Firebase 

Después de crear un nuevo proyecto, vaya a la opción Herramientas en la barra superior. Dentro de eso, haga clic en Firebase. Después de hacer clic en Firebase, puede ver la columna de la derecha que se menciona a continuación en la captura de pantalla.

Dentro de esa columna, navegue hasta Firebase Cloud Firestore. Haga clic en esa opción y verá dos opciones en Conectar la aplicación a Firebase y Agregar Cloud Firestore a su aplicación. Haga clic en la opción Conectar ahora y su aplicación se conectará a Firebase. Después de eso, haga clic en la segunda opción y ahora su aplicación está conectada a Firebase. Después de conectar su aplicación a Firebase, verá la siguiente pantalla.  

Después de eso, verifique que la dependencia de la base de datos Firebase Firestore se haya agregado a nuestro archivo Gradle. Navegue a la aplicación > Gradle Scripts dentro de ese archivo para verificar si la dependencia a continuación se agrega o no. Si la dependencia a continuación no está presente en su archivo build.gradle. Agregue la siguiente dependencia en la sección de dependencias.

implementación ‘com.google.firebase:firebase-firestore:22.0.1’

Después de agregar esta dependencia, sincronice su proyecto y ahora estamos listos para crear nuestra aplicación. Si desea obtener más información sobre cómo conectar su aplicación a Firebase. Consulte este artículo para obtener detalles sobre cómo agregar Firebase a la aplicación de Android .  

Paso 3: Trabajar con el archivo AndroidManifest.xml

Para agregar datos a Firebase, deberíamos otorgar permisos para acceder a Internet. aplicación > AndroidManifest.xml

<!--Permissions for internet-->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Paso 4: trabajar con el archivo activity_main.xml

Vaya al archivo activity_main.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:text="Dynamic Horizontal Recycler View"
        android:textAlignment="center"
        android:textColor="@color/purple_500"
        android:textSize="15sp" />
  
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVItems"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:background="@color/purple_500" />
      
</LinearLayout>

Paso 5: ahora crearemos una nueva clase de Java para almacenar nuestros datos  

Para leer datos de la base de datos Firebase Firestore, debemos crear una clase de objeto y leeremos los datos dentro de esta clase. Para crear una clase de objeto, vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él y haga clic en Nuevo > Clase Java > Asigne un nombre a su clase . Aquí le hemos dado el nombre como DataModal y le agregamos el siguiente código.  

public class DataModal {
  
    // variables for storing our image and name.
    private String name;
    private String imgUrl;
  
    public DataModal() {
        // empty constructor required for firebase.
    }
  
    // constructor for our object class.
    public DataModal(String name, String imgUrl) {
        this.name = name;
        this.imgUrl = imgUrl;
    }
  
    // getter and setter methods
    public String getName() {
        return name;
    }
  
    public void setName(String name) {
        this.name = name;
    }
  
    public String getImgUrl() {
        return imgUrl;
    }
  
    public void setImgUrl(String imgUrl) {
        this.imgUrl = imgUrl;
    }
}

Paso 6: ahora crearemos un archivo de diseño para nuestro elemento de RecyclerView 

Navegue a la aplicación> res> diseño> Haga clic con el botón derecho en él y haga clic en Nuevo> Archivo de recursos de diseño y asigne un nombre a ese archivo. Después de crear ese archivo, agregue el siguiente código. Aquí le hemos dado el nombre como image_rv_item y le hemos agregado el siguiente código.  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">
  
    <!--Image view for displaying our image-->
    <ImageView
        android:id="@+id/idIVimage"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="4dp"
        android:background="@color/white"
        android:backgroundTint="@color/white"
        android:padding="3dp" />
  
    <!--Text view for displaying our text -->
    <TextView
        android:id="@+id/idTVtext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:padding="3dp"
        android:text="Category Text"
        android:textAlignment="center"
        android:textColor="@color/white" />
  
</LinearLayout>

Paso 7: ahora avanzaremos hacia la creación de una clase de adaptador

Para crear una nueva clase de Adaptador, vaya a la aplicación > java > el nombre del paquete de su aplicación > Haga clic con el botón derecho en él y haga clic en Nuevo > Clase Java y nombre su clase Java como DataRVAdapter y agréguele el código a continuación. Se agregan comentarios dentro del código para comprender el código con más detalle.

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 android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
  
import com.squareup.picasso.Picasso;
  
import java.util.ArrayList;
  
public class DataRVAdapter extends RecyclerView.Adapter<DataRVAdapter.ViewHolder> {
    private ArrayList<DataModal> dataModalArrayList;
    private Context context;
  
    // constructor class for our Adapter
    public DataRVAdapter(ArrayList<DataModal> dataModalArrayList, Context context) {
        this.dataModalArrayList = dataModalArrayList;
        this.context = context;
    }
  
    @NonNull
    @Override
    public DataRVAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // passing our layout file for displaying our card item
        return new DataRVAdapter.ViewHolder(LayoutInflater.from(context).inflate(R.layout.image_rv_item, parent, false));
    }
  
    @Override
    public void onBindViewHolder(@NonNull DataRVAdapter.ViewHolder holder, int position) {
        // setting data to our views in Recycler view items.
        DataModal modal = dataModalArrayList.get(position);
        holder.courseNameTV.setText(modal.getName());
          
        // we are using Picasso to load images
        // from URL inside our image view.
        Picasso.get().load(modal.getImgUrl()).into(holder.courseIV);
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // setting on click listener
                // for our items of recycler items.
                Toast.makeText(context, "Clicked item is " + modal.getName(), Toast.LENGTH_SHORT).show();
            }
        });
    }
  
    @Override
    public int getItemCount() {
        // returning the size of array list.
        return dataModalArrayList.size();
    }
  
    public class ViewHolder extends RecyclerView.ViewHolder {
        // creating variables for our 
        // views of recycler items.
        private TextView courseNameTV;
        private ImageView courseIV;
  
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing the views of recycler views.
            courseNameTV = itemView.findViewById(R.id.idTVtext);
            courseIV = itemView.findViewById(R.id.idIVimage);
        }
    }
}

Paso 8: trabajar con el archivo MainActivity.java

Actividad principal.java Actividad principal.java

import android.os.Bundle;
import android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
  
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.QuerySnapshot;
  
import java.util.ArrayList;
import java.util.List;
  
public class MainActivity extends AppCompatActivity {
  
    private RecyclerView courseRV;
    private ArrayList<DataModal> dataModalArrayList;
    private DataRVAdapter dataRVAdapter;
    private FirebaseFirestore db;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // initializing our variables.
        courseRV = findViewById(R.id.idRVItems);
          
        // initializing our variable for firebase 
        // firestore and getting its instance.
        db = FirebaseFirestore.getInstance();
          
        // creating our new array list
        dataModalArrayList = new ArrayList<>();
        courseRV.setHasFixedSize(true);
          
        // adding horizontal layout manager for our recycler view.
        courseRV.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
          
        // adding our array list to our recycler view adapter class.
        dataRVAdapter = new DataRVAdapter(dataModalArrayList, this);
          
        // setting adapter to our recycler view.
        courseRV.setAdapter(dataRVAdapter);
  
        loadrecyclerViewData();
    }
  
    private void loadrecyclerViewData() {
  
        db.collection("Data").get()
                .addOnSuccessListener(new OnSuccessListener<QuerySnapshot>() {
                    @Override
                    public void onSuccess(QuerySnapshot queryDocumentSnapshots) {
                        // after getting the data we are calling on success method
                        // and inside this method we are checking if the received 
                        // query snapshot is empty or not.
                        if (!queryDocumentSnapshots.isEmpty()) {
                            // if the snapshot is not empty we are hiding our
                            // progress bar and adding our data in a list.
                            List<DocumentSnapshot> list = queryDocumentSnapshots.getDocuments();
                            for (DocumentSnapshot d : list) {
                                // after getting this list we are passing that 
                                // list to our object class.
                                DataModal dataModal = d.toObject(DataModal.class);
                                  
                                // and we will pass this object class
                                // inside our arraylist which we have
                                // created for recycler view.
                                dataModalArrayList.add(dataModal);
                            }
                            // after adding the data to recycler view.
                            // we are calling recycler view notifyDataSetChanged
                            // method to notify that data has been changed in recycler view.
                            dataRVAdapter.notifyDataSetChanged();
                        } else {
                            // if the snapshot is empty we are 
                            // displaying a toast message.
                            Toast.makeText(MainActivity.this, "No data found in Database", Toast.LENGTH_SHORT).show();
                        }
                    }
                }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                // if we do not get any data or any error we are displaying 
                // a toast message that we do not get any data
                Toast.makeText(MainActivity.this, "Fail to get the data.", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Paso 9: Ahora agregue los datos a su Firebase Console

Busque Firebase en su navegador y vaya a ese sitio web y verá la siguiente pantalla. 

Después de hacer clic en la opción Ir a la consola. Haga clic en su proyecto que se muestra a continuación.

Después de hacer clic en su proyecto, verá la siguiente pantalla. Después de hacer clic en este proyecto, verá la siguiente pantalla. 

Después de hacer clic en la opción Crear base de datos, verá la siguiente pantalla.  

Dentro de esta pantalla, tenemos que seleccionar la opción Iniciar en modo de prueba. Estamos usando el modo de prueba porque no estamos configurando la autenticación dentro de nuestra aplicación. Así que estamos seleccionando Iniciar en modo de prueba. Después de seleccionar el modo de prueba, haga clic en la opción Siguiente y verá la siguiente pantalla.  

Dentro de esta pantalla, solo tenemos que hacer clic en el botón Habilitar para habilitar nuestra base de datos Firebase Firestore. Después de completar este proceso, debemos agregar los datos dentro de nuestra Firebase Console. Para agregar datos a nuestra Firebase Console. 

Debe hacer clic en Iniciar opción de recopilación y dar el nombre de la recopilación como Datos . Después de crear una colección, debe hacer clic en la opción Autoid para crear el primer documento. Luego cree dos campos, uno para » nombre » y otro para » imgUrl » e ingrese los valores correspondientes para ellos. Tenga en cuenta que especifique el enlace URL de la imagen en el valor del archivo imgUrl. Y haga clic en el botón Guardar .

Del mismo modo, agregue más imágenes haciendo clic en el botón » Agregar documento «. 

Después de agregar estas imágenes, ejecute su aplicación y podrá ver el resultado en la pantalla a continuación. 

Producción: