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
