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
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
Guias recolhidas na barra de apps: menu de gaveta
Barra de guias autônoma: alinhada à esquerda
Barra de guias autônoma: alinhamento flexí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
