Grades e unidades

Os pixels independentes de densidade (dp) e os pixels escalonáveis (sp) são essenciais para criar layouts e apresentar fontes que respondem de maneira uniforme à ampla variedade de densidades de tela, classes de tamanho, formatos e proporções que compõem os dispositivos Android.

Takeaways

  • Se estiver usando uma grade de linha de base, mantenha as medidas de 4 e 8.
  • Notifique as especificações em dp e sp, em vez de pixels.
  • Exporta gráficos bitmap/raster para todos os buckets.
  • Crie com uma mentalidade responsiva e considere diferentes classes de tamanho, resoluções e proporções.
  • Pixel de densidade independente (dp, na sigla em inglês): esses pixels são unidades flexíveis que são dimensionadas para ter dimensões uniformes em qualquer tela. Eles são baseados na densidade física da tela. Essas unidades são relativas a uma tela de 160 pontos por polegada (DPI), em que 1 dp é aproximadamente igual a 1 px.
  • Pixels escalonáveis (sp): pixels escalonáveis veiculam a mesma função que dp, mas para fontes. O valor padrão de um sp é igual ao valor padrão de um dp. O sistema Android calcula o tamanho real da fonte a ser usado com base no dispositivo e nas preferências do usuário definidas no app Configurações do dispositivo Android.
Figura 1:anotação de dp em relação a sp

A principal diferença entre essas unidades de medida é que os pixels escalonáveis preservam as configurações de fonte do usuário. Os usuários que têm configurações de texto maiores para acessibilidade percebem que os tamanhos da fonte correspondem às preferências de tamanho de texto. Confira como mudar o tamanho da fonte no Compose.

O Android usa essas unidades para ajudar a dimensionar e traduzir entre os vários dispositivos e resoluções.

Buckets de densidade

As telas de alta densidade têm mais pixels por polegada do que as de baixa densidade. Como resultado, os elementos da interface com as mesmas dimensões de pixel aparecem maiores em telas de baixa densidade e menores em telas de alta densidade. É por isso que você não precisa declarar medidas em pixels.

O Android agrupa intervalos de densidades de tela em "buckets" e os usa para enviar o conjunto ideal de recursos ao seu dispositivo. Os buckets de densidade mais usados são mdpi, hdpi, xhdpi, xxhdpi e xxxhdpi (nodpi e anydpi se referem a um bucket sem escalonamento por resolução de dispositivo, normalmente usado para drawables vetoriais). Cada um corresponde a um arquivo de recursos do app.

Figura 2:melalda-festa com as respectivas densidades

Para calcular a dp:

dp = (largura em pixels * 160) / densidade da tela

Grades

Grade de linha de base

Criar com uma grade ajuda a criar espaçamento e alinhamento consistentes em toda a interface. A interface do Android utiliza uma grade de 8 dp para layout, componentes e espaçamento.

Vídeo 1:mostrar uma grade de 8 dp destacando incrementos de 8 dp

Elementos menores, como ícones, tipo e alguns elementos dentro dos componentes, ficam melhor alinhados a uma grade de 4 dp.

Figura 3:grades de 8 dp são ideais para a maioria dos elementos da interface, enquanto uma grade de 4 dp é melhor para elementos menores, como ícones.

Grade de colunas

As colunas criam uma estrutura de grade para fornecer definição vertical a um layout, dividindo o conteúdo dentro da área do corpo. O conteúdo é colocado nas áreas da tela que contêm colunas. Alinhar com uma grade subjacente para alinhar conteúdo, mas deve manter o tamanho flexível. Aprenda o básico sobre como configurar uma grade de colunas e aplicar conteúdo em Princípios básicos de layout.

Figura 4:grade de quatro colunas.

Confira a página Layouts canônicos (link em inglês) do Material 3 para ver detalhes sobre como criar layouts flexíveis em formatos.

Classes de tamanho

As classes de tamanho de janela são um conjunto de pontos de interrupção específicos que ajudam a projetar, desenvolver e testar layouts de apps responsivos e adaptáveis. O Android divide as classes de tamanho de janela em três: compacto, médio e expandido. Leia mais em Classes de tamanho de janela.

Proporções

A proporção é a proporção entre a largura e a altura de um elemento. As proporções são escritas como largura:altura.

Para manter a consistência no layout, use uma proporção consistente em elementos como imagens, superfícies e tamanho da tela.

As proporções a seguir são recomendadas para uso em toda a interface:

  • 16:9
  • 3:2
  • 4:3
  • 1:1
  • 3:4
  • 2:3