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.
XML
<!--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
<?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
<?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
<?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.
Java
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.
Java
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.
Java
// 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 .
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:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA