Esta página foi traduzida pela API Cloud Translation.

Grades

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

As grades são roláveis verticalmente e podem variar de tamanho, espaçamento e número de colunas. O conteúdo na grade também pode ser classificado em categorias.

Componente "Listar itens"

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

Anatomia

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

Grade

Texto principal e secundário

Plano de fundo da grade

Especificações

Marcadores de layout

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

Componente "Listar itens"

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 de indicador no layout de grade

Como dimensionar 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 amostragem para baixo ou para cima.

Layout

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

Marcadores de layout

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

Telas de largura padrão

Telas largas

Para telas grandes, recomendamos um layout de três colunas. Se você usar um layout de quatro colunas, mantenha um tamanho mínimo de bloco de 219 dp.

Telas extragrandes e super amplas

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

Para telas curtas, o espaçamento vertical deve 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 cor

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

Tipografia

Estilo de digitação	Fonte	Peso	Tamanho (dp)
Texto 1	Roboto	Normal	32
Texto 2	Roboto	Normal	28
Corpo 3	Roboto	Normal	24

Cor

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