Dialog and AlertDialog with custom layout on Android
In this post I will show you how to create custom dialog on Android using a layout created by us, that is, create a custom alert by adding elements such as EditText, Button, etc.
Custom alerts on Android serve to display an alert that is not a confirmation alert, since we can define a custom layout.
To achieve this we will use the Dialog and AlertDialog.Builder classes.
Custom alert on Android with AlertDialog
The first approach is to create an alert and add views or components. We begin by defining a Layout:
LinearLayout layout = new LinearLayout (MainActivity.this);
Then we create a component, for example, an EditText:
final EditText editTextNombre = new EditText (MainActivity.this);
We add it to the layout like this:
layout.addView (editTextNombre);
We can create all the necessary components and add them to the layout. Next, we create an AlertDialog:
final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
builder
.setTitle("El título")
.setNegativeButton("Cancelar", null)
.setPositiveButton("OK", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(MainActivity.this, "Click en ok", Toast.LENGTH_LONG).show();
}
});
final AlertDialog alertDialogPersonalizado = builder.create();We can set the title, the negative button and so on.
As you can see, it is a normal alert, we can even add listeners when the user clicks on the buttons that the alert has by default.
The important part that sets the custom view is as follows:
alertDialogPersonalizado.setView(layout);
// después mostrarla:
alertDialogPersonalizado.show();We call setView and pass the layout. With this we will have defined our alert, but we have not shown it yet. To show it we simply invoke show.
The complete code to show a custom alert on Android looks like this:
LinearLayout layout = new LinearLayout(MainActivity.this);
layout.setOrientation(LinearLayout.VERTICAL);
final EditText editTextNombre = new EditText(MainActivity.this);
editTextNombre.setHint("Nombre");
layout.addView(editTextNombre);
final EditText editTextPass = new EditText(MainActivity.this);
editTextPass.setInputType(EditorInfo.TYPE_TEXT_VARIATION_PASSWORD);
editTextPass.setHint("Contraseña");
layout.addView(editTextPass);
final AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
builder
.setTitle("El título")
.setNegativeButton("Cancelar", null)
.setPositiveButton("OK", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(MainActivity.this, "Click en ok", Toast.LENGTH_LONG).show();
}
});
final AlertDialog alertDialogPersonalizado = builder.create();
alertDialogPersonalizado.setView(layout);
// después mostrarla:
alertDialogPersonalizado.show();The disadvantages of this is that the layout is not 100% customized as it still retains the buttons, and it is tedious to add component by component; That is why we will see the second approach.
Custom dialog on Android using Dialog
In this mode we will use an XML layout to display it in an android dialog. The code is simpler. All we have to do is the following:
final Dialog dialogPersonalizado = new Dialog(MainActivity.this);
dialogPersonalizado.setContentView(R.layout.dialogo_password_ajustes);Thanks to the setContentView method we can set a layout that will define the view for the dialog.
Then, if we have elements in our layout and want to get a reference to them, we call findViewById but from the dialog. For example:
// Podemos obtener los elementos dentro del layout ;)
Button btnAlertaPasswordOk = dialogPersonalizado.findViewById(R.id.btnAlertaPasswordOk);
btnAlertaPasswordOk.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Ok en botón", Toast.LENGTH_SHORT).show();
}
});By the way, the layout is as follows:
<?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"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="10sp"
android:paddingTop="10sp"
android:paddingRight="10sp">
<EditText
android:id="@+id/editText"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:ems="10"
android:hint="Contraseña"
android:inputType="textPassword"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/btnAlertaPasswordOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="OK"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/editText" />
<Button
android:id="@+id/btnAlertaPasswordCancelar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Cancelar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/editText" />
</androidx.constraintlayout.widget.ConstraintLayout>I know, the custom layout is very simple, but it can be extended and all the elements can be placed inside it just like another layout.
We can add listeners to the elements and everything that is normally done as if they were normal elements obtained in an activity or fragment.
Finally, remember to show the custom alert when you need it:
dialogPersonalizado<span class="pl-k">.</span>show();
The complete code looks like this:
final Dialog dialogPersonalizado = new Dialog(MainActivity.this);
dialogPersonalizado.setContentView(R.layout.dialogo_password_ajustes);
// Podemos obtener los elementos dentro del layout ;)
Button btnAlertaPasswordOk = dialogPersonalizado.findViewById(R.id.btnAlertaPasswordOk);
btnAlertaPasswordOk.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Ok en botón", Toast.LENGTH_SHORT).show();
}
});
// Después mostrarla:
dialogPersonalizado.show();A more complex layout of a custom alert on Android
You can add all the views that you want. Let’s see another example:
<?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"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="10sp"
android:paddingTop="10sp"
android:paddingRight="10sp">
<TextView
android:id="@+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Ajustes"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tvHost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="@string/host"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView9" />
<EditText
android:id="@+id/etAlertaAjustesHost"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:gravity="start|top"
android:hint="@string/host"
android:inputType="textMultiLine"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tvHost" />
<TextView
android:id="@+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="@string/zona_horaria"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/etAlertaAjustesHost" />
<EditText
android:id="@+id/etAlertaAjustesZonaHoraria"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="@string/zona_horaria"
android:inputType="textPersonName"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView11" />
<Button
android:id="@+id/btnAlertaAjustesGuardar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="@string/guardar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/etAlertaAjustesZonaHoraria" />
</androidx.constraintlayout.widget.ConstraintLayout>When we compile it, we have this:
In this way we can create custom dialogs and alerts on Android.
I must say that from the point of view of ui the alerts should be very simple, but sometimes a custom alert on Android is required, and that’s why I wrote this post.
