Guias

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

1. Ícone de guia ativa
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

Com o alinhamento flexível, a configuração de guia é esticada ou compacta para caber no espaço disponível.

Guias recolhidas na barra de apps – menu de gaveta

Barra de guias independente: alinhada à esquerda

Barra de guias independente: alinhamento flexível

Com o alinhamento flexível, a configuração de guia é esticada ou compacta para caber no espaço disponí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

Guias recolhidas
Guias aninhadas na barra de apps
Barra de guias autônoma