Um layout define a estrutura visual para que um usuário interaja com seu app, como em uma atividade. O Android oferece uma variedade de bibliotecas, pontos de partida canônicos e técnicas para exibir e posicionar conteúdo.
Aprendizados
Honre as áreas seguras do dispositivo, que incluem partes da interface, como cortes de tela, inserções de borda a borda, telas de borda, teclados de software e barras do sistema.
O que fazer:forneça um layout flexível para que os usuários interajam com o teclado.
Vídeo 1: como oferecer um layout flexível para interação dos usuários
Mantenha as interações essenciais, como a navegação principal, em uma área de tela acessível.
Figura 1. Os botões de ação flutuantes (FABs) oferecem um ponto de interação proeminente e acessível. Use a contenção para agrupar conteúdo relacionado e orientar o usuário pelo conteúdo e ações.
Figura 2:cards que usam contenção explícita para agrupar conteúdo com ações relacionadas Forneça um alinhamento consistente entre conteúdo semelhante e elementos da interface.
Não faça:atrapalhe a legibilidade com espaçamento inconsistente de elementos semelhantes, o que pode fazer com que os designs pareçam aleatórios.
O que fazer:estabeleça um espaçamento consistente entre elementos semelhantes.
Figura 3:não atrapalhe a legibilidade. Não se prenda a um layout vertical ou idealizado: considere diferentes proporções, classes de tamanho e resoluções que os usuários podem encontrar.
Não sobrecarregue o usuário com muitas ações por visualização.
Ao criar layouts personalizados, observe como o conteúdo deve ficar no layout usando termos de alinhamento, restrições ou gravidade. Inclua como as imagens devem responder ao contêiner para serem exibidas corretamente.
Partes de uma tela de app Android típica
A maioria dos apps Android consiste em regiões chamadas barras de sistema, área de navegação e corpo.
Barras do sistema
A barra de status e a barra de navegação, conhecidas coletivamente como barras do sistema, mostram informações importantes, como nível da bateria, hora e alertas de notificação, e permitem a interação direta com o dispositivo de qualquer lugar. Leia mais sobre as barras de sistema.
Região de navegação
A navegação representa as diferentes affordances que permitem ao usuário navegar no app e na plataforma Android ou acessar ações importantes.
Região do corpo
A região do corpo contém o conteúdo da tela. O conteúdo do corpo é composto por outros agrupamentos e parâmetros de layout. Ele precisa se estender por baixo das regiões de navegação e barras de sistema.
Declare WindowCompat.setDecorFitsSystemWindows(window, false) para
recuos de borda a borda.
Para determinar a composição e os padrões de navegação adequados para seu layout, tente entender como os usuários interagem com seu conteúdo e como eles navegam pela arquitetura de informações do app. Esse entendimento pode orientar seu design para ser mais focado no usuário, criando uma interface que os usuários possam usar.
Composição e estrutura do conteúdo
Crie um fluxo e ritmo flexíveis com uma estrutura e métodos de contenção para seu conteúdo.
Estrutura básica: use margens e colunas para proteções visuais
Para começar a criar uma estrutura sólida com proteções consistentes, adicione margens e colunas aos layouts.
As margens fornecem espaçamento nas bordas esquerda e direita da tela e do conteúdo. Um valor de margem padrão para tamanho compacto é 16 dp, mas as margens precisam se adaptar para acomodar telas maiores. O conteúdo e as ações do corpo do app precisam ficar dentro e alinhados a essas margens.
Você também pode garantir zonas de insetos seguras ou insetos nessa etapa. Os engastes da barra do sistema impedem que ações importantes fiquem abaixo das barras do sistema. Consulte Desenhar seu conteúdo atrás das barras do sistema para mais detalhes.
Use colunas para criar uma estrutura de grade flexível para alinhamento consistente e para fornecer definição vertical a um layout dividindo o conteúdo dentro da área do corpo. O conteúdo vai para as áreas da tela que contêm colunas. Essas colunas dão estrutura ao layout, fornecendo uma estrutura conveniente para organizar elementos.
Use uma grade de colunas para alinhar o conteúdo a uma grade subjacente, mas mantendo o tamanho flexível. A grade de colunas pode acomodar diferentes fatores de formulário alterando os tamanhos e o número de colunas conforme necessário pelo tamanho da tela em determinados pontos, permitindo que o conteúdo também seja dimensionado. Evite ser muito granular com a grade de colunas. A grade de referência serve para fornecer unidades de espaçamento consistentes.
Tenha cuidado ao estabelecer uma grade de linhas, porque ela pode restringir a escala horizontal do conteúdo em todas as orientações e formatos. Normalmente, a criação de regras de padding vai fornecer a consistência visual necessária.
Usar a contenção para agrupar elementos visualmente
Contenção se refere ao uso de espaços em branco e elementos visíveis para criar um agrupamento visual. Um contêiner é uma forma que representa uma área fechada. Em um único layout, é possível agrupar elementos que compartilham conteúdo ou funcionalidade semelhantes e separá-los de outros elementos usando espaço aberto, tipografia e divisores.
É possível agrupar itens semelhantes com espaços em branco ou uma divisão visível para ajudar a orientar o usuário pelo conteúdo.
A contenção implícita usa espaços em branco para agrupar visualmente o conteúdo e criar limites de contêiner, enquanto a contenção explícita usa objetos como linhas dividoras e cards para agrupar o conteúdo.
A figura a seguir mostra um exemplo de como usar a contenção implícita para conter o cabeçalho e a cópia principal. A grade de colunas é usada para alinhar e criar agrupamentos. Os destaques são incluídos explicitamente nos cards. Usar iconografia e hierarquia de tipo para uma maior separação visual.
Posicionamento do conteúdo
O Android tem várias maneiras de processar elementos de conteúdo nos respectivos contêineres que podem ajudar a posicioná-los adequadamente, incluindo gravidade, espaçamento e dimensionamento.
Gravity é um padrão para colocar um objeto em um contêiner potencialmente maior para casos de uso específicos. A figura a seguir mostra exemplos de objetos de posicionamento no início e no centro (1), na parte de cima e no centro horizontal (2), na parte de baixo à esquerda (3) e no final e à direita (1).
Dimensionamento
A escala é crucial para acomodar conteúdo dinâmico, orientação do dispositivo e tamanhos de tela. Os elementos podem permanecer fixos ou ser dimensionados.
Observar como as imagens são exibidas nos contêineres com dimensionamento e posição é importante para garantir que elas apareçam como você quer independente do contexto do dispositivo. Caso contrário, o foco principal da imagem pode aparecer cortado, as imagens podem ser muito pequenas ou grandes para o layout ou outros efeitos indesejáveis.
O conteúdo que não é anotado pode aparecer de maneira diferente do esperado ou desejado.
Conteúdo fixado
Muitos elementos têm interações, rolagem e posicionamento integrados com slots ou scaffolds. Alguns elementos podem ser modificados para permanecer fixos em vez de reagir à rolagem, por exemplo, botões de ação flutuantes (FABs, na sigla em inglês) que contêm ações críticas.
Alinhamento
Use AlignmentLine para criar linhas de alinhamento personalizadas, que os layouts pais
podem usar para alinhar e posicionar os filhos.
Não:atrapalhe a legibilidade com espaçamento inconsistente de elementos semelhantes, o que pode fazer com que os designs pareçam aleatórios.
O que fazer:estabeleça um espaçamento consistente entre elementos semelhantes.
Layout do componente
Os componentes do Material 3 fornecem as próprias configurações e estados para interação e conteúdo.
O Compose oferece layouts convenientes para combinar componentes do Material Design em padrões de tela comuns. Elementos combináveis, como Scaffold, fornecem slots para vários componentes e outros elementos de tela. Leia mais sobre os componentes e layouts do Material Design.
Layouts e padrões de navegação
Se o app tiver vários destinos para os usuários percorrerem, recomendamos usar pares de layout e navegação que são comumente usados por outros apps. Como muitos usuários já têm os modelos mentais para esses pares, seu app será mais intuitivo para eles.
Pareamentos de layout e navegação
A barra de navegação e a gaveta de navegação modal são usadas como padrões de navegação principal para visualizações de layout pai e destinos de navegação principais.
A barra de navegação pode conter de três a cinco destinos de navegação no mesmo nível da hierarquia. Esse componente é traduzido para o trilho de navegação em telas grandes.
Embora a gaveta de navegação possa conter mais de cinco destinos de navegação, o padrão não é tão ideal quanto a barra de navegação devido à necessidade de acessar a barra superior em tamanhos compactos.
As guias do Material 3 e a barra de apps inferior são padrões de navegação secundários que podem ser usados para complementar a navegação principal ou aparecer em visualizações filhas.
Ações de layout
Ofereça controles para que os usuários realizem ações. Os padrões comuns incluem ações na barra superior, botão de ação flutuante (FAB) e menus.
Para ações de maior importância, um FAB oferece um botão grande
e em destaque para o usuário. Forneça apenas uma ação por vez nesse
nível. Um FAB pode aparecer em vários tamanhos e em um formulário aberto, que inclui um
rótulo. Use Scaffold para fixar um FAB, garantindo que ele esteja sempre
visível, mesmo ao rolar a tela.
É possível colocar ações secundárias na barra superior ou, se estiverem agrupadas perto de conteúdo relacionado, na página.
Para qualquer outra ação que não seja necessária imediatamente ou com frequência, adicione-a a um menu flutuante.
Layouts canônicos
Use layouts canônicos como ponto de partida, composições prontas para uso que ajudam os layouts a se adaptar a casos de uso comuns e tamanhos de tela. Esses layouts são estéticos e funcionais, e derivados das orientações do Material 3.
O framework do Android inclui componentes especializados que tornam a implementação dos layouts direta e confiável usando as APIs Jetpack Compose ou views.
Layout de detalhes e listas
Um layout de detalhes e listas permite que os usuários descubram listas de itens que têm informações descritivas, explicativas ou outras informações complementares: os detalhes do item. Para tamanhos de tela compactos, apenas a visualização de lista ou de detalhes fica visível. Mostrando uma coleção de conteúdo em um layout baseado em linha, as listas compõem a forma mais comum de layouts para apps. O layout de detalhes e listas é ideal para apps de mensagens, gerenciadores de contatos, navegadores de arquivos ou qualquer app em que o conteúdo possa ser organizado como uma lista de itens que revelam informações extras.
O conteúdo pode ser estático ou dinâmico.
- O conteúdo dinâmico é o que seu app oferece em tempo real e é ideal para mostrar conteúdo gerado pelo usuário ou refletir as preferências ou ações do usuário. Por exemplo, imagine um app de fotos com uma lista rolável de fotos geradas pelo usuário, que é exclusiva para cada usuário e muda à medida que o usuário faz upload de mais imagens. Essas imagens são conteúdo dinâmico.
- O conteúdo estático representa o conteúdo codificado, que só pode ser modificado fazendo alterações diretamente no código do app. Exemplos de conteúdo estático são imagens e textos que todos os usuários podem ver.
O arquivo do Figma Now in Android (link em inglês) oferece vários exemplos de layout. O exemplo a seguir mostra uma coleção unidimensional de conteúdo.
Confira as listas do Material 3 para mais orientações de design sobre componentes e especificações de listas.
Layout do feed
Um layout de feed organiza elementos de conteúdo equivalentes em uma grade configurável para uma visualização rápida e conveniente de um grande volume de conteúdo. Consulte diretrizes do Material 3 para usar cards em uma coleção. Os feeds podem ser configurações com base em lista ou grade em telas compactas, normalmente em cards ou telhas. O conteúdo pode ser dinâmico, ou seja, ele é "alimentado" por uma fonte externa dinâmica, como uma API.
Um layout de grade é composto por linhas e colunas formadas por princípios de contenção implícitos ou explícitos. Consulte contenção nesta página para mais informações. Um layout de grade pode ser aplicado de forma mais rígida ou alternado para variar as linhas e colunas. Ambos precisam ter uma aplicação consistente de espaçamento e lógica para evitar confundir os usuários. Confira as diretrizes do Material 3 sobre como projetar feeds.
É possível implementar um layout de feed no Compose com listas ou grids lazy,
ou em visualizações com RecyclerView ou CardView.
Layout do painel de suporte
Uma visualização para dispositivos móveis pode exigir suporte a conteúdo ou controles. Normalmente, em forma de páginas ou caixas de diálogo, eles podem ajudar a manter a visualização principal focada e organizada. Confira as orientações do M3 para usar o layout canônico do painel de suporte.
Saiba mais sobre as orientações do M3 para páginas de rodapé.
Layouts relativos
As entradas, o conteúdo ou outras ações podem aparecer em relação umas às outras ou restringidas a um contêiner pai. Os layouts podem ser mais personalizados, mas siga o agrupamento, as colunas e o espaçamento consistentes.
Os layouts também podem usar uma combinação de tipos. Por exemplo, você pode combinar um carrossel ou rolagem horizontal com cards verticais. Ou você pode apresentar um gráfico personalizado com dados de lista vertical.
É possível apresentar conteúdo em linhas ou colunas de rolagem com linhas e colunas lentas.
Saiba mais sobre os conceitos básicos do layout do Compose e o que compõe um elemento combinável.
A autenticação é um layout relativo comum, conforme mostrado na figura a seguir.
O layout de tela cheia é outro layout comum, usado no modo imersivo.
Se você estiver trabalhando com visualizações em vez do Compose, use
ConstraintLayout para organizar as visualizações de acordo com as relações entre
visualizações irmãs e o layout pai, permitindo layouts grandes e complexos.
O ConstraintLayout permite criar tudo arrastando e soltando, em vez de
editar o XML usando o Layout Editor. Saiba mais sobre como criar uma interface com o
Layout Editor.
Adaptar layouts
Design adaptável é a prática de projetar layouts que se adaptam a pontos de interrupção e dispositivos específicos. Normalmente consideramos a largura do dispositivo para determinar onde o layout deve mudar ou se adaptar. A Web e o Android usam conceitos de design responsivo, como grade e imagens flexíveis, para criar layouts que respondem melhor ao contexto.
Para conferir diretrizes de design sobre como adaptar layouts a tamanhos de tela expandidos, leia o guia para desenvolvedores Compatibilidade com diferentes tamanhos de tela no Compose e a página Aplicação de layout do M3. Você também pode conferir a galeria canônica de telas grandes do Android para se inspirar e implementar layouts de tela grande.
Embora nem todo app precise estar disponível para todos os tamanhos de tela, isso oferece mais liberdade aos usuários em relação à ergonomia, usabilidade e qualidade do app.
- Você pode projetar telas principais (comunicar os conceitos essenciais do app) com tamanhos de classe como pontos de interrupção para servir como diretrizes.
- Ou projete o conteúdo para agir de forma responsiva, indicando como ele deve ser restringido, expandido ou refeito.
Para saber mais sobre layouts, consulte a página Entender o layout do Material Design 3 (M3).
WebViews
Uma WebView é uma visualização que exibe páginas da Web no app. Na maioria dos casos, recomendamos usar um navegador da Web padrão, como o Chrome, para enviar conteúdo ao usuário. Para saber mais sobre navegadores da Web, leia o guia sobre como invocar um navegador com uma intent.