¿Cómo leer datos de Firebase Firestore en Android?

En el artículo anterior, hemos visto sobre Cómo agregar datos a Firebase Firestore en Android . Esta es la continuación de esta serie. Ahora veremos Cómo leer estos datos agregados dentro de nuestro Firebase Firestore . Ahora avanzaremos hacia la implementación de esta lectura de datos en Android Firebase . 

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

Crearemos una nueva pantalla en la aplicación anterior y dentro de ella, mostraremos nuestros datos que agregamos dentro de nuestro Firebase Firestore en RecyclerView . Leeremos todos los datos de Firebase Firestore dentro de nuestra aplicación. 

Implementación paso a paso

Paso 1: trabajar con el archivo activity_main.xml

Vaya al archivo activity_main.xml y agregue un botón más para mostrar la lista de todos los cursos agregados. A continuación se muestra el fragmento de código y agregue el código por fin. 

<!--Button for showing the list of added courses-->
<Button
  android:id="@+id/idBtnViewCourses"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_margin="10dp"
  android:text="View Added Courses"
  android:textAllCaps="false" />

A continuación se muestra el código actualizado para el archivo activity_main.xml  después de agregar el fragmento de código anterior.

<?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">
  
    <!--Edittext for getting course Name-->
    <EditText
        android:id="@+id/idEdtCourseName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="10dp"
        android:hint="Course Name"
        android:importantForAutofill="no"
        android:inputType="text" />
  
    <!--Edittext for getting course Duration-->
    <EditText
        android:id="@+id/idEdtCourseDuration"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="10dp"
        android:hint="Course Duration in min"
        android:importantForAutofill="no"
        android:inputType="time" />
  
    <!--Edittext for getting course Description-->
    <EditText
        android:id="@+id/idEdtCourseDescription"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="10dp"
        android:hint="Course Description"
        android:importantForAutofill="no"
        android:inputType="text" />
  
    <!--Button for adding your course to Firebase-->
    <Button
        android:id="@+id/idBtnSubmitCourse"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Submit Course Details"
        android:textAllCaps="false" />
  
    <!--Button for showing the list of added courses-->
    <Button
        android:id="@+id/idBtnViewCourses"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="View Added Courses"
        android:textAllCaps="false" />
  
</LinearLayout>

Paso 2: ahora crearemos una nueva actividad para mostrar nuestros datos de Firebase Firestore en RecyclerView

Para crear una nueva actividad, tenemos que navegar a la aplicación > java > el nombre del paquete de su aplicación > hacer clic con el botón derecho en el nombre del paquete > Nuevo > Actividad vacía y nombrar su actividad como Detalles del curso y crear una nueva actividad. Asegúrese de seleccionar la actividad vacía. 

Paso 3: Ahora avanzaremos hacia la implementación de XML en nuestra actividad Detalles del curso

Vaya a la aplicación > res > diseño > activity_course_details.xml y agréguele el siguiente código. 

<?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"
    tools:context=".CourseDetails">
  
    <!--Recycler view for displaying
        our data from Firestore-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVCourses"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
  
    <!--Progress bar for showing loading screen-->
    <ProgressBar
        android:id="@+id/idProgressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
      
</RelativeLayout>

Paso 4: ahora crearemos un diseño de tarjeta para nuestro elemento de RecyclerView

Para crear un nuevo elemento para RecyclerView, vaya a la aplicación > res > diseño > haga clic con el botón derecho en diseño > Nuevo > archivo de recursos de diseño y nómbrelo como curso_elemento.xml y agréguele el código siguiente. 

<?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:id="@+id/idCVCOurseItem"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="6dp"
    app:cardElevation="4dp">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:orientation="vertical"
        android:padding="4dp">
  
        <!--Textview for displaying our Course Name-->
        <TextView
            android:id="@+id/idTVCourseName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:text="CourseName"
            android:textColor="@color/purple_500"
            android:textSize="18sp"
            android:textStyle="bold" />
          
        <!--Textview for displaying our Course Duration-->
        <TextView
            android:id="@+id/idTVCourseDuration"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:text="Duration"
            android:textColor="@color/black" />
          
        <!--Textview for displaying our Course Description-->
        <TextView
            android:id="@+id/idTVCourseDescription"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:text="Description"
            android:textColor="@color/black" />
          
    </LinearLayout>
  
</androidx.cardview.widget.CardView>

Paso 5: ahora crearemos nuestra clase de adaptador que manejará los datos de nuestros elementos RecyclerView

Para crear una clase de adaptador para nuestra vista de reciclador, 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 como CourseRVAdapter . Después de crear esta clase, agregue el siguiente código. Se agregan comentarios en el código para conocer con más detalle. 

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
  
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
  
import java.util.ArrayList;
  
public class CourseRVAdapter extends RecyclerView.Adapter<CourseRVAdapter.ViewHolder> {
    // creating variables for our ArrayList and context
    private ArrayList<Courses> coursesArrayList;
    private Context context;
  
    // creating constructor for our adapter class
    public CourseRVAdapter(ArrayList<Courses> coursesArrayList, Context context) {
        this.coursesArrayList = coursesArrayList;
        this.context = context;
    }
  
    @NonNull
    @Override
    public CourseRVAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // passing our layout file for displaying our card item
        return new ViewHolder(LayoutInflater.from(context).inflate(R.layout.course_item, parent, false));
    }
  
    @Override
    public void onBindViewHolder(@NonNull CourseRVAdapter.ViewHolder holder, int position) {
        // setting data to our text views from our modal class.
        Courses courses = coursesArrayList.get(position);
        holder.courseNameTV.setText(courses.getCourseName());
        holder.courseDurationTV.setText(courses.getCourseDuration());
        holder.courseDescTV.setText(courses.getCourseDescription());
    }
  
    @Override
    public int getItemCount() {
        // returning the size of our array list.
        return coursesArrayList.size();
    }
  
    class ViewHolder extends RecyclerView.ViewHolder {
        // creating variables for our text views.
        private final TextView courseNameTV;
        private final TextView courseDurationTV;
        private final TextView courseDescTV;
  
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing our text views.
            courseNameTV = itemView.findViewById(R.id.idTVCourseName);
            courseDurationTV = itemView.findViewById(R.id.idTVCourseDuration);
            courseDescTV = itemView.findViewById(R.id.idTVCourseDescription);
        }
    }
}

Paso 6: trabajar con el archivo CourseDetails.java

Después de crear una nueva clase de Adaptador para nuestro RecyclerView, tenemos que movernos hacia nuestro archivo CourseDetails.java y agregarle el siguiente código. 

import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;
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 CourseDetails extends AppCompatActivity {
  
    // creating variables for our recycler view, 
    // array list, adapter, firebase firestore
    // and our progress bar.
    private RecyclerView courseRV;
    private ArrayList<Courses> coursesArrayList;
    private CourseRVAdapter courseRVAdapter;
    private FirebaseFirestore db;
    ProgressBar loadingPB;
      
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_course_details);
          
        // initializing our variables.
        courseRV = findViewById(R.id.idRVCourses);
        loadingPB = findViewById(R.id.idProgressBar);
          
        // initializing our variable for firebase
        // firestore and getting its instance.
        db = FirebaseFirestore.getInstance();
          
        // creating our new array list
        coursesArrayList = new ArrayList<>();
        courseRV.setHasFixedSize(true);
        courseRV.setLayoutManager(new LinearLayoutManager(this));
          
        // adding our array list to our recycler view adapter class.
        courseRVAdapter = new CourseRVAdapter(coursesArrayList, this);
          
        // setting adapter to our recycler view.
        courseRV.setAdapter(courseRVAdapter);
          
        // below line is use to get the data from Firebase Firestore.
        // previously we were saving data on a reference of Courses
        // now we will be getting the data from the same reference.
        db.collection("Courses").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.
                            loadingPB.setVisibility(View.GONE);
                            List<DocumentSnapshot> list = queryDocumentSnapshots.getDocuments();
                            for (DocumentSnapshot d : list) {
                                // after getting this list we are passing 
                                // that list to our object class.
                                Courses c = d.toObject(Courses.class);
                                  
                                // and we will pass this object class
                                // inside our arraylist which we have 
                                // created for recycler view.
                                coursesArrayList.add(c);
                            }
                            // after adding the data to recycler view.
                            // we are calling recycler view notifuDataSetChanged
                            // method to notify that data has been changed in recycler view.
                            courseRVAdapter.notifyDataSetChanged();
                        } else {
                            // if the snapshot is empty we are displaying a toast message.
                            Toast.makeText(CourseDetails.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(CourseDetails.this, "Fail to get the data.", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Paso 7: trabajar con el archivo MainActivity.java

En el archivo MainActivity.java , tenemos que agregar un Intent al archivo CourseDetails.class . A continuación se muestra el fragmento de código para hacerlo.

// adding onclick listener to view data in new activity
viewCoursesBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // opening a new activity on button click
                Intent i = new Intent(MainActivity.this,CourseDetails.class);
                startActivity(i);
            }
   });

A continuación se muestra el código actualizado para el archivo MainActivity.java .

import android.content.Intent;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
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.CollectionReference;
import com.google.firebase.firestore.DocumentReference;
import com.google.firebase.firestore.FirebaseFirestore;
  
public class MainActivity extends AppCompatActivity {
  
    // creating variables for our edit text
    private EditText courseNameEdt, courseDurationEdt, courseDescriptionEdt;
  
    // creating variable for button
    private Button submitCourseBtn, viewCoursesBtn;
  
    // creating a strings for storing
    // our values from edittext fields.
    private String courseName, courseDuration, courseDescription;
  
    // creating a variable
    // for firebasefirestore.
    private FirebaseFirestore db;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // getting our instance
        // from Firebase Firestore.
        db = FirebaseFirestore.getInstance();
  
        // initializing our edittext and buttons
        courseNameEdt = findViewById(R.id.idEdtCourseName);
        courseDescriptionEdt = findViewById(R.id.idEdtCourseDescription);
        courseDurationEdt = findViewById(R.id.idEdtCourseDuration);
        submitCourseBtn = findViewById(R.id.idBtnSubmitCourse);
        viewCoursesBtn = findViewById(R.id.idBtnViewCourses);
  
        // adding onclick listener to view data in new activity
        viewCoursesBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // opening a new activity on button click
                Intent i = new Intent(MainActivity.this,CourseDetails.class);
                startActivity(i);
            }
        });
  
        // adding on click listener for button
        submitCourseBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
  
                // getting data from edittext fields.
                courseName = courseNameEdt.getText().toString();
                courseDescription = courseDescriptionEdt.getText().toString();
                courseDuration = courseDurationEdt.getText().toString();
  
                // validating the text fields if empty or not.
                if (TextUtils.isEmpty(courseName)) {
                    courseNameEdt.setError("Please enter Course Name");
                } else if (TextUtils.isEmpty(courseDescription)) {
                    courseDescriptionEdt.setError("Please enter Course Description");
                } else if (TextUtils.isEmpty(courseDuration)) {
                    courseDurationEdt.setError("Please enter Course Duration");
                } else {
                    // calling method to add data to Firebase Firestore.
                    addDataToFirestore(courseName, courseDescription, courseDuration);
                }
            }
        });
    }
  
    private void addDataToFirestore(String courseName, String courseDescription, String courseDuration) {
  
        // creating a collection reference
        // for our Firebase Firetore database.
        CollectionReference dbCourses = db.collection("Courses");
  
        // adding our data to our courses object class.
        Courses courses = new Courses(courseName, courseDescription, courseDuration);
  
        // below method is use to add data to Firebase Firestore.
        dbCourses.add(courses).addOnSuccessListener(new OnSuccessListener<DocumentReference>() {
            @Override
            public void onSuccess(DocumentReference documentReference) {
                // after the data addition is successful
                // we are displaying a success toast message.
                Toast.makeText(MainActivity.this, "Your Course has been added to Firebase Firestore", Toast.LENGTH_SHORT).show();
            }
        }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                // this method is called when the data addition process is failed.
                // displaying a toast message when data addition is failed.
                Toast.makeText(MainActivity.this, "Fail to add course \n" + e, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Después de completar este proceso, debemos agregar los datos de nuestra aplicación en Firebase Console y luego hacer clic en el botón Ver cursos agregados para ver la lista de cursos que hemos agregado dentro de nuestra Firebase Console. A continuación se muestra la imagen de cómo se verá nuestra base de datos de Firebase Firestore para un solo elemento de reciclado. 

Después de completar esto, ejecute su aplicación y vea el resultado del código.

Producción: