Búsqueda de sitios web

Diálogo de alerta de Android usando Kotlin

En este tutorial, analizaremos los diálogos de alerta y los implementaremos en nuestra aplicación de Android usando Kotlin.

Diálogos de alerta

Alert Dialog es una ventana que aparece en la pantalla. Por lo general, muestran alguna información y solicitan una acción del usuario. Hay tres componentes principales que crean un cuadro de diálogo de alerta.

  • Texto del título
  • Texto del mensaje
  • Botones: hay tres tipos de botones: Positivo, Negativo y Neutro

Para crear un AlertDialog usamos la clase interna AlertDialog.Builder.

val alertDialogBuilder = AlertDialog.Builder(this)

Pasamos el contexto dentro del constructor. Opcionalmente, podemos pasar otro parámetro, el estilo de diálogo de alerta.

Métodos de diálogo de alerta

Algunos de los métodos que se pueden usar en un AlertDialog.

  • establecer título
  • establecer mensaje
  • conjuntoIcono
  • setCustomTitle: aquí puede pasar una vista personalizada que se colocará en lugar de la parte del título en el cuadro de diálogo de alerta.
  • setPositiveButton: aquí pasamos el nombre de la cadena, así como el botón, el método de devolución de llamada.
  • setView: se usa para agregar una vista personalizada dentro del cuadro de diálogo de alerta.
  • setList: se utiliza para establecer una matriz de cadenas que se mostrarían en forma de lista.
  • setMultiChoiceList: nuevamente podemos establecer una matriz, pero esta vez podemos seleccionar varios elementos de la lista gracias a CheckBox.
  • setPositiveButtonIcon: establece un icono junto al botón
  • show(): se usa para mostrar AlertDialog
  • setDismissListener: dentro de esto, puede configurar la lógica para que se active cuando se cierre el cuadro de diálogo de alerta.
  • setShowListener: establece la lógica que se activará cuando se descarte el cuadro de diálogo de alerta.
  • setCancelable: requiere un valor booleano. De forma predeterminada, todos los cuadros de diálogo de alerta se pueden cancelar al hacer clic en un botón o tocar fuera. Si este método se establece en falso, debe cancelar explícitamente el cuadro de diálogo mediante el método dialog.cancel().

Diálogo de alerta Código Kotlin

Para usar AlertDialog en su proyecto de Android Studio, importe la siguiente clase.

import android.support.v7.app.AlertDialog;

El siguiente código de Kotlin se usa para crear un cuadro de diálogo de alerta simple.

val builder = AlertDialog.Builder(this)
builder.setTitle("Androidly Alert")
builder.setMessage("We have a message")
//builder.setPositiveButton("OK", DialogInterface.OnClickListener(function = x))

builder.setPositiveButton(android.R.string.yes) { dialog, which ->
    Toast.makeText(applicationContext,
            android.R.string.yes, Toast.LENGTH_SHORT).show()
}
        
builder.setNegativeButton(android.R.string.no) { dialog, which ->
    Toast.makeText(applicationContext,
            android.R.string.no, Toast.LENGTH_SHORT).show()
}

builder.setNeutralButton("Maybe") { dialog, which ->
    Toast.makeText(applicationContext,
            "Maybe", Toast.LENGTH_SHORT).show()
}
builder.show()

builder.show() muestra el diálogo de alerta en la pantalla. Dentro de la función setPositiveButton, pasamos el texto del botón junto con una función de Kotlin que se activa cuando se hace clic en ese botón. La función es parte de la interfaz DialogInterface.OnClickListener(). El tipo de función es (DialogInterface, Int) -> Unit. DialogInterface es una instancia de Dialog e Int es la identificación del botón en el que se hace clic. En el código anterior, hemos representado esta función como una función Kotlin de orden superior. El dialog y which representan los dos argumentos. Podemos mejorar la función pasando _ si no se usan los argumentos. Las funciones se verían así:

builder.setPositiveButton(android.R.string.yes) { _,_ ->
            Toast.makeText(applicationContext,
                    android.R.string.yes, Toast.LENGTH_SHORT).show()
        }

Alternativamente, también podemos mostrar el Diálogo a través de la instancia de la clase AlertDialog. Reemplace builder.show() con:

val alertDialog = builder.create()
alertDialog.show()

En lugar de definir las funciones de escucha de clic de botón para cada uno de los botones, también podemos definir las funciones de orden superior por separado.

val positiveButtonClick = { dialog: DialogInterface, which: Int ->
    Toast.makeText(applicationContext,
            android.R.string.no, Toast.LENGTH_SHORT).show()
}

Ahora configura esta propiedad val dentro de la función setPositiveButton de Kotlin como:

builder.setPositiveButton("OK", DialogInterface.OnClickListener(function = positiveButtonClick))
//or
builder.setPositiveButton(android.R.string.yes, positiveButtonClick)

Puede pasar un valor nulo en lugar de la función si no tiene la intención de mantener ninguna acción al hacer clic en el botón.

Kotlin tiene aún más poder para mejorar la legibilidad del código anterior.

Código de Kotlin de diálogo de alerta simple

Con la función with, podemos mejorar la legibilidad del código de Kotlin para crear un cuadro de diálogo de alerta.

fun basicAlert(view: View){

        val builder = AlertDialog.Builder(this)
        
        with(builder)
        {
            setTitle("Androidly Alert")
            setMessage("We have a message")
            setPositiveButton("OK", DialogInterface.OnClickListener(function = positiveButtonClick))
            setNegativeButton(android.R.string.no, negativeButtonClick)
            setNeutralButton("Maybe", neutralButtonClick)
            show()    
        }
        
        
    }

En la siguiente sección, crearemos nuestra aplicación de Android donde implementaremos las siguientes características en nuestro AlertDialog.

  • Cuadro de diálogo de alerta simple
  • Cuadro de diálogo de alerta con personalización de iconos y botones
  • Diálogo de alerta con lista
  • Cuadro de diálogo de alerta con lista de opciones múltiples
  • Diálogo de alerta con estilo
  • Diálogo de alerta con estilo personalizado
  • Diálogo de alerta con EditText

Estructura del proyecto de Android Studio

1. Código de diseño XML

El código para el diseño activity_main.xml se proporciona a continuación.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnBasicAlert"
        android:layout_width="wrap_content"
        android:onClick="basicAlert"
        android:layout_height="wrap_content"
        android:text="BASIC ALERT DIALOG" />


    <Button
        android:id="@+id/btnAlertWithIconsAndCustomize"
        android:layout_width="wrap_content"
        android:onClick="withIconAndCustomise"
        android:layout_height="wrap_content"
        android:text="WITH ICON AND CUSTOMIZATION" />

    <Button
        android:id="@+id/btnAlertWithItems"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="withItems"
        android:text="WITH ITEMS" />

    <Button
        android:id="@+id/btnAlertWithMultiChoiceList"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="withMultiChoiceList"
        android:text="WITH MULTI CHOICE LIST" />

    <Button
        android:id="@+id/btnAlertWithStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="withStyle"
        android:text="WITH STYLE" />


    <Button
        android:id="@+id/btnAlertWithCustomStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="withCustomStyle"
        android:text="WITH CUSTOM STYLE" />

    <Button
        android:id="@+id/btnAlertWithButtonCentered"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="withButtonCentered"
        android:text="WITH BUTTON CENTERED" />

    <Button
        android:id="@+id/btnAlertWithEditText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="withEditText"
        android:text="WITH EDIT TEXT" />


</LinearLayout>

Para cada uno de los botones, hemos establecido un atributo android:onClick con el nombre de la función. Estas funciones de Kotlin se activarían en la clase MainActivity.kt. Discutiremos cada uno de ellos uno a la vez.

2. Código de actividad principal de Kotlin

Ya hemos creado el primer cuadro de diálogo de alerta anterior. Veamos cómo se ve MainActivity.kt con él.

package net.androidly.androidlyalertdialog

import android.content.DialogInterface
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.app.AlertDialog
import android.view.View
import android.widget.Toast

class MainActivity : AppCompatActivity() {

    val positiveButtonClick = { dialog: DialogInterface, which: Int ->
        Toast.makeText(applicationContext,
                android.R.string.yes, Toast.LENGTH_SHORT).show()
    }
    val negativeButtonClick = { dialog: DialogInterface, which: Int ->
        Toast.makeText(applicationContext,
                android.R.string.no, Toast.LENGTH_SHORT).show()
    }
    val neutralButtonClick = { dialog: DialogInterface, which: Int ->
        Toast.makeText(applicationContext,
                "Maybe", Toast.LENGTH_SHORT).show()
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    fun basicAlert(view: View){

        val builder = AlertDialog.Builder(this)

        with(builder)
        {
            setTitle("Androidly Alert")
            setMessage("We have a message")
            setPositiveButton("OK", DialogInterface.OnClickListener(function = positiveButtonClick))
            setNegativeButton(android.R.string.no, negativeButtonClick)
            setNeutralButton("Maybe", neutralButtonClick)
            show()
        }


    }
}

3. Diálogo de alerta con iconos y personalización

val builder = AlertDialog.Builder(this)
        with(builder) {
            setTitle("Icon and Button Color")
            setMessage("We have a message")
            setPositiveButton("OK", null)
            setNegativeButton("CANCEL", null)
            setNeutralButton("NEUTRAL", null)
            setPositiveButtonIcon(resources.getDrawable(android.R.drawable.ic_menu_call, theme))
            setIcon(resources.getDrawable(android.R.drawable.ic_dialog_alert, theme))
        }
        val alertDialog = builder.create()
        alertDialog.show()

        val button = alertDialog.getButton(DialogInterface.BUTTON_POSITIVE)
        with(button) {
            setBackgroundColor(Color.BLACK)
            setPadding(0, 0, 20, 0)
            setTextColor(Color.WHITE)
        }

Usando getButton, podemos recuperar cualquiera de los botones configurando su respectiva constante. Una vez que se recupera el botón, podemos personalizarlo como se hizo anteriormente.

4. Diálogo de alerta con elementos

fun withItems(view: View) {

        val items = arrayOf("Red", "Orange", "Yellow", "Blue")
        val builder = AlertDialog.Builder(this)
        with(builder)
        {
            setTitle("List of Items")
            setItems(items) { dialog, which ->
                Toast.makeText(applicationContext, items[which] + " is clicked", Toast.LENGTH_SHORT).show()
            }

            setPositiveButton("OK", positiveButtonClick)
            show()
        }
    }

Dentro de los setItems pasamos el Kotlin Array. El argumento which representa el índice del elemento en el que se hizo clic en la lista.

5. Diálogo de Alerta con Lista de Opción Múltiple

fun withMultiChoiceList(view: View) {

        val items = arrayOf("Microsoft", "Apple", "Amazon", "Google")
        val selectedList = ArrayList<Int>()
        val builder = AlertDialog.Builder(this)

        builder.setTitle("This is list choice dialog box")
        builder.setMultiChoiceItems(items, null
        ) { dialog, which, isChecked ->
            if (isChecked) {
                selectedList.add(which)
            } else if (selectedList.contains(which)) {
                selectedList.remove(Integer.valueOf(which))
            }
        }

        builder.setPositiveButton("DONE") { dialogInterface, i ->
            val selectedStrings = ArrayList<string>()

            for (j in selectedList.indices) {
                selectedStrings.add(items[selectedList[j]])
            }

            Toast.makeText(applicationContext, "Items selected are: " + Arrays.toString(selectedStrings.toTypedArray()), Toast.LENGTH_SHORT).show()
        }

        builder.show()

    }

En el código anterior, guardamos las opciones en una lista de matriz de enteros y las recuperamos nuevamente para mostrarlas en el mensaje Toast.

6. Diálogo de alerta con estilo

fun withStyle(view: View) {

        val builder = AlertDialog.Builder(ContextThemeWrapper(this, android.R.style.Holo_SegmentedButton))

        with(builder)
        {
            setTitle("Androidly Alert")
            setMessage("We have a message")
            setPositiveButton("OK", DialogInterface.OnClickListener(function = positiveButtonClick))
            setNegativeButton(android.R.string.no, negativeButtonClick)
            setNeutralButton("Maybe", neutralButtonClick)
            show()
        }
    }

Si no utiliza ContextThemeWrapper, el cuadro de diálogo de alerta se mostrará en pantalla completa.

7. Diálogo de alerta con estilo personalizado

Agregue el siguiente código en el archivo styles.xml:

<style name="AlertDialogCustom" parent="@android:style/Theme.Material.Dialog">
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textStyle">bold</item>
        <item name="android:headerDividersEnabled">true</item>
        <item name="android:background">@android:color/holo_blue_dark</item>
    </style>

La siguiente es la función de Kotlin:

fun withCustomStyle(view: View) {

        val builder = AlertDialog.Builder(ContextThemeWrapper(this, R.style.AlertDialogCustom))

        with(builder)
        {
            setTitle("Androidly Alert")
            setMessage("We have a message")
            setPositiveButton("OK", DialogInterface.OnClickListener(function = positiveButtonClick))
            setNegativeButton(android.R.string.no, negativeButtonClick)
            setNeutralButton("Maybe", neutralButtonClick)
            show()
        }

    }

8. Diálogo de alerta con botón centrado

fun withButtonCentered(view: View) {

        val alertDialog = AlertDialog.Builder(this).create()
        alertDialog.setTitle("Title")
        alertDialog.setMessage("Message")

        alertDialog.setButton(AlertDialog.BUTTON_POSITIVE, "Yes"
        ) { dialog, which -> dialog.dismiss() }

        alertDialog.setButton(AlertDialog.BUTTON_NEGATIVE, "No"
        ) { dialog, which -> dialog.dismiss() }
        alertDialog.show()

        val btnPositive = alertDialog.getButton(AlertDialog.BUTTON_POSITIVE)
        val btnNegative = alertDialog.getButton(AlertDialog.BUTTON_NEGATIVE)

        val layoutParams = btnPositive.layoutParams as LinearLayout.LayoutParams
        layoutParams.weight = 10f
        btnPositive.layoutParams = layoutParams
        btnNegative.layoutParams = layoutParams
    }

9. Diálogo de alerta con texto de edición

El código para el diseño personalizado alert_dialog_with_edittext.xml se proporciona a continuación:

<?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">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter the text here"/>

</LinearLayout>

fun withEditText(view: View) {
        val builder = AlertDialog.Builder(this)
        val inflater = layoutInflater
        builder.setTitle("With EditText")
        val dialogLayout = inflater.inflate(R.layout.alert_dialog_with_edittext, null)
        val editText  = dialogLayout.findViewById<EditText>(R.id.editText)
        builder.setView(dialogLayout)
        builder.setPositiveButton("OK") { dialogInterface, i -> Toast.makeText(applicationContext, "EditText is " + editText.text.toString(), Toast.LENGTH_SHORT).show() }
        builder.show()
    }

Descargar el proyecto de Android Studio: AndroidlyAlertDialog

Artículos relacionados: