Mostrar mensagens pop-up ou solicitações de entrada do usuário

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.

Este tópico oferece as seguintes implementações:

Compatibilidade de versões

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

Uma caixa de diálogo de alerta aberta com botões de dispensa e confirmação.
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:

Uma caixa de diálogo que não contém nada além de um rótulo.
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

Uma caixa de diálogo com uma foto do Monte Feathertop, em Victoria. Abaixo da imagem, há um botão de dispensa e um de confirmação.
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.
Coleção de guias rápidos
Aprenda a implementar maneiras de os usuários interagirem com seu app inserindo texto e usando outras formas de entrada.
Coletânea de guias rápidos
Aprenda como as funções combináveis podem permitir que você crie componentes de interface bonitos com base no sistema de design do Material Design.
Coletânea de guias rápidos

Tem dúvidas ou feedback?

Acesse a página de perguntas frequentes e saiba mais sobre os guias rápidos ou entre em contato e conte o que você pensa.
Acessar as perguntas frequentes Enviar feedback