¿Cómo crear un diálogo con un diseño personalizado en Android?

En Android, un cuadro de diálogo es una pequeña ventana que solicita al usuario que tome una decisión, proporcione información adicional e informe al usuario sobre alguna tarea en particular. Los siguientes son los propósitos u objetivos principales de un diálogo.

• Para advertir al usuario sobre cualquier actividad.
• Informar al usuario sobre cualquier actividad.
• Para decirle al usuario si es un error o no.
• Para decirle al usuario que su acción deseada ha sido exitosa.

Entonces, en este artículo, vamos a aprender cómo crear un cuadro de diálogo personalizado en Android Studio. En este proyecto, primero diseñamos el diseño que queremos mostrar en nuestra actividad como un cuadro de diálogo personalizado, luego integraremos este diseño en nuestro archivo java. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el  lenguaje Java  . 

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: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.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">
 
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/gfg_img"
        android:layout_marginTop="-150dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <Button
        android:id="@+id/dialogBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Show Dialog"
        android:layout_marginTop="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 3: Cree otro archivo XML de diseño

Cree otro archivo XML de diseño que desee mostrar en su cuadro de diálogo. Puede agregar cualquier elemento a este diseño.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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="wrap_content"
    android:padding="10dp">
 
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/success" />
 
    <TextView
        android:id="@+id/textview"
        android:layout_width="392dp"
        android:layout_height="112dp"
        android:layout_marginTop="10dp"
        android:padding="10dp"
        android:layout_below="@id/imageView"
        android:text="Congratulations!! You have created custom dialog successfully"
        android:textAlignment="center"
        android:textSize="25sp"
        android:textStyle="bold"/>
 
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textview"
        android:layout_margin="15dp"
        android:layout_centerHorizontal="true">
 
        <TextView
            android:id="@+id/okay_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="100dp"
            android:text="Okay"
            android:textStyle="bold"
            android:textColor="#3F51B5"
            android:textSize="30sp" />
 
        <TextView
            android:id="@+id/cancel_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="30dp"
            android:layout_marginLeft="100dp"
            android:layout_toRightOf="@id/okay_text"
            android:text="Cancel"
            android:textStyle="bold"
            android:textColor="#FF0000"
            android:textSize="30sp" />
 
    </RelativeLayout>
 
</RelativeLayout>

Paso 4: Modificación en el archivo theme.xml 

Agregue este código a su archivo theme.xml para crear la animación de apertura y cierre de Dialog.

<style name="animation">
   <item name="android:windowEnterAnimation">@android:anim/fade_in</item>
   <item name="android:windowExitAnimation">@android:anim/fade_out</item>
</style>

Paso 5: 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 androidx.appcompat.app.AppCompatActivity;
 
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
 
public class MainActivity extends AppCompatActivity {
 
    Button mDialogButton;
    TextView okay_text, cancel_text;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mDialogButton = findViewById(R.id.dialogBtn);
        Dialog dialog = new Dialog(MainActivity.this);
 
        mDialogButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
 
                dialog.setContentView(R.layout.dialog_layout);
                dialog.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                dialog.setCancelable(false);
                dialog.getWindow().getAttributes().windowAnimations = R.style.animation;
 
                okay_text = dialog.findViewById(R.id.okay_text);
                cancel_text = dialog.findViewById(R.id.cancel_text);
 
                okay_text.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        dialog.dismiss();
                        Toast.makeText(MainActivity.this, "okay clicked", Toast.LENGTH_SHORT).show();
                    }
                });
 
                cancel_text.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        dialog.dismiss();
                        Toast.makeText(MainActivity.this, "Cancel clicked", Toast.LENGTH_SHORT).show();
                    }
                });
 
                dialog.show();
               
            }
        });
    }
}

Producción: