Guias são botões que sempre ocorrem em grupos e dependem do estado uns dos outros: somente um pode estar ativo em um momento específico.
Anatomia
2. Ícone de guia inativa
3. Etiqueta da guia ativa
4. Etiqueta de guia inativa
Especificações
Guias aninhadas na barra de apps: alinhada à esquerda
Guias aninhadas na barra de apps: alinhamento flexível
Guias recolhidas na barra de apps – menu de gaveta
Barra de guias independente: alinhada à esquerda
Barra de guias independente: alinhamento flexível
Menu flutuante da string do rótulo da guia
Como dimensionar 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 qualquer amostragem para baixo ou para cima.
Telas padrão vs. largas entre colchetes curtos
Telas padrão vs. largas entre colchetes padrão
Telas padrão vs. largas entre colchetes altos
Telas extragrandes e super amplas em todos os colchetes de altura
Estilos
Tipografia
| Estilo de digitação | Fonte | Peso | Tamanho (dp) |
|---|---|---|---|
| Carroceria 3 M | Roboto | Médio | 24 |
| 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% |
| Plano de fundo da barra de guias | Preta | Preta |
| Plano de fundo da barra de guias ao rolar | Preto a 84% | Preto a 88% |
| Ícone de guia: estado ativo | Branco | Branco 88% |
| Ícone de guia: estado inativo | Branco a 56% | Branco a 50% |
Dimensionamento
| Elemento | Tamanho (dp) |
|---|---|
| Ícone principal | 44 |
| Ícone secundário | 36 |
| Área de toque do ícone | 76 |
Exemplos
