Esta página foi traduzida pela API Cloud Translation.

Grades

A visualização em grade exibe duas ou mais colunas de imagens que representam itens de conteúdo, com um texto curto abaixo de cada imagem. Essa visualização é melhor quando os usuários dependem principalmente de imagens para fazer as seleções.

As grades têm rolagem vertical e podem variar em tamanho, espaçamento e número de colunas. O conteúdo da grade também pode ser agrupado em categorias.

Componente de itens da lista

As listas fornecem uma maneira alternativa de exibir conteúdo que requer texto mais explicativo

Anatomia

As grades contêm texto e controles de interface. Como os usuários precisam responder a eles, eles nunca devem ser obscurecidos, seja por outros elementos ou pela borda da tela.

Item da grade

Texto principal e secundário

Plano de fundo da grade

Especificações

Rótulos de layout

Definições de E, M, KL, P e Flex

Componente de itens da lista

Especificações, diretrizes de estilo e muito mais

Grade de conteúdo (3 ou 4 colunas)

Grade de apps (4 colunas)

Grade de apps com itens usados com frequência na linha superior

Posicionamento do ícone indicador no layout de grade

Dimensionamento de layouts

Esses layouts de referência mostram como adaptar grades para acomodar telas de várias larguras e alturas. As categorias de largura e altura são definidas na seção Layout. Todos os valores de pixel estão em pixels renderizados, antes de qualquer diminuição ou aumento de amostragem.

Layout

Margens, linhas-chave e padding para vários tamanhos de tela

Rótulos de layout

Definições de E, M, KL, P e Flex

Telas de largura padrão

Telas amplas

Para telas largas, é recomendado um layout de três colunas. Se estiver usando um layout de quatro colunas, mantenha um tamanho mínimo de bloco de 219 dp.

Telas muito largas e superlargas

Espaçamento vertical das grades de apps em telas de várias alturas

Em telas curtas, o espaçamento vertical precisa ser reduzido entre os itens de conteúdo da grade e entre os ícones e títulos do app.

Estilos

Diretrizes de tipografia

Referências de escala e grade, exemplos tipográficos e muito mais

Diretrizes de cores

Paletas, valores de elevação e opacidade e muito mais

Tipografia

Estilo de fonte	Fonte	Peso	Tamanho (dp)
Texto 1	Roboto	Normal	32
Texto 2	Roboto	Normal	28
Texto 3	Roboto	Normal	24

Cor

Elemento	Cor(modo diurno)	Cor (modo noturno)
Tipo principal / ícones	Branco	Branco @ 88%
Tipo secundário / ícones	Branco @ 72%	Branco a 60%
Linha divisória	Branco @ 22%	Branco @ 12%
Plano de fundo da grade	Preto	Preto
Conteúdo scrim	N/A	Preto @ 22%
Gradiente truncado	Preto entre 0 e 100% em 10% do espaço de texto	Preto entre 0 e 100% em 10% do espaço de texto