Itens em lista

Uma visualização em lista exibe conteúdo como itens de linha em uma lista de coluna única que rola verticalmente. Essa visualização é melhor quando os usuários dependem da leitura de texto e da visualização de dados para fazer uma seleção.

Os itens de lista exigem menos espaço vertical do que os itens da grade, permitindo que mais itens sejam exibidos na tela.


Anatomia

Em uma visualização em lista, cada linha contém um bloco que representa um item da lista. As ações primárias podem preencher o bloco para que os usuários possam iniciar a ação de qualquer lugar no bloco. Para ações complementares representadas por ícones e texto, apenas a região que contém os ícones e o texto é acionável.

1. Ícone principal
2. Botão do alternador ativado
3. Botão do alternador desativado
4. Texto primário e secundário
5. Bloco de conteúdo

Especificações

Item da lista de linha única

Item da lista de duas linhas

Item da lista de duas linhas revertido

Item da lista de várias linhas com cabeçalho

Item da lista de várias linhas sem cabeçalho

Item da lista com texto flutuante

Item da lista com ações divididas

Posição do ícone de indicador em itens da lista


Como dimensionar layouts

Esses layouts de referência mostram como adaptar itens da lista 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.

Telas padrão, largas e extragrandes

Telas padrão, largas e extragrandes com bloco de conteúdo

Telas super amplas


Estilos

Tipografia

Estilo de digitação Fonte Peso Tamanho (dp)
Texto 1 Roboto Normal 32
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 do item da lista Preta Preta

Dimensionamento

Elemento Tamanho (dp)
Listar altura do item 96 (telas curtas) / 116 (tela padrão) / 128 (tela alta)
Ícone principal 44
Ícone do Tertiary 24
Bloco de conteúdo Altura do item da lista inferior a 1 dp
Avatar médio 76
Espessura da linha divisória 1

Exemplos

Lista de configurações - dia
Lista de configurações - noite
Lista de configurações - dia
Lista de configurações - noite
Lista de mídia: dia
Lista de mídia: noite