Conceitos básicos de layout

Figura 1: A legenda aparece aqui.

Um layout define a estrutura visual para um usuário interagir com seu app, por exemplo, durante uma atividade. O Android oferece várias bibliotecas, pontos de partida canônicos e técnicas para mostrar e posicionar conteúdo.

Primeiros passos

Comece a criar layouts do Android aprendendo a anatomia do app e depois a estruturar o conteúdo do app.

Aprendizados

Orientação do layout

Considere as diferentes proporções, classes de tamanho e resoluções que de que os usuários podem precisar. Confira se o app oferece uma boa experiência tanto na orientação paisagem quanto na retrato, bem como em diferentes tamanhos de tela e formatos.

Para mais informações, consulte as orientações sobre adaptação do layout e layouts canônicos.

Áreas seguras do dispositivo

Respeite as áreas de visualização seguras do dispositivo, incluindo partes da interface como cortes da tela, margens da janela de ponta a ponta, telas que vão até a borda, teclados de software e barras de sistema. Forneça um layout flexível para que os usuários interajam com o teclado. Aviso: tenha cuidado ao cobrir o conteúdo com o teclado.

Ergonomia de interação

Mantenha interações essenciais, como a navegação principal, em uma área da tela acessível. Os botões de ação flutuantes (FABs, na sigla em inglês) oferecem um ponto de interação proeminente e acessível.

Grupos de contenção

Use contenções para guiar o usuário pelo conteúdo e pelas ações, como cards que usam contenção explícita para agrupar conteúdo com ações relacionadas.

Alinhamento

Mantenha um alinhamento consistente entre conteúdo e elementos de interface semelhantes.

Estabeleça um espaçamento consistente entre elementos semelhantes.
Espaçar de forma inconsistente elementos semelhantes prejudica a leitura, o que pode fazer com que os designs pareçam aleatórios.
Interações essenciais

Não sobrecarregue o usuário com muitas ações por visualização.

Anote as especificações do layout

Ao criar layouts personalizados, anote como o conteúdo deve ficar dentro do layout usando termos de alinhamento, restrições ou gravidade. Inclua como as imagens devem responder ao contêiner para serem mostradas corretamente.