Mostrar mensagens pop-up ou solicitações de entrada do usuário
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
O componente Dialog mostra mensagens pop-up ou solicita a entrada do usuário em uma
camada acima do conteúdo principal do app. Ele cria uma experiência de interface interruptiva para
capturar a atenção do usuário.
Os casos de uso de uma caixa de diálogo são os seguintes:
Confirmar a ação do usuário, como excluir um arquivo.
Solicitar entrada do usuário, como em um app de lista de tarefas.
Apresentar uma lista de opções para seleção do usuário, como escolher um país na
configuração de perfil.
Essa implementação exige que o minSDK do projeto seja definido como nível 21 da API ou
mais recente.
Dependências
Criar uma caixa de diálogo de alerta
O elemento combinável AlertDialog oferece uma API conveniente para criar uma
caixa de diálogo com tema do Material Design. O exemplo a seguir implementa dois botões em
uma caixa de diálogo de alerta, um que dispensa a caixa de diálogo e outro que confirma a
solicitação:
Essa implementação implica um elemento combinável pai que transmite argumentos para o
elemento combinável filho desta forma:
Resultados
Figura 1. Uma caixa de diálogo de alerta com botões.
Pontos principais
AlertDialog tem parâmetros específicos para processar elementos específicos da
caixa de diálogo. Entre elas estão:
title: o texto que aparece na parte de cima da caixa de diálogo.
text: o texto que aparece centralizado na caixa de diálogo.
icon: o gráfico que aparece na parte de cima da caixa de diálogo.
onDismissRequest: a função chamada quando o usuário dispensa a caixa de diálogo,
como tocando fora dela.
dismissButton: um elemento combinável que serve como o botão de dispensa.
confirmButton: um elemento combinável que serve como o botão de confirmação.
Quando o usuário clica em um dos botões, a caixa de diálogo é fechada. Quando o usuário
clicar em "Confirmar", ele vai chamar uma função que também processa a confirmação. Neste exemplo, essas funções são onDismissRequest() e onConfirmRequest().
Nos casos em que a caixa de diálogo exige um conjunto de botões mais complexo, use o elemento combinável Dialog e o preencha de forma
mais livre.
Criar uma caixa de diálogo
Dialog é um elemento combinável básico que não fornece nenhum estilo ou
slots predefinidos para conteúdo. É um contêiner simples que você precisa
preencher com um contêiner como Card. Confira abaixo alguns dos principais
parâmetros de uma caixa de diálogo:
onDismissRequest: a lambda chamada quando o usuário fecha a caixa de diálogo.
properties: uma instância de DialogProperties que oferece um
escopo adicional para personalização.
Criar uma caixa de diálogo básica
O exemplo a seguir é uma implementação básica do elemento combinável Dialog. Observe
que ele usa um Card como o contêiner secundário. Sem o Card, o componente Text
seria mostrado sozinho acima do conteúdo principal do app.
Resultado
Quando a caixa de diálogo está aberta, o conteúdo principal do app abaixo dela aparece
escurecido e esmaecido:
Figura 2. Caixa de diálogo mínima.
Criar uma caixa de diálogo avançada
Confira a seguir uma implementação mais avançada do elemento combinável Dialog. Nesse
caso, o componente implementa manualmente uma interface semelhante ao exemplo
AlertDialog anterior.
Resultado
Figura 3. Uma caixa de diálogo que inclui uma imagem.
Coleções que contêm este guia
Este guia faz parte destas coleções selecionadas de guias rápidos que abrangem
metas mais amplas de desenvolvimento para Android:
Texto de exibição
O texto é uma peça central de qualquer interface. Descubra diferentes maneiras
de apresentar texto no app para oferecer uma experiência agradável ao usuário.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2025-02-06 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 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)"]]