Visão geral dos widgets de apps

Experimente trabalhar com o Compose
O Jetpack Compose é o kit de ferramentas de interface recomendado para o Android. Aprenda a criar widgets usando APIs no estilo do Compose.

Os widgets são um aspecto essencial da personalização da tela inicial. Eles podem ser considerados visualizações rápidas dos dados e funcionalidades mais importantes de um app, acessíveis diretamente na tela inicial do usuário. Os usuários podem mover os widgets pelos painéis de tela inicial e, se disponível, redimensioná-los para personalizar a quantidade de informações no widget de acordo com a preferência deles.

Esta documentação apresenta os diferentes tipos de widgets que você pode criar e os princípios de design a serem seguidos. Para criar um widget de app usando as APIs Remote View e layouts XML, consulte Criar um widget simples. Para criar um widget usando Kotlin e APIs no estilo do Compose, consulte Jetpack Glance.

Tipos de widget

Ao planejar seu widget, pense no tipo que você quer criar. Os widgets geralmente se enquadram em uma das seguintes categorias:

Widgets de informação

Exemplo de widget do clima mostrando Tóquio como predominantemente nublado, 14 graus, e a temperatura projetada começando às 16h até as 19h
Figura 1. Um widget de informações de um app de previsão do tempo.

Os widgets de informações geralmente mostram elementos de informações cruciais e monitoram como essas informações mudam com o tempo. Exemplos de widgets de informações são os de previsão do tempo, de relógio ou de placares de jogos. Tocar nos widgets de informações geralmente inicia o app associado e abre uma visualização detalhada das informações do widget.

Widgets de coleção

Os widgets de coleção são especializados em mostrar vários elementos do mesmo tipo, como uma coleção de imagens de um app de galeria, uma coleção de artigos de um app de notícias ou uma coleção de e-mails ou mensagens de um app de comunicação. Os widgets de coleção podem rolar verticalmente.

Os widgets de coleção geralmente se concentram nos seguintes casos de uso:

  • Navegação pela coleção.
  • Abertura de um elemento da coleção para a visualização de detalhes no app associado.
  • Interação com elementos, como marcá-los como concluídos, com suporte a botões compostos no Android 12 (nível 31 da API).

Widgets de controle

Um widget para um app chamado "Lista de luzes", mostrando chaves de alternância
            rotuladas como "Quarto", "Cozinha" e "Sala de estar", com as duas primeiras
            chaves de alternância desligadas
Figura 4. Exemplo de um widget de controle.

O objetivo principal de um widget de controle é mostrar funções usadas com frequência para que o usuário possa acioná-las na tela inicial sem precisar abrir o app. Eles podem ser considerados controles remotos de um app. Um exemplo de widget de controle é um widget de controle doméstico que permite que os usuários acendam ou apaguem as luzes da casa.

A interação com um widget de controle pode abrir uma visualização de detalhes associada no app. Isso depende se a função do widget de controle gera dados, como no caso de um widget de pesquisa.

Widgets híbridos

Um app de música geral mostrando botões de "não gostei", voltar, reproduzir/pausar, avançar e "gostei". O artista e a música são listados como "Artista" e "Música de exemplo", respectivamente.
Figura 5. Exemplo de um widget de app de música.

Embora alguns widgets representem um dos tipos nas seções anteriores (informações, coleção ou controle), muitos widgets são híbridos que combinam elementos de diferentes tipos. Por exemplo, um widget de player de música é principalmente um widget de controle, mas também mostra ao usuário qual faixa está sendo reproduzida, como um widget de informações.

Ao planejar seu widget, crie um design em torno de um dos tipos básicos e adicione elementos de outros tipos conforme necessário.

Integrar widgets ao Google Assistente

Qualquer tipo de widget pode ser mostrado pelo Google Assistente em resposta a comandos de voz do usuário. Você pode configurar seus widgets para atender às Ações no app, permitindo que os usuários recebam respostas rápidas e experiências interativas de apps em plataformas do Assistente, como o Android e o Android Auto. Para mais detalhes sobre o atendimento de widgets para o Assistente, consulte Integrar ações no app com widgets do Android.

Limitações de widgets

Embora os widgets possam ser entendidos como "mini apps", há algumas limitações importantes que precisam ser compreendidas antes de criar o widget.

Gestos

Como os widgets ficam na tela inicial, eles precisam coexistir com a navegação estabelecida ali. Isso limita o suporte a gestos disponível em um widget em comparação com um app em tela cheia. Embora os apps possam permitir que os usuários naveguem entre telas horizontalmente, esse gesto já é usado na tela inicial para navegar entre as telas iniciais.

Os únicos gestos disponíveis para widgets são tocar e deslizar verticalmente.

Elementos

Dadas as limitações de gestos disponíveis para widgets, alguns blocos de criação de interface que dependem de gestos restritos não estão disponíveis para widgets. Para uma lista completa de blocos de criação compatíveis e mais informações sobre restrições de layout, consulte Criar o layout do widget e Fornecer layouts de widget flexíveis.

Diretrizes de design

Conteúdo dos widgets

Os widgets são uma ótima maneira de atrair um usuário para seu app, "anunciando" conteúdo novo e interessante que esteja disponível no app.

Assim como os teasers na primeira página de um jornal, os widgets consolidam e concentram as informações de um app e fornecem uma conexão com maiores detalhes dentro do aplicativo. O widget é o "aperitivo" das informações, enquanto o app é o "prato principal". Verifique se o app mostra mais detalhes sobre um item de informação do que o widget.

Além do conteúdo de informações, considere fazer com que seu widget forneça links de navegação para as áreas mais usadas do app. Isso permite que os usuários concluam tarefas mais rapidamente e ampliem o alcance funcional do app para a tela inicial.

Alguns links de navegação que você pode exibir nos widgets são os seguintes:

  • Funções geradoras:são as funções que permitem que o usuário crie novos conteúdos para um app, como um novo documento ou uma nova mensagem.

  • Abrir o app no nível superior:tocar em um elemento de informação geralmente leva o usuário para uma tela de detalhes de nível inferior. Fornecer acesso ao nível superior do seu aplicativo oferece mais flexibilidade de navegação e pode substituir um atalho de app dedicado, que os usuários usariam para navegar até o app pela tela inicial. Usar o ícone do aplicativo para essa funcionalidade também pode dar ao seu widget uma identidade clara, caso os dados mostrados sejam ambíguos.

Redimensionamento de widgets

Widget padrão do Google Clock
Figura 6. Widget padrão do Google Clock.

Tocar e manter pressionado um widget redimensionável e soltá-lo coloca o widget no modo de redimensionamento. Os usuários podem arrastar as alças ou os cantos do widget para definir o tamanho preferido.

O redimensionamento permite que os usuários ajustem a altura e a largura de um widget dentro das restrições da grade de posicionamento na tela inicial. É possível decidir se o widget pode ser redimensionado livremente ou se está restrito a mudanças de tamanho na horizontal ou vertical. Não é necessário oferecer suporte ao redimensionamento se o widget for inerentemente de tamanho fixo.

Permitir que os usuários redimensionem widgets tem benefícios importantes:

  • Eles podem ajustar a quantidade de informações que querem ver em cada widget.
  • Eles podem influenciar melhor o layout de widgets e atalhos nos painéis iniciais.

Planeje uma estratégia de redimensionamento para seu widget de acordo com o tipo de widget que você está criando. Os widgets de coleção baseados em lista ou grade geralmente são simples, porque o redimensionamento dele apenas expande ou reduz a área de rolagem vertical. Independentemente do tamanho do widget, o usuário ainda pode rolar todos os elementos de informação para a visualização.

Os widgets de informações exigem mais planejamento prático, já que não são roláveis, e todo o conteúdo precisa caber em um tamanho específico. Você precisa ajustar dinamicamente o conteúdo e o layout do widget para o tamanho que o usuário define por meio da operação de redimensionamento.

No exemplo a seguir, o usuário pode redimensionar um widget de previsão do tempo em três etapas, expondo informações mais detalhadas sobre o clima no local atual à medida que o widget cresce.

Exemplo de widget de clima no menor tamanho de grade 3x2, listando o nome do local (Tóquio), a temperatura (14°) e o símbolo que indica clima parcialmente nublado
Figura 7. Exemplo de widget de previsão do tempo em um tamanho "pequeno" de grade 3x2.


Exemplo de widget de clima em um tamanho "médio" de 5x2, incluindo toda a interface do usuário do tamanho de grade 3x2, além do rótulo "parcialmente nublado" e as temperaturas previstas das 16h às 19h
Figura 8. Exemplo de widget de previsão do tempo em um tamanho "médio" de grade 5x2.


Exemplo de widget de clima em um tamanho "grande" de 5x4, incluindo toda a interface do usuário dos tamanhos de grade 3x2 e 5x2, além de uma previsão do tempo de terça a sexta-feira
Figura 9. Exemplo de widget de previsão do tempo no tamanho "grande" de grade 5x4.

Para cada tamanho de widget, determine a quantidade de informações do app que é mostrada. Para tamanhos menores, concentre-se nas informações essenciais e adicione informações contextuais à medida que o widget cresce horizontal e verticalmente.

Considerações sobre layout

É tentador definir o layout dos seus widgets de acordo com as dimensões da grade de posicionamento de um dispositivo que você usa para o desenvolvimento. Essa pode ser uma aproximação inicial útil, mas tenha em mente os seguintes pontos:

  • Planejar sua estratégia de redimensionamento de widgets para segmentos de tamanho em vez de dimensões de grade variáveis gera resultados mais confiáveis.
  • O número, o tamanho e o espaçamento das células podem variar muito de acordo com o dispositivo. Por isso, é muito importante que seu widget seja flexível e possa acomodar mais ou menos espaço do que o previsto.
  • Conforme o usuário redimensiona um widget, o sistema responde com uma faixa de tamanho de dp na qual seu widget pode se redesenhar.
  • A partir do Android 12, você pode fornecer atributos de tamanho mais refinados e layouts mais flexíveis. Isso inclui:

Configuração de widgets pelos usuários

Às vezes, o usuário precisa configurar o widget antes que ele possa ser útil. Pense em um widget de e-mail em que o usuário precisa selecionar a pasta de e-mail antes que a caixa de entrada possa ser mostrada ou um widget de foto estática em que o usuário precisa atribuir uma imagem da galeria para ser mostrada. Os widgets do Android mostram as opções de configuração deles logo após o usuário inserir o widget em uma tela inicial.

Lista de verificação de design de widgets

  • Concentre-se em pequenas porções de informações relevantes no seu widget. Expanda as informações no seu app.
  • Escolha o tipo certo de widget para sua finalidade.
  • Planeje como o conteúdo do seu widget se adapta a diferentes tamanhos.
  • Faça com que o layout do widget seja independente da orientação e do dispositivo, garantindo que o layout possa aumentar e diminuir.
  • Considere se o widget precisa de alguma configuração adicional.