¿Cómo mostrar Dynamic AlertDialog en Android usando Firebase Firestore?

Dynamic AlertDialog se usa en muchas aplicaciones diferentes que se usan para mostrar diferentes mensajes de diálogo a los usuarios. Este tipo de diálogo también se usa para educar a los usuarios con tantos banners promocionales. Este tipo de diálogo de alerta es generalmente dinámico y muestra imágenes y textos que tienen un comportamiento dinámico y cambian después de un cierto intervalo. En este artículo, veremos la implementación del cuadro de diálogo de alerta dinámica en Android. 

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

Construiremos un cuadro de diálogo de alerta simple en Android. Dentro de ese AlertDialog, mostraremos nuestra imagen y texto de Firebase. Los datos dentro de nuestro cuadro de diálogo de alerta se pueden cambiar de acuerdo con nuestros requisitos. 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, 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

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

Como no mostramos ninguna interfaz de usuario dentro de nuestro archivo activity_main.xml , no agregamos ningún componente de 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 alerta

Como estamos mostrando una imagen y texto dentro de nuestro cuadro de diálogo de alerta. Por lo tanto, crearemos un diseño personalizado para nuestro cuadro de diálogo de alerta. Para crear un nuevo archivo de diseño cuatro nuestro cuadro de diálogo personalizado. 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 custom_pop_up_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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="30dp"
    android:background="@color/purple_500">
  
    <!--Image view inside our dialog box-->
    <ImageView
        android:id="@+id/idIVNotification"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_below="@id/idTVNotification"
        android:layout_centerHorizontal="true"
        android:layout_margin="20dp" />
  
    <!--Text view inside our dialog box-->
    <TextView
        android:id="@+id/idTVNotification"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="Notification Message"
        android:textAlignment="center"
        android:textColor="@color/white"
        android:textSize="18sp" />
      
</RelativeLayout>

Paso 6: 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.app.AlertDialog;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
  
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 {
  
    // initializing th variable for firebase firestore.
    FirebaseFirestore db = FirebaseFirestore.getInstance();
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // creating a variable for our alert dialog builder.
        AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
          
        // creating a layout inflater variable.
        LayoutInflater inflater = getLayoutInflater();
          
        // below line is for inflating a custom pop up layout.
        View dialoglayout = inflater.inflate(R.layout.custom_pop_up_layout, null);
          
        // initializing the textview and imageview from our dialog box.
        TextView notificationTV = dialoglayout.findViewById(R.id.idTVNotification);
        ImageView notificationIV = dialoglayout.findViewById(R.id.idIVNotification);
  
        // creating a variable for document reference.
        DocumentReference documentReference = db.collection("MyData").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.
                    notificationTV.setText(value.getData().get("NotificationMessage").toString());
                    Picasso.get().load(value.getData().get("NotificationImage").toString()).into(notificationIV);
                }
            }
        });
          
        // after setting the text to our text view.
        // we are displaying our alert dialog.
        builder.setView(dialoglayout);
        builder.show();
    }
}

Paso 7: 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, solo tenemos que ejecutar nuestra aplicación y agregar datos dentro de Firebase Console. Para agregar los datos, haga clic en la opción Iniciar colección y agregue el nombre de su colección como » Mis datos «. Después de agregar esto, debemos agregar nuestra ID de documento como » Datos «. Dentro de la sección de campos, debemos agregar nuestro nombre de campo como » Imagen de notificación » para mostrar nuestra imagen en la notificación e ingresar el valor correspondiente (URL para la imagen). Y cree otro archivo y nombre el campo como » Mensaje de notificación” para mostrar el mensaje dentro de nuestra notificación. Además, introduzca el valor correspondiente de la misma. Por último, haga clic en el botón Guardar .

Después de agregar datos, la pantalla se verá como la siguiente. Puede editar y eliminar esos archivos.

Ahora ejecute la aplicación y vea el resultado de la aplicación a continuación: 

Producción: