Visão geral dos widgets de apps

Os widgets são um aspecto essencial da personalização da tela inicial. Você pode pensar nelas como visualizações resumidas dos dados e funcionalidades mais importantes de um app que podem ser acessadas diretamente na tela inicial do usuário. Os usuários podem mover os widgets pelos painéis da 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 seguir. Para criar um widget de app usando as APIs Remote View e layouts XML, consulte Criar um widget simples. Para criar um widget usando APIs do estilo Kotlin e 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 de clima mostrando Tóquio como
            predominantemente nublado, 14 graus, e a temperatura projetada a partir das
            16h até as 19h
Figura 1. Um widget de informações de um app meteorológico.

Os widgets de informação normalmente mostram elementos de informações cruciais e monitoram como essas informações mudam com o tempo. Exemplos de widgets de informação são os de previsão do tempo, de relógio ou de placares de jogos. Tocar nos widgets de informação normalmente 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 na exibição de 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 a tela verticalmente.

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

  • Navegar pela coleção.
  • Abrir um elemento da coleção na visualização de detalhes no app associado.
  • Interação com elementos, como marcar como concluídos, com suporte a botões compostos no Android 12 (nível 31 da API).

Widgets de controle

Um widget de um app chamado "Lista de luzes", mostrando chaves
            de alternância com rótulos "Quarto", "Cozinha" e "Sala de estar", com os dois primeiros
            desativados.
Figura 4. Exemplo de um widget de controle.

O principal objetivo 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. Pense neles como controles remotos para um app. Um exemplo de widget de controle é um widget de automação residencial que permite aos usuários ligar ou desligar 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 "Artist" e "Example music", respectivamente.
Figura 5. Exemplo de widget de app de música.

Embora alguns widgets representem um dos tipos nas seções anteriores (informações, coleção ou controle), muitos 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á tocando no momento, como um widget de informações.

Ao planejar o widget, projete com base em um dos tipos base 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 aos comandos de voz do usuário. É possível configurar os widgets para atender às Ações do app, permitindo que os usuários recebam respostas rápidas e experiências interativas de apps em plataformas do Google Assistente, como Android e Android Auto. Para mais detalhes sobre o fulfillment de widgets para o Google Assistente, consulte Integrar Ações no app com widgets do Android.

Limitações de widgets

Embora os widgets possam ser entendidos como "mini apps", é necessário compreender que há algumas limitações importantes antes de projetar seu widget.

Gestos

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

Os únicos gestos disponíveis para widgets são o toque e o deslizar vertical.

Elementos

Devido às limitações de gestos disponíveis para widgets, alguns blocos de criação da 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 Oferecer 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 detalhes mais ricos dentro do app. Podemos dizer que 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 que o widget mostra.

Além do conteúdo de informações, considere fazer com que o 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 amplia 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 ao usuário criar novo conteúdo para um app, como um novo documento ou uma nova mensagem.

  • Abra o app no nível superior:tocar em um elemento de informação geralmente leva o usuário a 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. O uso do ícone do aplicativo para essa funcionalidade também pode fornecer ao widget uma identidade clara se os dados mostrados forem ambíguos.

Redimensionamento de widgets

Widget padrão do Relógio do Google
Figura 6. Widget padrão do Relógio do Google.

Toque e pressione um widget redimensionável e solte-o para ativar o 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 da tela inicial. É possível decidir se o widget pode ser redimensionado livremente ou se está restrito a mudanças de tamanho 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 inicial.

Planeje uma estratégia de redimensionamento para o widget de acordo com o tipo que você está criando. Os widgets de coleção baseados em lista ou grade geralmente são simples, porque o redimensionamento deles expande ou reduz a área de rolagem vertical. Seja qual for o tamanho do widget, o usuário ainda poderá rolar todos os elementos de informação para vê-los.

Os widgets de informação exigem mais planejamento prático, porque 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 pela 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 conforme o widget aumenta.

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


Exemplo de widget de clima em um tamanho "médio" de 5 x 2, incluindo toda a
            interface do tamanho da grade 3 x 2, além do rótulo "parcialmente nublado" e
            as temperaturas previstas das 16h às 19h
Figura 8. Exemplo de widget de clima em uma grade de 5 x 2 com tamanho "médio".


Exemplo de widget de clima em um tamanho "grande" 5x4, incluindo toda a interface 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 clima no tamanho 'large' de grade 5x4.

Para cada tamanho de widget, determine a quantidade de informações do seu app que é exibida. Para tamanhos menores, concentre-se nas informações essenciais e adicione informações contextuais conforme o widget aumenta horizontal e verticalmente.

Considerações sobre layout

Pode ser tentador definir o layout dos seus widgets de acordo com as dimensões da grade de posicionamento de um dispositivo que você use para 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 tamanhos específicos 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 o widget pode se redesenhar.
  • A partir do Android 12, é possível 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 se torne útil. Pense em um widget de e-mail em que o usuário precisa selecionar a pasta de e-mails antes que a caixa de entrada seja exibida ou um widget de foto estática em que o usuário precisa definir uma imagem da galeria para exibição. Os widgets do Android mostram as opções de configuração logo após o usuário inserir o widget em uma tela inicial.

Lista de verificação do design de widgets

  • Concentre-se em pequenas porções de informações relevantes no seu widget. Expanda as informações no app.
  • Escolha o tipo certo de widget para sua finalidade.
  • Planeje como o conteúdo do widget vai se adaptar a diferentes tamanhos.
  • Faça com que o layout do widget seja independente da orientação e do dispositivo, garantindo que ele possa ser esticado e contraído.
  • Verifique se o widget precisa de mais configurações.