¿Cómo crear un cuadro de diálogo personalizado en Android?


350

Quiero crear un cuadro de diálogo personalizado como el siguiente

ingrese la descripción de la imagen aquí

He intentado las siguientes cosas.

  1. Creé una subclase de AlertDialog.Builder y utilicé una vista personalizada de título y contenido personalizado y usé eso, pero el resultado no fue el esperado.

  2. Otro intento fue subclasificar DialogFragment y personalizar el diálogo dentro de onCreateDialog, pero el resultado no fue el esperado.

  3. Luego intenté usar una clase de diálogo simple . El resultado no fue el esperado.

En los tres casos, el problema es que cuando paso por alto la vista de título, el tamaño del cuadro de diálogo no es el esperado y cuando uso la vista de Título, el resultado es que hay un borde grueso alrededor de la vista de contenido (que realmente se ve mal). Ahora tengo dos preguntas en mi mente ...

  1. ¿Cómo puedo lograr eso? Como ya he probado muchas cosas, una respuesta directa será más apreciada.

  2. ¿Cuál es la mejor manera de mostrar un diálogo de error o alerta en una aplicación de Android?

EDITAR Documentación de desarrollador de Android recomienda que usemos DialogFragments o Dialogs para mostrar mensajes de error / alerta al usuario. Sin embargo, en un momento dicen ...

Consejo: Si desea un cuadro de diálogo personalizado, puede mostrar una Actividad como cuadro de diálogo en lugar de utilizar las API de cuadro de diálogo. Simplemente cree una actividad y establezca su tema en Theme.Holo.Dialog en el elemento de manifiesto.

¿Cuál es el significado de eso? ¿No es demasiado usar una actividad solo para mostrar un mensaje de error?


solo porque la segunda parte de la pregunta aún no se ha respondido ... ¿Cuál es la mejor manera de mostrar mensajes de error / Alerta al usuario?
Amit

@ sumit-bijwani: no obtuve lo que necesita, la respuesta ya aceptada está ahí, ¿está ofreciendo recompensas por ??
Akhil

3
Use DialogFragment, es mucho mejor que la respuesta aceptada
Benoit

@Amitir Hasta donde puedo juzgar por la imagen, el diálogo que desea lograr parece que contiene los mismos elementos que AlertDialog estándar (encabezado, cuerpo, barra de botones). Así que supongo que tu estilo se podría lograr solo con un estilo.
Anderson

Para implementar esto usando el Fragmento de diálogo, vea learnzone.info/…
Madhav Bhattarai

Respuestas:


565

Aquí he creado un diálogo simple, como:

Caja de diálogo

custom_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="80dp"
    android:background="#3E80B4"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/txt_dia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="Do you realy want to exit ?"
        android:textColor="@android:color/white"
        android:textSize="15dp"
        android:textStyle="bold"/>


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#3E80B4"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btn_yes"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:background="@android:color/white"
            android:clickable="true"
            android:text="Yes"
            android:textColor="#5DBCD2"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btn_no"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_marginLeft="5dp"
            android:background="@android:color/white"
            android:clickable="true"
            android:text="No"
            android:textColor="#5DBCD2"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>

Tienes que extends Dialogyimplements OnClickListener

public class CustomDialogClass extends Dialog implements
    android.view.View.OnClickListener {

  public Activity c;
  public Dialog d;
  public Button yes, no;

  public CustomDialogClass(Activity a) {
    super(a);
    // TODO Auto-generated constructor stub
    this.c = a;
  }

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.custom_dialog);
    yes = (Button) findViewById(R.id.btn_yes);
    no = (Button) findViewById(R.id.btn_no);
    yes.setOnClickListener(this);
    no.setOnClickListener(this);

  }

  @Override
  public void onClick(View v) {
    switch (v.getId()) {
    case R.id.btn_yes:
      c.finish();
      break;
    case R.id.btn_no:
      dismiss();
      break;
    default:
      break;
    }
    dismiss();
  }
}

¿Cómo llamar al diálogo?

R.id.TXT_Exit:
CustomDialogClass cdd=new CustomDialogClass(Values.this);
cdd.show();  

Actualizaciones

Después de mucho tiempo, uno de mis amigos me pidió que creara un diálogo de forma curva con un fondo transparente. Entonces, aquí lo he implementado.

ingrese la descripción de la imagen aquí

Para hacer una forma curva, debe crear una separada curve_shap.XMLcomo se muestra a continuación,

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#000000" />

    <stroke
        android:width="2dp"
        android:color="#ffffff" />

    <corners
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />

</shape>

Ahora, agregue esto curve_shap.XMLen su vista principal Diseño. En mi caso he usadoLinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="80dp"
        android:background="@drawable/curve_shap"
        android:orientation="vertical" >
...
</LinearLayout>

¿Cómo llamar a esto?

CustomDialogClass cdd = new CustomDialogClass(MainActivity.this);
cdd.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
cdd.show();

Espero que eso funcione para usted.


1
Este código se ajusta a mi aplicación. Solo quiero preguntar, ¿Cómo intentar otra actividad? cuando haga clic en el botón de diálogo ???
Manwal 01 de

puede, llamar directamente al intento, y no olvide descartar () antes de llamar a startActivity (). intente con el clic "sí", como startActivity (nueva intención (actividad, nueva_actividad.clase));
Chintan Khetiya 01 de

3
@chintankhetiya y si quieres pasar datos del diálogo a la actividad? ¿Cómo lo vamos a hacer?
Alvin

2
lo que es R.id.TXT_Exit:?
Jack

una vista en la que desea llamar al diálogo.
Chintan Khetiya

186

Este es un diálogo de ejemplo, crear con xml.

ingrese la descripción de la imagen aquí

el siguiente código xml es solo un ejemplo, el diseño o la vista se implementa aquí:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffffff">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:id="@+id/a"
    android:gravity="center"
    android:background="#DA5F6A"
    android:src="@drawable/dialog_cross"
    android:scaleType="fitCenter" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TEXTO"
    android:id="@+id/text_dialog"
    android:layout_below="@+id/a"
    android:layout_marginTop="20dp"
    android:layout_marginLeft="4dp"
    android:layout_marginRight="4dp"
    android:layout_marginBottom="20dp"
    android:textSize="18sp"
    android:textColor="#ff000000"
    android:layout_centerHorizontal="true"
    android:gravity="center_horizontal" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:text="OK"
    android:id="@+id/btn_dialog"
    android:gravity="center_vertical|center_horizontal"
    android:layout_below="@+id/text_dialog"
    android:layout_marginBottom="20dp"
    android:background="@drawable/btn_flat_red_selector"
    android:layout_centerHorizontal="true"
    android:textColor="#ffffffff" />

</RelativeLayout>

Estas líneas de código son recursos de dibujables:

android:src="@drawable/dialog_cross"
android:background="@drawable/btn_flat_red_selector"

podrías hacer una clase extiende el diálogo, también algo como esto:

public class ViewDialog {

    public void showDialog(Activity activity, String msg){
        final Dialog dialog = new Dialog(activity);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setCancelable(false);
        dialog.setContentView(R.layout.dialog);

        TextView text = (TextView) dialog.findViewById(R.id.text_dialog);
        text.setText(msg);

        Button dialogButton = (Button) dialog.findViewById(R.id.btn_dialog);
        dialogButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });

        dialog.show();

    }
}

finalmente la forma de llamada, en su Actividad, por ejemplo:

ViewDialog alert = new ViewDialog();
alert.showDialog(getActivity(), "Error de conexión al servidor");

Espero que funcione para ti.


Hola Alex, buen compartir !! ¿Puedes compartir con nosotros el estilo btn_flat_red_selector xml? Gracias
Gastón Saillén

@ GastónSaillén Hola Gastón, lo buscaré porque es viejo y no recuerdo dónde está ese código
Alex Zaraos

44
no te preocupes Alex, ya he hecho una <forma xmlns: android = " schemas.android.com/apk/res/android "> <stroke android: width = "2dp" android: color = "# FFFFFF" /> <gradiente android: angle = "180" android: endColor = "@ color / NaranjaOTTAA" android: startColor = "@ color / FondoActionBar" /> <esquinas android: bottomLeftRadius = "7dp" android: bottomRightRadius = "7dp" android: topLeftRadius = " 7dp "android: topRightRadius =" 7dp "/> </shape> (si lo desea, puede agregarlo a su respuesta)
Gastón Saillén

94

Otra forma fácil de hacer esto.

paso 1) crea un diseño con los ID adecuados.

paso 2) usa el siguiente código donde lo desees.

LayoutInflater factory = LayoutInflater.from(this);
final View deleteDialogView = factory.inflate(R.layout.mylayout, null);
final AlertDialog deleteDialog = new AlertDialog.Builder(this).create();
deleteDialog.setView(deleteDialogView);
deleteDialogView.findViewById(R.id.yes).setOnClickListener(new OnClickListener() {    
    @Override
    public void onClick(View v) {
        //your business logic 
        deleteDialog.dismiss();
    }
});
deleteDialogView.findViewById(R.id.no).setOnClickListener(new OnClickListener() {    
    @Override
    public void onClick(View v) {
        deleteDialog.dismiss();    
    }
});

deleteDialog.show();

34

Agregue el tema a continuación en values -> style.xml

<style name="Theme_Dialog" parent="android:Theme.Light">
     <item name="android:windowNoTitle">true</item>
     <item name="android:windowBackground">@android:color/transparent</item>
</style>

Use este tema en su onCreateDialogmétodo de esta manera:

Dialog dialog = new Dialog(FlightBookActivity.this,R.style.Theme_Dialog);

Defina su diseño de diálogo, incluida la barra de título en el archivo xml, y configure ese archivo xml de esta manera:

dialog.setContentView(R.layout.your_dialog_layout);

Esto me parece la mejor solución (usa la menor cantidad de código). ¿Por qué elegiste la respuesta de Chintan Khetiya? ¿Qué lo hace mejor que este?
wojciii

1
Vinnet Shukla cómo aplicar eventos de clic en R.layout.your_dialog_layout para que pueda usar un diseño personalizado y pueda tomar medidas al respecto
Erum

@ErumHannan puedes usarmdialog.findViewById(R.id.element);
Muhammed Refaat

25

Simple primero crea una clase

 public class ViewDialog {

        public void showDialog(Activity activity, String msg){
            final Dialog dialog = new Dialog(activity);
            dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
            dialog.setCancelable(false);
            dialog.setContentView(R.layout.custom_dialogbox_otp);
            dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

            TextView text = (TextView) dialog.findViewById(R.id.txt_file_path);
            text.setText(msg);

            Button dialogBtn_cancel = (Button) dialog.findViewById(R.id.btn_cancel);
            dialogBtn_cancel.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
//                    Toast.makeText(getApplicationContext(),"Cancel" ,Toast.LENGTH_SHORT).show();
                    dialog.dismiss();
                }
            });

            Button dialogBtn_okay = (Button) dialog.findViewById(R.id.btn_okay);
            dialogBtn_okay.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
//                    Toast.makeText(getApplicationContext(),"Okay" ,Toast.LENGTH_SHORT).show();
                    dialog.cancel();
                }
            });

            dialog.show();
        }
    }

luego cree un custom_dialogbox_otp

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="330dp"
    android:layout_height="160dp"
    android:background="#00555555"
    android:orientation="vertical"
    android:padding="5dp"
    android:weightSum="100">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/round_layout_otp"
        android:orientation="vertical"
        android:padding="7dp"
        android:weightSum="100">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="60"
            android:orientation="horizontal"
            android:weightSum="100">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="80"
                android:gravity="center">

                <ImageView
                    android:id="@+id/a"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:background="#DA5F6A"
                    android:gravity="center"
                    android:scaleType="fitCenter"
                    android:src="@mipmap/infoonetwo" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="20">

                <TextView
                    android:id="@+id/txt_file_path"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:singleLine="true"
                    android:text="TEXTO"
                    android:textColor="#FFFFFF"
                    android:textSize="17sp"
                    android:textStyle="bold" />
            </LinearLayout>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="40"
            android:background="@drawable/round_layout_white_otp"
            android:orientation="vertical"
            android:weightSum="100">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_weight="60">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:text="Do you wanna Exit..?"
                    android:textColor="#ff000000"
                    android:textSize="15dp"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="40"
                android:orientation="horizontal"
                android:weightSum="100">


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginRight="30dp"
                    android:layout_weight="50"
                    android:gravity="center|right">

                    <Button
                        android:id="@+id/btn_cancel"
                        android:layout_width="80dp"
                        android:layout_height="25dp"
                        android:background="@drawable/round_button"
                        android:gravity="center"
                        android:text="CANCEL"
                        android:textSize="13dp"
                        android:textStyle="bold"
                        android:textColor="#ffffffff" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="30dp"
                    android:layout_weight="50"
                    android:gravity="center|left">


                    <Button
                        android:id="@+id/btn_okay"
                        android:layout_width="80dp"
                        android:layout_height="25dp"
                        android:background="@drawable/round_button"
                        android:text="OKAY"
                        android:textSize="13dp"
                        android:textStyle="bold"
                        android:textColor="#ffffffff" />

                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

luego en su dibujable crear debajo de los archivos xml.
para round_layout_white_otp.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- <corners android:radius="10dp" /> -->
    <corners
        android:bottomLeftRadius="18dp"
        android:bottomRightRadius="16dp"
        android:topLeftRadius="38dp"
        android:topRightRadius="36dp" />
    <solid android:color="#C0C0C0" />
    </shape>

para round_layout_otp.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- <corners android:radius="10dp" /> -->
    <corners
        android:bottomLeftRadius="18dp"
        android:bottomRightRadius="16dp"
        android:topLeftRadius="38dp"
        android:topRightRadius="38dp" />
    <solid android:color="#DA5F6A" />
    </shape>

botón redondo

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <!-- <corners android:radius="10dp" /> -->
    <corners
        android:bottomLeftRadius="7dp"
        android:bottomRightRadius="7dp"
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp" />
    <solid android:color="#06A19E" />
    </shape>

Luego, finalmente use el código debajo para visualizar su diálogo :)

ViewDialog alert = new ViewDialog();
        alert.showDialog(ReceivingOTPRegActivity.this, "OTP has been sent to your Mail ");

su salida :)

ingrese la descripción de la imagen aquí


13
public static void showCustomAlertDialog(Context context, String name,
            String id, String desc, String fromDate, String toDate,
            String resions) {
        final AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(
                context);
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.dialog, null);
        alertDialogBuilder.setView(view);
        alertDialogBuilder.setCancelable(false);
        final AlertDialog dialog = alertDialogBuilder.create();
        dialog.show();
        txt_empId = (TextView) view.findViewById(R.id.txt_dialog_empcode);
        txt_empName = (TextView) view.findViewById(R.id.txt_dialog_empname);
        txt_desc = (TextView) view.findViewById(R.id.txt_dialog_desc);
        txt_startDate = (TextView) view.findViewById(R.id.txt_dialog_startDate);
        txt_resions = (TextView) view.findViewById(R.id.txt_dialog_endDate);
        txt_empId.setTypeface(Utils.setLightTypeface(context));
        txt_empName.setTypeface(Utils.setLightTypeface(context));
        txt_desc.setTypeface(Utils.setLightTypeface(context));
        txt_startDate.setTypeface(Utils.setLightTypeface(context));
        txt_resions.setTypeface(Utils.setLightTypeface(context));

        txt_empId.setText(id);
        txt_empName.setText(name);

        txt_desc.setText(desc);
        txt_startDate.setText(fromDate + "\t to \t" + toDate);
        txt_resions.setText(resions);



        btn_accept = (Button) view.findViewById(R.id.btn_dialog_accept);
        btn_reject = (Button) view.findViewById(R.id.btn_dialog_reject);
        btn_cancel = (Button) view.findViewById(R.id.btn_dialog_cancel);
        btn_accept.setTypeface(Utils.setBoldTypeface(context));
        btn_reject.setTypeface(Utils.setBoldTypeface(context));
        btn_cancel.setTypeface(Utils.setBoldTypeface(context));

        btn_cancel.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                dialog.dismiss();

            }
        });

    }

11

La forma más sencilla de crear cuadros de diálogo personalizados:

  1. Inicializar y mostrar diálogo:

     ViewDialog alertDialoge = new ViewDialog();
     alertDialoge.showDialog(getActivity(), "PUT DIALOG TITLE");
  2. Crear método:

    public class ViewDialog {
    
      public void showDialog(Activity activity, String msg) {
    
        final Dialog dialog = new Dialog(activity);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setCancelable(false);
        dialog.setContentView(R.layout.custom_dialoge_feedback);
    
        TextView text = (TextView) dialog.findViewById(R.id.text_dialog_feedback);
        text.setText(msg);
    
        Button okButton = (Button) dialog.findViewById(R.id.btn_dialog_feedback);
        Button cancleButton = (Button) dialog.findViewById(R.id.btn_dialog_cancle_feedback);
        final EditText edittext_tv = (EditText) dialog.findViewById(R.id.dialoge_alert_text_feedback);
    
        okButton.setOnClickListener(new View.OnClickListener() {
    
            @Override
            public void onClick(View v) {
                //Perfome Action
            }
        });
        cancleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                dialog.dismiss();
            }
        });
    
        dialog.show();
    
        }
    }
  3. Cree el diseño XML que desee o necesite.


4

Puede probar esta sencilla biblioteca emergente de diálogo de Android para cortar el código de diálogo desordenado. Es muy simple de usar en su actividad. después de eso, puede tener este código en su actividad para mostrar el diálogo

Pop.on(this).with().title(R.string.title).layout(R.layout.custom_pop).show();

donde R.layout.custom_pop es su diseño personalizado de la forma en que desea decorar su diálogo.


4

Encontré esto como la forma más fácil de mostrar un diálogo personalizado.

Tienes diseño your_layout.xml

public void showCustomDialog(final Context context) {
    Dialog dialog = new Dialog(context);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    view = inflater.inflate(R.layout.your_layout, null, false);
    findByIds(view);  /*HERE YOU CAN FIND YOU IDS AND SET TEXTS OR BUTTONS*/
    ((Activity) context).getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE | WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
    dialog.setContentView(view);
    final Window window = dialog.getWindow();
    window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT);
    window.setBackgroundDrawableResource(R.color.colorTransparent);
    window.setGravity(Gravity.CENTER);
    dialog.show();
}

4

Crear diseño de alerta personalizado custom_aler_update.xml

Luego copie este código a la actividad:

AlertDialog basic_reg;
AlertDialog.Builder builder ;
builder = new AlertDialog.Builder(ct, R.style.AppCompatAlertDialogStyle);
LayoutInflater inflater = ((Activity) ct).getLayoutInflater();
View v = inflater.inflate(R.layout.custom_aler_update, null);
builder.setView(v);
builder.setCancelable(false);
builder.create();
basic_reg = builder.show();

Copie este código al estilo:

<style name="AppCompatAlertDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColorPrimary">@color/primaryTextColor</item>
    <item name="android:background">@color/white</item>
</style>

3

La forma más sencilla de cambiar el color de fondo y el estilo de texto es crear un tema personalizado para el cuadro de diálogo de alerta de Android como se muestra a continuación:

: Solo ponga el código debajo de styles.xml:

    <style name="AlertDialogCustom" parent="@android:style/Theme.Dialog">
    <item name="android:textColor">#999999</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowTitleStyle">@null</item>
    <item name="android:typeface">monospace</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:textSize">@dimen/abc_text_size_medium_material</item>
    <item name="android:background">#80ff00ff</item>
</style>

: Ahora se ha completado la personalización, ahora solo aplica a tu objeto alertBuilder:

    AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this,R.style.AlertDialogCustom);

Espero que esto te ayudará !


3

Clase de diálogo de alerta personalizada de pantalla completa en Kotlin

  1. Cree un archivo XML, igual que lo haría con una actividad

  2. Crear clase personalizada AlertDialog

    class Your_Class(context:Context) : AlertDialog(context){
    
     init {
      requestWindowFeature(Window.FEATURE_NO_TITLE)
      setCancelable(false)
     }
    
     override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.your_Layout)
      val window = this.window
      window?.setLayout(WindowManager.LayoutParams.MATCH_PARENT,
                         WindowManager.LayoutParams.MATCH_PARENT)
    
      //continue custom code here
      //call dismiss() to close
     }
    }
  3. Llamar al diálogo dentro de la actividad.

    val dialog = Your_Class(this)
    //can set some dialog options here
    dialog.show()

Nota **: Si no desea que su cuadro de diálogo esté en pantalla completa, elimine las siguientes líneas

      val window = this.window
      window?.setLayout(WindowManager.LayoutParams.MATCH_PARENT,
                         WindowManager.LayoutParams.MATCH_PARENT)

Luego edite el layout_width & layout_height de su diseño superior dentro de su archivo XML para que sea wrap_content o un valor DP fijo.

Por lo general, no recomiendo usar DP fijo, ya que es probable que desee que su aplicación se adapte a múltiples tamaños de pantalla, sin embargo, si mantiene sus valores de tamaño lo suficientemente pequeños, debería estar bien


2

Crear un diseño de diálogo de alerta similar a este

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:text="Custom Alert Dialog"
        android:layout_height="40dp">
    </Button>
</LinearLayout>

y agregue el siguiente código en su clase de actividad

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    LayoutInflater inflate = LayoutInflater.from(this);
    alertView = inflate.inflate(R.layout.your_alert_layout, null);
    Button btn= (Button) alertView.findViewById(R.id.btn);

    showDialog();
  }

 public void showDialog(){
        Dialog alertDialog = new Dialog(RecognizeConceptsActivity.this);
        alertDialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        alertDialog.setContentView(alertView);
        alertDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        alertDialog.show();
    }

2

Es una clase para Alert Dialog para que pueda llamar a la clase desde cualquier actividad para reutilizar el código.

public class MessageOkFragmentDialog extends DialogFragment {
Typeface Lato;
String message = " ";
String title = " ";
int messageID = 0;

public MessageOkFragmentDialog(String message, String title) {
    this.message = message;
    this.title = title;
}


@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {

    AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

    LayoutInflater inflater = getActivity().getLayoutInflater();

    View convertview = inflater.inflate(R.layout.dialog_message_ok_box, null);


    Constants.overrideFonts(getActivity(), convertview);
    Lato = Typeface
            .createFromAsset(getActivity().getAssets(), "font/Lato-Regular.ttf");


    TextView textmessage = (TextView) convertview
            .findViewById(R.id.textView_dialog);

    TextView textview_dialog_title = (TextView) convertview.findViewById(R.id.textview_dialog_title);

    textmessage.setTypeface(Lato);
    textview_dialog_title.setTypeface(Lato);



    textmessage.setText(message);
    textview_dialog_title.setText(title);



    Button button_ok = (Button) convertview
            .findViewById(R.id.button_dialog);
    button_ok.setTypeface(Lato);

    builder.setView(convertview);
    button_ok.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View arg0) {
            dismiss();

        }
    });


    return builder.create();

}
}

El archivo Xml para el mismo es:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:gravity="center_vertical|center"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/blue_color"
            android:gravity="center_horizontal"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/textview_dialog_title"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:gravity="center"
                android:textColor="@color/white_color"
                android:textSize="@dimen/txtSize_Medium" />


        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/txt_white_color" />

        <TextView
            android:id="@+id/textView_dialog"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="@dimen/margin_20"
            android:textColor="@color/txt_gray_color"
            android:textSize="@dimen/txtSize_small" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/txt_white_color"
            android:visibility="gone"/>

        <Button
            android:id="@+id/button_dialog"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/margin_40"
            android:layout_gravity="center"
            android:background="@drawable/circular_blue_button"

            android:text="@string/ok"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="@dimen/margin_10"
            android:textColor="@color/txt_white_color"
            android:textSize="@dimen/txtSize_small" />
    </LinearLayout>

</LinearLayout>

2

Dialog Fragment es la forma más sencilla de crear un cuadro de diálogo de alerta personalizado. Siga el código anterior para crear una vista personalizada para su cuadro de diálogo y luego impleméntelo usando Dialog Fragment. Agregue el siguiente código a su archivo de diseño:

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="80dp"
    android:background="#3E80B4"
    android:orientation="vertical">

    <TextView
        android:id="@+id/txt_dia"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="10dp"
        android:text="Do you realy want to exit ?"
        android:textColor="@android:color/white"
        android:textSize="15dp"
        android:textStyle="bold" />


    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#3E80B4"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_yes"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:background="@android:color/white"
            android:clickable="true"
            android:text="Yes"
            android:textColor="#5DBCD2"
            android:textStyle="bold" />

        <Button
            android:id="@+id/btn_no"
            android:layout_width="100dp"
            android:layout_height="30dp"
            android:layout_marginLeft="5dp"
            android:background="@android:color/white"
            android:clickable="true"
            android:text="No"
            android:textColor="#5DBCD2"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>

2

Crear cuadro de diálogo de alerta personalizado

cumstomDialog.xml

<ImageView
    android:id="@+id/icon"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    app:srcCompat="@drawable/error" />

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:fontFamily="@font/muli_bold"
    android:text="Title"
    android:layout_marginTop="5dp"
    android:textColor="@android:color/black"
    android:textSize="15sp" />


<TextView
    android:id="@+id/description"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"
    android:fontFamily="@font/muli_regular"
    android:text="Message"
    android:textColor="@android:color/black"
    android:textSize="12dp" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="20dp"
    android:gravity="center"
    android:orientation="horizontal">

    <Button
        android:id="@+id/cancelBTN"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_margin="5dp"
        android:background="@drawable/bground_radius_button_white"
        android:text="No"
        android:textColor="@color/black" />

    <Button
        android:id="@+id/acceptBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_margin="5dp"
        android:background="@drawable/bground_radius_button"
        android:text="Yes"
        android:textColor="@color/white" />
</LinearLayout>

Muestra tu diálogo personalizado sobre tu actividad:

  public void showDialog(String title, String des, int icon) {

    final Dialog dialog = new Dialog(this);
    dialog.setContentView(R.layout.custom_dialog);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

    Button cancelBTN = dialog.findViewById(R.id.cancelBTN);
    Button acceptBTN = dialog.findViewById(R.id.acceptBtn);
    TextView tvTitle = dialog.findViewById(R.id.title);
    TextView tvDescription = dialog.findViewById(R.id.description);
    ImageView ivIcon = dialog.findViewById(R.id.icon);

    tvTitle.setText(title);
    tvDescription.setText(des);
    ivIcon.setImageResource(icon);

    cancelBTN.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            dialog.dismiss();
        }
    });

    acceptBTN.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

        }
    });

    dialog.show();
}

Llame así:

showDialog ("Título", "Mensaje", R.drawable.warning);


1

Estoy publicando el código de Kotlin que estoy usando y funciona bien para mí. También puede configurar la escucha de clics para los botones de diálogo.

Este es mi código XML:

layout_custom_alert_dialog.xml

<?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:layoutDirection="ltr"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <View
        android:id="@+id/view6"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="@color/colorPrimary" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/view6"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp">


        <TextView
            android:id="@+id/txt_alert_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            tools:text="are you sure?"
            android:textAlignment="center"
            android:textColor="@android:color/black"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


        <Button
            android:id="@+id/btn_alert_positive"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/textView2"
            android:layout_marginTop="8dp"
            android:background="@android:color/transparent"
            tools:text="yes"
            android:textColor="@color/colorPrimaryDark"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/btn_alert_negative"
            app:layout_constraintTop_toBottomOf="@+id/txt_alert_title" />

        <Button
            android:id="@+id/btn_alert_negative"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:background="@android:color/transparent"
            tools:text="no"
            android:textColor="@color/colorPrimaryDark"
            app:layout_constraintEnd_toStartOf="@+id/btn_alert_positive"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/txt_alert_title" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</RelativeLayout>

mAlertDialog.kt

class mAlertDialog(context: Context) {

    private val btn_positive : Button
    private val btn_negative : Button
    private val txt_alert_title : TextView
    private val dialog : AlertDialog
    init {
        val view = LayoutInflater.from(context).inflate(R.layout.layout_custom_alert_dialog,null)

        val dialog_builder = AlertDialog.Builder(context)
        dialog_builder.setView(view)

        btn_negative = view.findViewById(R.id.btn_alert_negative)
        btn_positive = view.findViewById(R.id.btn_alert_positive)
        txt_alert_title = view.findViewById(R.id.txt_alert_title)

        dialog = dialog_builder.create() 
    }

    fun show()
    {
        dialog.show()
    }

    fun setPositiveClickListener(listener :onClickListener)
    {
        btn_positive.setOnClickListener { v ->
            listener.onClick(btn_positive)
            dialog.dismiss()
        }
    }

    fun setNegativeClickListener(listener: onClickListener)
    {
        btn_negative.setOnClickListener { v ->
            listener.onClick(btn_negative)
            dialog.dismiss()
        }
    }

    fun setPoitiveButtonText(text : String)
    {
        btn_positive.text = text
    }


    fun setNegativeButtonText(text : String)
    {
        btn_negative.text = text
    }

    fun setAlertTitle(title : String)
    {
        txt_alert_title.text = title
    }
}

interfaz para oyentes de clics:

onClickListener.kt

interface onClickListener{
    fun onClick(view : View)
}

Uso de muestra

val dialog = mAlertDialog(context)
                dialog.setNegativeButtonText("no i dont")
                dialog.setPoitiveButtonText("yes is do")
                dialog.setAlertTitle("do you like this alert dialog?")

                dialog.setPositiveClickListener(object : onClickListener {
                    override fun onClick(view: View) {
                        Toast.makeText(context, "yes", Toast.LENGTH_SHORT).show()
                    }
                })

                dialog.setNegativeClickListener(object : onClickListener {
                    override fun onClick(view: View) {
                        Toast.makeText(context, "no", Toast.LENGTH_SHORT).show()
                    }
                })

                dialog.show()

¡Espero que esto ayude!



1

El siguiente es el código para crear un diálogo de vista personalizado con kotlin. El siguiente es el archivo de diseño de diálogo

<?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:orientation="vertical" android:layout_width="300dp"
    android:layout_height="400dp">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

crear diálogo y actualizar el texto en la vista de texto

val dialog = Dialog(activity!!)
dialog.setContentView(R.layout.my_dialog_layout)
dialog.tvTitle.text = "Hello World!!"
dialog.show()

1

Aquí hay una manera muy simple de crear un diálogo personalizado.

dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<!--  Put your layout content  -->
</LinearLayout>

MainActivity.java

ShowPopup(){
LayoutInflater li = LayoutInflater.from(this);
View promptsView = li.inflate(R.layout.dialog, null);
android.app.AlertDialog.Builder alertDialogBuilder = new 
android.app.AlertDialog.Builder(this);
alertDialogBuilder.setView(promptsView);
alertDialogBuilder.setCancelable(true);
AlertDialog alertDialog = alertDialogBuilder.create();
alertDialog.show();
}

1

Importar alerta personalizada:

LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.dse_location_list_filter, null);
final Dialog dialog = new Dialog(Acitvity_name.this);
dialog.setContentView(view);
dialog.setCancelable(true);
dialog.setCanceledOnTouchOutside(true);
dialog.show();
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.