Guias

Guias são botões que sempre ocorrem em grupos e dependem do estado uns dos outros: somente um pode estar ativo por vez.


Anatomia

1. Ícone da guia ativa
2. Ícone da guia inativa
3. Rótulo da guia ativa
4. Rótulo da guia inativa

Especificações

Guias aninhadas na barra de apps: alinhadas à esquerda

Guias aninhadas na barra de apps: alinhamento flexível

Com o alinhamento flexível, a configuração da guia é alongada ou compactada para caber no espaço disponível.

Guias recolhidas na barra de apps: menu de gaveta

Barra de guias autônoma: alinhada à esquerda

Barra de guias autônoma: alinhamento flexível

Com o alinhamento flexível, a configuração da guia é alongada ou compactada para caber no espaço disponível.

Excesso de strings de rótulos de guia


Dimensionamento de layouts

Esses layouts de referência mostram como adaptar guias 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 ocorrer qualquer diminuição ou aumento de amostragem.

Telas padrão x amplas no colchete de altura curto

Telas padrão x amplas no colchete de altura padrão

Telas padrão x amplas no colchete de altura alto

Telas muito largas e superlargas em todos os colchetes de altura


Estilos

Tipografia

Estilo de fonte Fonte Peso Tamanho (dp)
Corpo 3 M Roboto Médio 24
Texto 3 Roboto Normal 24

Cor

Elemento Cor(modo diurno) Cor (modo noturno)
Tipo principal / ícones Branco Branco @ 88%
Tipo secundário / ícones Branco @ 72% Branco a 60%
Plano de fundo da barra de guias Preto Preto
Plano de fundo da barra de guias ao rolar Preto @ 84% Preto @ 88%
Ícone de guia: estado ativo Branco Branco @ 88%
Ícone de guia: estado inativo Branco @ 56% Branco a 50%

Tamanho

Elemento Tamanho (dp)
Ícone principal 44
Ícone secundário 36
Área de toque do ícone 76

Exemplos

Guias recolhidas
Guias aninhadas na barra de apps
Barra de guias independente