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

GridView es también uno de los componentes de interfaz de usuario más utilizados que se utiliza para mostrar elementos en formato de cuadrícula dentro de nuestra aplicación. Al utilizar este tipo de vista, podemos mostrar los elementos en formato de cuadrícula. Hemos visto este tipo de GridView en la mayoría de las aplicaciones. También hemos visto la implementación de GridView en nuestra aplicación. En este artículo, veremos la implementación de GridView usando Firebase Firestore en Android. 

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

Construiremos una aplicación simple en la que mostraremos los datos en formato de cuadrícula y cargaremos estos datos desde Firebase Firestore dentro de nuestro GridView. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el  lenguaje Java  . 

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. Para agregar estos permisos, vaya a la aplicación > AndroidManifest.xml y, dentro de ese archivo, agregue los siguientes permisos.  

<!--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"?>
<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"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <!--Grid View for displaying our data from Firebase-->
    <GridView
        android:id="@+id/idGVCourses"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:numColumns="2" />
  
</RelativeLayout>

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: cree un archivo de diseño para nuestro elemento de GridView

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_gv_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="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="4dp">
  
    <!--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/black" />
  
</LinearLayout>

Paso 7: ahora cree una clase de adaptador para nuestro GridView

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 CoursesGVAdapter y agréguele el siguiente código. 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.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
  
import com.squareup.picasso.Picasso;
  
import java.util.ArrayList;
  
public class CoursesGVAdapter extends ArrayAdapter<DataModal> {
  
    // constructor for our list view adapter.
    public CoursesGVAdapter(@NonNull Context context, ArrayList<DataModal> dataModalArrayList) {
        super(context, 0, dataModalArrayList);
    }
  
    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
  
        // below line is use to inflate the 
        // layout for our item of list view.
        View listitemView = convertView;
        if (listitemView == null) {
            listitemView = LayoutInflater.from(getContext()).inflate(R.layout.image_gv_item, parent, false);
        }
          
        // after inflating an item of listview item
        // we are getting data from array list inside 
        // our modal class.
        DataModal dataModal = getItem(position);
          
        // initializing our UI components of list view item.
        TextView nameTV = listitemView.findViewById(R.id.idTVtext);
        ImageView courseIV = listitemView.findViewById(R.id.idIVimage);
          
        // after initializing our items we are
        // setting data to our view.
        // below line is use to set data to our text view.
        nameTV.setText(dataModal.getName());
          
        // in below line we are using Picasso to load image
        // from URL in our Image VIew.
        Picasso.get().load(dataModal.getImgUrl()).into(courseIV);
  
        // below line is use to add item 
        // click listener for our item of list view.
        listitemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on the item click on our list view.
                // we are displaying a toast message.
                Toast.makeText(getContext(), "Item clicked is : " + dataModal.getName(), Toast.LENGTH_SHORT).show();
            }
        });
        return listitemView;
    }
}

Paso 8: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.widget.GridView;
import android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
  
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 {
  
    // creating a variable for our 
    // grid view, arraylist and 
    // firebase Firestore.
    GridView coursesGV;
    ArrayList<DataModal> dataModalArrayList;
    FirebaseFirestore db;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // below line is use to initialize our variables.
        coursesGV = findViewById(R.id.idGVCourses);
        dataModalArrayList = new ArrayList<>();
  
        // initializing our variable for firebase
        // firestore and getting its instance.
        db = FirebaseFirestore.getInstance();
         
        // here we are calling a method 
        // to load data in our list view.
        loadDatainGridView();
    }
  
    private void loadDatainGridView() {
        // below line is use to get data from Firebase
        // firestore using collection in android.
        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);
                                  
                                // after getting data from Firebase 
                                // we are storing that data in our array list
                                dataModalArrayList.add(dataModal);
                            }
                            // after that we are passing our array list to our adapter class.
                            CoursesGVAdapter adapter = new CoursesGVAdapter(MainActivity.this, dataModalArrayList);
                             
                            // after passing this array list 
                            // to our adapter class we are setting 
                            // our adapter to our list view.
                            coursesGV.setAdapter(adapter);
                        } 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) {
                // we are displaying a toast message 
                // when we get any error from Firebase.
                Toast.makeText(MainActivity.this, "Fail to load data..", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Después de agregar el código anterior, agregue los datos a Firebase Firestore en Android.  

Paso 9: agregar los datos a Firebase Firestore en Android

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 . Se ha agregado  su primera imagen a los datos .

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: