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


