¿Cómo crear un cuadro de diálogo de alerta usando la biblioteca de diálogo SweetAlert?

En este artículo, aprenderemos cómo agregar un cuadro de diálogo de alerta personalizado en una aplicación usando la biblioteca de diálogo SweetAlert. Es un cuadro emergente que aparece en respuesta a cualquier acción del usuario. AlertBox es muy útil cuando se trata de validación, se puede usar para mostrar mensajes de confirmación. Supongamos que si el usuario presiona el botón Atrás sin guardar los cambios, se puede usar como advertencia. Cuando la transacción se realiza en las aplicaciones de pago, se puede mostrar al usuario  un breve cuadro de diálogo que describe el estado de la transacción.
ventajas:
 

  • Nos proporciona una muy buena interfaz de usuario que hace que la experiencia del usuario sea muy buena.
  • Hace que el trabajo sea mucho más fácil, por lo que se usa sobre el cuadro de diálogo personalizado , que necesita que se cree un diseño completo.
  • Proporciona muchos tipos diferentes de diseños para el cuadro de diálogo.

Enfoque:
Paso 1: agregue la biblioteca de soporte en el archivo build.gradle y agregue la dependencia en la sección de dependencias. Esta biblioteca tiene un cuadro de diálogo de alerta incorporado que se puede usar directamente.
 

XML

dependencies {        
        implementation 'com.github.f0ris.sweetalert:library:1.5.1'        
}

Paso 2: ahora agregue el siguiente código en el archivo activity_main.xml . Este código agrega cinco botones en la actividad. Cada botón se utiliza para llamar a un estilo diferente del cuadro de diálogo de alerta .
 

actividad_principal.xml


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:onClick="showDialog"
        android:id="@+id/basic_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Basic Dialog"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.452"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.124" />

    <Button
        android:onClick="showDialog"
        android:id="@+id/error_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Error Dialog"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.452"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.284" />

    <Button
        android:onClick="showDialog"
        android:id="@+id/warning_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Warning Dialog"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.452"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.45" />

    <Button
        android:onClick="showDialog"
        android:id="@+id/success_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="256dp"
        android:text="Success Dialog"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.47"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:onClick="showDialog"
        android:id="@+id/custom_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="156dp"
        android:text="Custom Dialog"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.464"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Publicación traducida automáticamente

Artículo escrito por GeeksforGeeks y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *