As listas são contêineres de elementos com rolagem e foco integrados.

Princípios
Organização clara: as listas precisam apresentar informações em uma disposição vertical clara e fácil de ler.
Apresentação consistente de itens: os itens de lista precisam seguir uma estrutura visual consistente.
Capacidade de foco e navegação: em interfaces que dependem da navegação direcional, as listas precisam indicar claramente o item em foco.
Interatividade: os itens de lista geralmente representam elementos selecionáveis ou acionáveis.
Uso e posicionamento
As listas podem conter vários conteúdos semelhantes com elementos repetíveis. Ao contrário das pilhas, as listas preenchem o contêiner de visualização do app.

Usar scrims para indicar conteúdo excedente
Quando uma lista tem mais itens do que cabem em uma visualização, uma tela preta é usada perto dos limites da lista.

As listas podem usar um título, se necessário
Um título estático ou fixo pode ser usado em uma lista para maior clareza.
O que não fazer
Use a profundidade para indicar o foco
Os itens da lista se movem entre 0 e +4 de profundidade para estados sem foco e com foco.

Os itens da lista podem ser acionáveis
Os itens em uma lista podem funcionar como ações. Mantenha a ação no item da lista
Anatomia
A lista é composta por um contêiner de rolagem e itens de lista com espaçamento consistente. As listas precisam rolar verticalmente, com um overshoot mínimo, quando o número de itens excede a janela de visualização.
A. Contêiner: área rolável
B. Item da lista
C. Barras de sistema
Lista
de itens: cada elemento individual na lista.
A. Forma
B. Borda
C. Ícone principal
D. Text content
E. Indicador de fim
Personalização
A maior parte da personalização acontece com itens de lista.
| Propriedades | Personalização | Padrões |
|---|---|---|
| Item da lista: forma | Sim | 40 dp |
| Item da lista: ícone inicial e final | Sim | Ícone de símbolo médio |
| Item da lista: valores de padding | Sim | 2d dp, 20 dp |
| Item da lista: conteúdo | Sim | Uma linha: um elemento combinável Text para o rótulo principal usando Body Small. Duas linhas: uma coluna contendo dois elementos combináveis Text para um rótulo principal e um secundário. Principal: Title Small. Secundário: Body Small. |
| Lista: verticalArrangement | Sim | 20 dp |