Visão geral dos widgets de apps

Experimente trabalhar com o Compose
O Jetpack Compose é o kit de ferramentas de IU recomendado para 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 são como 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 widgets pelos painéis da tela inicial e, se houver suporte, redimensioná-los para ajustar a quantidade de informações no widget de acordo com as preferências deles.

Esta documentação apresenta os diferentes tipos de widgets que você pode criar e os princípios de design que precisa seguir. Para criar um widget de app usando as APIs Remote View e layouts XML, consulte Criar um widget básico. Para criar um widget usando as APIs de estilo do Kotlin e do Compose, consulte o 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 com céu predominantemente
            nublado, 14 graus e a temperatura prevista das
            16h às 19h
Figura 1. Um widget de informações de um app de clima.

Os widgets de informações geralmente mostram elementos de informações cruciais e acompanham como essas informações mudam ao longo do tempo. Exemplos de widgets de informações são os de clima, relógio ou acompanhamento de placares esportivos. Tocar em 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 fotos 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 ser rolados 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 detalhada no app associado.
  • Interagir com elementos, como marcá-los como concluídos, com suporte para botões compostos no Android 12 (nível 31 da API).

Widgets de controle

Um widget para um app chamado "Light list", que mostra chaves de ativação
            com os rótulos "Bedroom", "Kitchen" e "sala de estar", com as duas primeiras
            chaves desativadas
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 que os usuários acendam ou apaguem as luzes da casa.

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

Widgets híbridos

Um app de música geral mostrando botões para "não gostei",
            voltar, tocar/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 widget de um 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 e 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á tocando no momento, como um widget de informações.

Ao planejar o widget, use um dos tipos básicos como 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 seus widgets para atender às Ações no app, permitindo que os usuários recebam respostas rápidas e experiências no app interativas em plataformas do Google Assistente, como o Android e o Android Auto. Para mais detalhes sobre o fulfillment de widgets para o Google Assistente, consulte Integrar as Ações no app com widgets do Android.

Limitações de widgets

Embora os widgets possam ser entendidos como "miniaplicativos", há certas limitações que é importante entender antes de projetar 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 de tela cheia. Embora os apps permitam 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 toque e deslizar verticalmente.

Elementos

Devido às limitações de gestos disponíveis para widgets, alguns elementos de interface que dependem de gestos restritos não estão disponíveis para widgets. Para 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 Oferecer layouts de widget flexíveis.

Diretrizes de design

Siga estas diretrizes de design para criar uma experiência de widget envolvente, flexível e consistente na tela inicial.

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 nele.

Assim como as chamadas 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 avançados dentro dele. Pode-se dizer que o widget é o "petisco" de informações, enquanto o app é a "refeição". O app precisa mostrar mais detalhes sobre um item de informação do que o widget exibe.

Além do conteúdo de informações puras, considere fazer com que o widget forneça links de navegação para áreas usadas com frequência do app. Isso permite que os usuários concluam tarefas mais rapidamente e estende 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 conteúdo 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 a uma tela de detalhes de nível inferior. Oferecer acesso ao nível superior do aplicativo oferece mais flexibilidade de navegação e pode substituir um atalho de app dedicado que os usuários usam para navegar até o app na tela inicial. Usar o ícone do aplicativo para essa funcionalidade também pode dar ao widget uma identidade clara se os dados exibidos 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 mantenha pressionado um widget redimensionável e solte-o para colocar 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 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. Você pode 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 tiver um 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 da casa.

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 contrai a área de rolagem vertical. Independentemente do tamanho do widget, o usuário ainda pode rolar todos os elementos de informação para visualização.

Os widgets de informação exigem um planejamento mais preciso, 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 ao tamanho definido pelo usuário na operação de redimensionamento.

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

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
            tempo 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 5x2, incluindo toda a
            interface do tamanho de grade 3x2, além do rótulo "parcialmente nublado" e
            das temperaturas previstas das 16h às 19h
Figura 8. Exemplo de widget de clima em uma grade de 5x2 de tamanho médio.


Exemplo de widget de clima 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 clima no tamanho "grande" da grade 5x4.

Para cada tamanho de widget, determine quantas informações do app serão mostradas. 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 organizar os widgets de acordo com as dimensões da grade de posicionamento de um dispositivo que você usa para desenvolvimento. Essa pode ser uma aproximação inicial útil, mas lembre-se do seguinte:

  • Planejar sua estratégia de redimensionamento de widgets em "buckets de tamanho" em vez de dimensões de grade variáveis oferece os resultados mais confiáveis.
  • O número, o tamanho e o espaçamento das células podem variar muito de um dispositivo para outro. Por isso, é muito importante que o 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 um intervalo de tamanho em dp em que o widget pode ser redesenhado.
  • A partir do Android 12, é possível fornecer atributos de tamanho mais refinados e layouts mais flexíveis. Isso inclui:

Configuração de widgets 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 antes que a caixa de entrada possa ser mostrada ou em 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 logo depois que o usuário solta 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. Amplie as informações no app.
  • Escolha o tipo certo de widget para sua finalidade.
  • Planeje como o conteúdo do widget se adapta a diferentes tamanhos.
  • Para que o layout do widget seja independente da orientação e do dispositivo, verifique se ele pode ser estendido e contraído.
  • Considere se o widget precisa de mais configurações.