¿Cómo crear un cuadro de diálogo de hoja inferior dinámica en Android usando Firebase Firestore?

Bottom Sheet Dialog es uno de los famosos componentes de interfaz de usuario de material que se utiliza para mostrar los datos o notificaciones en él. Podemos mostrar cualquier tipo de datos o cualquier componente de la interfaz de usuario en nuestro cuadro de diálogo de hoja inferior. En este artículo, veremos la implementación del cuadro de diálogo de hoja inferior dinámico en Android usando Firebase Firestore . 

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

Construiremos una aplicación simple en la que mostraremos un cuadro de diálogo de hoja inferior simple, y mostraremos los datos dentro de esa hoja inferior dinámicamente desde Firebase. qué

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. Navegue 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. Vaya a aplicación > Gradle Scripts dentro de ese archivo. Compruebe si la siguiente dependencia 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’

implementación ‘com.squareup.picasso:picasso:2.71828’

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 . 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  

Como no estamos mostrando ninguna interfaz de usuario dentro de nuestra actividad_principal.xml . Por lo tanto, no agregamos ningún componente de la interfaz de usuario en nuestro archivo activity_main.xml porque mostramos los datos en nuestro archivo de diseño personalizado.  

Paso 5: crear un nuevo archivo de diseño para nuestro cuadro de diálogo de hoja inferior

Como estamos mostrando una imagen y texto dentro de nuestro cuadro de diálogo de hoja inferior. Por lo tanto, crearemos un diseño personalizado para nuestro cuadro de diálogo de hoja inferior. Para crear un nuevo archivo de diseño, nuestro cuadro de diálogo de hoja inferior. Navegue a la aplicación> res> diseño> Haga clic con el botón derecho en él> Haga clic en Nuevo> archivo de recursos de diseño y asígnele el nombre bottom_sheet_layout y agregue el código a continuación.  

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/idRLBottomSheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:backgroundTint="@color/white"
    android:padding="20dp">
  
    <!--ImageView for displaying our image-->
    <ImageView
        android:id="@+id/idIVimage"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_margin="10dp"
        android:padding="5dp" />
      
    <!--Text view for displaying a heading text-->
    <TextView
        android:id="@+id/idTVtext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_toRightOf="@id/idIVimage"
        android:padding="5dp"
        android:text="Message one"
        android:textColor="@color/black"
        android:textSize="15sp"
        android:textStyle="bold" />
      
    <!--Text View for displaying description text-->
    <TextView
        android:id="@+id/idTVtextTwo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idTVtext"
        android:layout_margin="10dp"
        android:layout_marginTop="10dp"
        android:layout_toEndOf="@id/idIVimage"
        android:padding="5dp"
        android:text="Message Two"
        android:textColor="@color/black"
        android:textSize="12sp" />
  
</RelativeLayout>

Paso 6: agregar un estilo de hoja inferior a nuestro archivo styles.xml

Vaya a la aplicación > res > valores > archivo themes.xml y agregue el siguiente código en el archivo de recursos. 

<style name="BottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/BottomSheetStyle</item>
   </style>
  
   <style name="BottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@android:color/transparent</item>
</style>

Paso 7: 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.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
  
import com.google.android.material.bottomsheet.BottomSheetDialog;
import com.google.firebase.firestore.DocumentReference;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.EventListener;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.FirebaseFirestoreException;
import com.squareup.picasso.Picasso;
  
public class MainActivity extends AppCompatActivity {
  
    // creating a variable for our firebase
    // firestore and relative layout of bottom sheet.
    FirebaseFirestore db;
    RelativeLayout bottomSheetRL;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing our variables.
        db = FirebaseFirestore.getInstance();
        bottomSheetRL = findViewById(R.id.idRLBottomSheet);
          
        // calling method to
        // display bottom sheet.
        displayBottomSheet();
    }
  
    private void displayBottomSheet() {
          
        // creating a variable for our bottom sheet dialog.
        final BottomSheetDialog bottomSheetTeachersDialog = new BottomSheetDialog(MainActivity.this, R.style.BottomSheetDialogTheme);
          
        // passing a layout file for our bottom sheet dialog.
        View layout = LayoutInflater.from(MainActivity.this).inflate(R.layout.bottom_sheet_layout, bottomSheetRL);
          
        // passing our layout file to our bottom sheet dialog.
        bottomSheetTeachersDialog.setContentView(layout);
          
        // below line is to set our bottom sheet dialog as cancelable.
        bottomSheetTeachersDialog.setCancelable(false);
          
        // below line is to set our bottom sheet cancelable.
        bottomSheetTeachersDialog.setCanceledOnTouchOutside(true);
          
        // below line is to display our bottom sheet dialog.
        bottomSheetTeachersDialog.show();
          
        // initializing our text views and image views.
        ImageView imageIV = layout.findViewById(R.id.idIVimage);
        TextView textOneTV = layout.findViewById(R.id.idTVtext);
        TextView textTwoTV = layout.findViewById(R.id.idTVtextTwo);
          
        // creating a variable for document reference.
        DocumentReference documentReference = db.collection("BottomSheetDIalog").document("Data");
          
        // adding snapshot listener to our document reference.
        documentReference.addSnapshotListener(new EventListener<DocumentSnapshot>() {
            @Override
            public void onEvent(@Nullable DocumentSnapshot value, @Nullable FirebaseFirestoreException error) {
                // inside the on event method.
                if (error != null) {
                    // this method is called when error is not null 
                    // and we gt any error
                    // in this cas we are displaying an error message.
                    Toast.makeText(MainActivity.this, "Error found is " + error, Toast.LENGTH_SHORT).show();
                    return;
                }
                if (value != null && value.exists()) {
                    // if the value from firestore is not null then we are
                    // getting our data and setting that data to our text view.
                    // after getting the value from firebase firestore
                    // we are setting it to our text view and image view.
                    textOneTV.setText(value.getData().get("textOne").toString());
                    Picasso.get().load(value.getData().get("Image").toString()).into(imageIV);
                    textTwoTV.setText(value.getData().get("textTwo").toString());
                }
            }
        });
    }
}

Paso 8: Agregar los datos a Firebase Firestore Console en Android

Después de agregar este código, vaya a este enlace para abrir Firebase. Después de hacer clic en este enlace, verá la página a continuación y en esta página, haga clic en la opción Ir a la consola en la esquina superior derecha.  

Después de hacer clic en esta pantalla, verá la pantalla a continuación con todo su proyecto dentro que selecciona su proyecto.  

Dentro de esa pantalla, haga clic en Firebase Firestore Database en la ventana izquierda.  

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, tenemos que agregar datos a Firebase Firestore en Android. Para agregar nuevos datos. Haga clic en Iniciar opción de colección, luego especifique el nombre de la colección como » BottomSheetDIalog » y luego haga clic en Siguiente, luego especifique el nombre de ID del documento como » Datos «. Dentro de la sección Campo crea tres campos como » textOne «, » textTwo » e » Imagen » y le pasa valores. Después de agregarle valores, haga clic en guardar y ahora ejecute su aplicación.  

Producción: