Mostrar mensajes emergentes o solicitudes de entrada del usuario
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
El componente Dialog muestra mensajes emergentes o solicita entradas del usuario en una capa sobre el contenido principal de la app. Crea una experiencia de IU interruptiva para captar la atención del usuario.
Entre los casos de uso de un diálogo, se incluyen los siguientes:
Confirmar la acción del usuario, como cuando se borra un archivo
Solicitar entradas del usuario, como en una app de listas de tareas pendientes
Presentar una lista de opciones para que el usuario las seleccione, como elegir un país en la configuración de un perfil
En este tema, se proporcionan las siguientes implementaciones:
Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.
Dependencias
Cómo crear un diálogo de alerta
El elemento componible AlertDialog proporciona una API conveniente para crear un diálogo con temas de Material Design. En el siguiente ejemplo, se implementan dos botones en un diálogo de alerta, uno que descarta el diálogo y otro que confirma su solicitud:
Esta implementación implica un elemento componible superior que pasa argumentos al elemento componible secundario de esta manera:
Resultados
Figura 1: Un diálogo de alerta con botones.
Puntos clave
AlertDialog tiene parámetros específicos para controlar elementos particulares del diálogo. Entre ellos, se incluyen los siguientes:
title: Es el texto que aparece en la parte superior del diálogo.
text: Es el texto que aparece centrado en el diálogo.
icon: Es el gráfico que aparece en la parte superior del diálogo.
onDismissRequest: Es la función a la que se llama cuando el usuario descarta el diálogo, por ejemplo, presionando fuera de él.
dismissButton: Es un elemento componible que funciona como botón para descartar.
confirmButton: Es un elemento componible que funciona como botón de confirmación.
Cuando el usuario hace clic en cualquiera de los botones, se cierra el diálogo. Cuando el usuario hace clic en Confirmar, se llama a una función que también controla la confirmación. En este ejemplo, esas funciones son onDismissRequest() y onConfirmRequest().
En los casos en que tu diálogo requiera un conjunto de botones más complejo, te recomendamos que uses el elemento componible Dialog y lo propagues de una manera más libre.
Cómo crear un diálogo
Dialog es un elemento componible básico que no proporciona ningún diseño ni ranuras predefinidas para el contenido. Es un contenedor sencillo que debes completar con un contenedor como Card. Los siguientes son algunos de los parámetros clave de un diálogo:
onDismissRequest: Es la lambda a la que se llama cuando el usuario cierra el diálogo.
properties: Es una instancia de DialogProperties que proporciona un alcance adicional para la personalización.
Crea un diálogo básico
El siguiente ejemplo es una implementación básica del elemento componible Dialog. Ten en cuenta que usa un Card como contenedor secundario. Sin Card, el componente Text aparecería solo sobre el contenido principal de la app.
Resultado
Ten en cuenta que, cuando el diálogo está abierto, el contenido principal de la app debajo de él aparece oscurecido y en gris:
Figura 2: Diálogo mínimo.
Cómo crear un diálogo avanzado
A continuación, se muestra una implementación más avanzada del elemento componible Dialog. En este caso, el componente implementa manualmente una interfaz similar al ejemplo anterior de AlertDialog.
Resultado
Figura 3: Un diálogo que incluye una imagen.
Colecciones que contienen esta guía
Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:
Texto visible
El texto es una pieza central de cualquier IU. Descubre las diferentes formas
en que puedes presentar texto en tu app para proporcionar una experiencia del usuario encantadora.
Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-02-06 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-02-06 (UTC)"],[],[],null,["\u003cbr /\u003e\n\nThe [`Dialog`](/reference/kotlin/androidx/compose/ui/window/package-summary#Dialog(kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function0)) component displays pop-up messages or requests user input on a\nlayer above the main app content. It creates an interruptive UI experience to\ncapture user attention.\n\nAmong the use cases for a dialog are the following:\n\n- Confirming user action, such as when deleting a file.\n- Requesting user input, such as in a to-do list app.\n- Presenting a list of options for user selection, like choosing a country in a profile setup.\n\nThis topic provides the following implementations:\n\n- [Alert](#alert)\n- [Basic dialog](#basic)\n- [Advanced dialog](#advanced)\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nCreate an Alert dialog\n\nThe [`AlertDialog`](/reference/kotlin/androidx/compose/material3/package-summary#AlertDialog(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.DialogProperties)) composable provides a convenient API for creating a\nMaterial Design themed dialog. The following example implements two buttons in\nan alert dialog, one that dismisses the dialog, and another that confirms its\nrequest:\n\nThis implementation implies a parent composable that passes arguments to the\nchild composable in this way:\n\nResults **Figure 1.** An alert dialog with buttons.\n\nKey points\n\n`AlertDialog` has specific parameters for handling particular elements of the\ndialog. Among them are the following:\n\n- `title`: The text that appears along the top of the dialog.\n- `text`: The text that appears centered within the dialog.\n- `icon`: The graphic that appears at the top of the dialog.\n- `onDismissRequest`: The function called when the user dismisses the dialog, such as by tapping outside of it.\n- `dismissButton`: A composable that serves as the dismiss button.\n- `confirmButton`: A composable that serves as the confirm button.\n\n- When the user clicks either of the buttons, the dialog closes. When the user\n clicks confirm, it calls a function that also handles the confirmation. In\n this example, those functions are `onDismissRequest()` and\n `onConfirmRequest()`.\n\n In cases where your dialog requires a more complex set of buttons, you may\n benefit from using the `Dialog` composable and populating it in a more\n freeform manner.\n\nCreate a dialog\n\n[`Dialog`](/reference/kotlin/androidx/compose/ui/window/package-summary#Dialog(kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function0)) is a basic composable that doesn't provide any styling or\npredefined slots for content. It is a straightforward container that you should\npopulate with a container such as `Card`. The following are some of the key\nparameters of a dialog:\n\n- **`onDismissRequest`**: The lambda called when the user closes the dialog.\n- **`properties`** : An instance of [`DialogProperties`](/reference/kotlin/androidx/compose/ui/window/DialogProperties) that provides some additional scope for customization.\n\n| **Caution:** You must manually specify the size and shape of `Dialog`. You also must provide an inner container.\n\nCreate a basic dialog\n\nThe following example is a basic implementation of the `Dialog` composable. Note\nthat it uses a `Card` as the secondary container. Without the `Card`, the `Text`\ncomponent would appear alone above the main app content.\n\nResult\n\nNote that when the dialog is open, the main app content beneath it appears\ndarkened and grayed out:\n**Figure 2.** Minimal dialog.\n\nCreate an advanced dialog\n\nThe following is a more advanced implemented of the `Dialog` composable. In this\ncase, the component manually implements a similar interface to the preceding\n`AlertDialog` example.\n| **Caution:** If you only need to display a two-button dialog as in this example, you should use `AlertDialog` and its more convenient API. However, if you want to create a more complex dialog, perhaps with forms and multiple buttons, you should use `Dialog` with custom content, as in the following example.\n\nResult **Figure 3.** A dialog that includes an image.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay text \nText is a central piece of any UI. Find out different ways you can present text in your app to provide a delightful user experience. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-text) \n\nRequest user input \nLearn how to implement ways for users to interact with your app by entering text and using other means of input. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/request-user-input) \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]