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

ListView es uno de los componentes de interfaz de usuario más utilizados en Android que puede encontrar en varias aplicaciones. Así que hemos visto listview en muchas aplicaciones diferentes. En el artículo anterior, hemos visto implementar ListView en Android utilizando Firebase Realtime Database . Ahora, en este artículo, veremos la implementación de ListView usando Firebase Firestore en Android. Ahora, avancemos hacia la implementación de este proyecto. 

¿Qué vamos a construir en este proyecto? 

Construiremos una aplicación ListView simple en la que mostraremos una lista de cursos junto con imágenes en nuestro ListView. Obtendremos todos los datos dentro de nuestro ListView de Firebase Firestore.

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"?>
<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">
  
    <ListView
        android:id="@+id/idLVCourses"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  
</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 ListView

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 image_lv_item

<?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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    android:padding="2dp"
    app:cardElevation="3dp">
  
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
  
        <!--Image view for displaying our image-->
        <ImageView
            android:id="@+id/idIVimage"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="8dp"
            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_marginStart="10dp"
            android:layout_marginTop="40dp"
            android:layout_toEndOf="@id/idIVimage"
            android:padding="3dp"
            android:text="Category Text"
            android:textAlignment="center"
            android:textColor="@color/black" />
  
    </RelativeLayout>
  
</androidx.cardview.widget.CardView>

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

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 CoursesLVAdapter el

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 CoursesLVAdapter extends ArrayAdapter<DataModal> {
  
    // constructor for our list view adapter.
    public CoursesLVAdapter(@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_lv_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

Actividad principal.java Actividad principal.java

import android.os.Bundle;
import android.widget.ListView;
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 list view, 
    // arraylist and firebase Firestore.
    ListView coursesLV;
    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
        coursesLV = findViewById(R.id.idLVCourses);
        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.
        loadDatainListview();
    }
  
    private void loadDatainListview() {
        // 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.
                            CoursesLVAdapter adapter = new CoursesLVAdapter(MainActivity.this, dataModalArrayList);
                              
                            // after passing this array list to our adapter 
                            // class we are setting our adapter to our list view.
                            coursesLV.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 .

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: