Para criar layouts de widget eficazes, primeiro identifique o conteúdo principal. O layout determina como as informações e os elementos interativos são organizados no widget. O Android oferece vários layouts pré-criados para widgets de barra de ferramentas, texto, lista e grade para simplificar esse processo.
Texto
Os layouts de texto são ideais para mostrar informações concisas. Melhore o apelo visual do widget incluindo uma imagem ao lado do texto.
Ideal para títulos, atualizações de status, descrições curtas ou qualquer cenário onde uma única linha de texto transmita a mensagem de maneira eficaz.
Inclua uma imagem para aumentar o impacto visual. Para mais informações, consulte Pontos de interrupção para saber como adaptar esse layout a diferentes tamanhos de tela.
Barras de ferramentas
Use layouts de barra de ferramentas para oferecer aos usuários acesso rápido a tarefas usadas com frequência no app, em um layout flexível que se adapta a tamanhos de widget.
Um layout de barra de ferramentas de pesquisa é projetado intencionalmente para focar a pesquisa como uma ação principal na barra de ferramentas. Outros botões úteis podem oferecer acesso rápido a funções usadas com frequência.
As barras de ferramentas apresentam a marca do app seguida de botões para as tarefas mais usadas que são ideais para configurações alternáveis ou links de tarefas. Ao redimensionar, as opções menos usadas podem ser ocultadas em favor de ações mais comuns. Use Pontos de interrupção para adicionar um novo botão clicável mínimo de 48 dp quando houver espaço.
Listas
Use layouts de lista para organizar vários itens em um formato claro e verificável. Isso é ideal para manchetes de notícias, listas de tarefas ou mensagens. Organize o conteúdo em uma lista estruturada e verificável. Escolha entre a apresentação em contêiner ou sem contêiner com base nas necessidades de conteúdo.
Listas de texto e imagem verificáveis são perfeitas para mostrar vários tipos de conteúdo, como manchetes de notícias, playlists com capas de álbuns ou mensagens.
O layout da lista de verificação é perfeito para mostrar tarefas, oferecendo destinos de toque claros para que os usuários marquem rapidamente os itens como concluídos.
Forneça um agrupamento de controle intuitivo com listas de ações, em que os estados visuais ativado/desativado oferecem feedback imediato sobre os status dos itens.
Ideal para mostrar imagens imersivas de sangria total no Android 17 e mais recentes, esse layout usa a rolagem de ajuste para garantir que cada elemento filho esteja perfeitamente alinhado à altura do contêiner do widget.
Grade
Apresente imagens em uma grade compacta, flexível e visualmente rica com rótulos opcionais. Use colunas e linhas que se adaptam a diferentes tamanhos de tela.
Crie galerias de imagens roláveis e visualmente impactantes usando grades somente de imagens. As linhas e colunas se adaptam automaticamente a vários tamanhos de tela para apresentação ideal.
Também é possível incorporar rótulos e descrições de texto, enriquecendo o conteúdo da grade de imagens com mais contexto e informações.
Amostras de código
A tabela a seguir mapeia cada layout canônico para a implementação correspondente do Jetpack Glance no repositório de amostras da plataforma Android no GitHub (link em inglês).
| Layout canônico | Categoria de layout | Arquivo de implementação de amostra |
|---|---|---|
| Somente texto | Texto | LongTextAppWidget.kt |
| Texto e imagem | Texto | TextWithImageAppWidget.kt |
| Barra de ferramentas de pesquisa | Barras de ferramentas | SearchToolBarAppWidget.kt |
| Barra de ferramentas (padrão) | Barras de ferramentas | ToolBarAppWidget.kt |
| Lista de texto e imagem | Listas | ImageTextListAppWidget.kt |
| Lista de verificação | Listas | CheckListAppWidget.kt |
| Lista de ações | Listas | ActionListAppWidget.kt |
| Rolagem de ajuste de sangria total | Listas | FullBleedImageAppWidget.kt |
| Somente imagem | Grade | ImageGridAppWidget.kt |
| Imagem e texto | Grade | ImageGridAppWidget.kt |