Barra de aplicativos e cabeçalho

A barra de aplicativos e o componente de cabeçalho são barras dedicadas na parte superior da tela do aplicativo que podem ser personalizadas para exibir funções importantes relacionadas ao aplicativo, como identidade visual, navegação principal e acesso aos controles do aplicativo.

Use layouts consistentes para a barra de aplicativos e o cabeçalho para posicionar controles importantes, como a pesquisa no aplicativo, em um local padrão em toda a interface do usuário.

Anatomia

A barra de aplicativos e o cabeçalho podem incluir diversos elementos. Podem ser configurados de uma destas maneiras:

• Cabeçalho do aplicativo: Quando configurado como cabeçalho do aplicativo, o componente contém espaço para texto opcional, com uso mínimo de ícones e botões. Normalmente, inclui um título de tela e uma seta para voltar.
• Barra de aplicativos: Quando configurada como uma barra de aplicativos, ela pode incluir ícones, guias e botões . Os elementos típicos incluem um ícone do aplicativo e opções de navegação.

Qualquer uma dessas versões também pode incluir controles do aplicativo, como pesquisa e configurações dentro do aplicativo.

Especificações – Barra de aplicativos

Barra de aplicativos com navegação principal – alinhada ao centro

Barra de aplicativos com navegação principal – alinhada à esquerda

Barra de aplicativos com navegação principal – recolhida (gaveta em vez de abas)

Especificações – Cabeçalho do aplicativo

Cabeçalho do aplicativo com título centralizado

Cabeçalho do aplicativo com controle de aplicativo único

Cabeçalho do aplicativo com vários controles de aplicativo

Cabeçalho do aplicativo com botão único

Cabeçalho do aplicativo com vários botões

Cabeçalho do aplicativo com texto excedente

Cabeçalho do aplicativo com barra de abas independente

Personalização

Você pode expressar sua marca modificando a aparência visual da barra de aplicativos e do cabeçalho. As modificações podem incluir:

• Ícones personalizados
• Fontes personalizadas
• Configurar a aparência de botões ativos, inativos e desativados.
• Definir as dimensões e o posicionamento dos botões

Exemplos