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.

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





