Visão geral dos widgets de apps

Os widgets são um aspecto essencial da personalização da tela inicial. Pense nelas como visualizações resumidas dos dados e da funcionalidade 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 compatível, redimensioná-los para personalizar a quantidade de informações no widget de acordo com a preferência.

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 de remoção de visualização e layouts XML, consulte Criar um widget simples. Para criar um widget usando as APIs de 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 previsão do tempo mostrando Tóquio como predominantemente nublado, 14 graus e a temperatura projetada das 16h às 19h
Figura 1. Um widget de informações de um app de previsão do tempo.

Os widgets de informação geralmente exibem elementos informativos cruciais e rastreiam como essas informações mudam ao longo do tempo. Exemplos de widgets de informação são os de clima, de relógio ou de acompanhamento de placares esportivos. Tocar em widgets de informações 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 verticalmente.

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

  • Navegar pela coleção.
  • Abertura de um elemento da coleção na visualização de detalhes no app associado.
  • Interagir com elementos, por exemplo, marcá-los 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", exibindo chaves "Quarto", "Cozinha" e "Sala de estar", com os dois primeiros botões 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 pela tela inicial sem precisar abrir o app. Pense neles como controles remotos para um app. Um exemplo de widget de automação residencial é um widget de automação residencial que permite acender ou apagar 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 em geral mostrando botões para "Não gostei", "Voltar", "Reproduzir/pausar", "Avançar" e "Gostei". O artista e
            a faixa são listados como "Artista" e "Exemplo de música", 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 são híbridos que combinam elementos de tipos diferentes. 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 tocada, como um widget de informações.

Ao planejar seu widget, projete com base em 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 exibido pelo Google Assistente em resposta a comandos de voz do usuário. Você pode configurar seus widgets para realizar Ações no app, permitindo que os usuários recebam respostas rápidas e experiências interativas de apps nas plataformas do Google Assistente, como Android e Android Auto. Para saber mais sobre o fulfillment de widgets do Google Assistente, consulte Integrar Ações no app com widgets do Android.

Limitações de widgets

Embora os widgets possam ser entendidos como "miniapps", há determinadas limitações que é importante entender antes de criar seu widget.

Gestos

Como os widgets ficam na tela inicial, eles precisam coexistir com a navegação estabelecida nela. 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 horizontalmente entre telas, esse gesto já é executado na tela inicial para navegar entre elas.

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

Elementos

Devido às limitações de gestos disponíveis para widgets, alguns elementos básicos da interface que dependem de gestos restritos não estão disponíveis para widgets. Para conferir uma lista completa de elementos básicos 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 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. Você pode dizer que o widget é a informação "lanche", enquanto o app é a "refeição". Confira se o app mostra mais detalhes sobre um item de informação do que o que o widget exibe.

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

Bons candidatos para links de navegação em widgets são:

  • Funções generativas:são as funções que permitem ao usuário criar um 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 app oferece mais flexibilidade de navegação e pode substituir um atalho de app dedicado que os usuários usam 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 caso os dados mostrados sejam ambíguos.

Redimensionamento de widgets

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

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

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. Você pode decidir se o widget pode ser redimensionado livremente ou limitado a mudanças de tamanho horizontais ou verticais. Não é necessário oferecer suporte ao redimensionamento se o widget tiver um tamanho fixo inerentemente.

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 do widget 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 exibição.

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 determinado tamanho. É necessário ajustar dinamicamente o conteúdo e o layout do widget para o tamanho definido pelo usuário com a operação de redimensionamento.

No exemplo a seguir, o usuário pode redimensionar um widget de clima 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 indicando clima parcialmente nublado.
Figura 7. Exemplo de widget de previsão do tempo em um tamanho "pequeno" de grade 3x2.


Exemplo de widget de previsão do tempo em um tamanho "médio" de 5x2, incluindo toda a
            interface do tamanho de grade 3x2, mais o rótulo "principalmente nublado" e
            a previsão de temperatura 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 previsão do tempo em um tamanho "grande" de 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 previsão do tempo no tamanho "grande" de grade 5x4.

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

Considerações sobre layout

É tentador posicionar os widgets de acordo com as dimensões da grade de posicionamento de um dispositivo com que você desenvolve. Essa pode ser uma aproximação inicial útil, mas tenha em mente o seguinte:

  • Planejar a estratégia de redimensionamento de widgets considerando "intervalos 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. Portanto, é muito importante que seu widget seja flexível e possa acomodar mais ou menos espaço do que o previsto.
  • À medida que o usuário redimensiona um widget, o sistema responde com um intervalo de tamanho dp em que o widget pode ser redesenhado por conta própria.
  • A partir do Android 12, é possível fornecer atributos de tamanho mais refinados e layouts mais flexíveis. Isso inclui:

Configuração de widget por 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 para que a caixa de entrada seja exibida ou em um widget de fotos estáticas em que o usuário precisa atribuir uma imagem da galeria para ser exibida. Os widgets do Android mostram as opções de configuração logo após o usuário soltar 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 do seu app.
  • Escolha o tipo certo de widget para sua finalidade.
  • Planeje como o conteúdo do seu widget se adapta a tamanhos diferentes.
  • Faça com que o layout do widget seja independente da orientação e do dispositivo, garantindo que ele possa esticar e contrair.
  • Considere se o widget precisa de configuração adicional.