O componente da barra de apps e do cabeçalho é uma barra dedicada no topo da tela do app que pode ser personalizada para mostrar funções importantes relacionadas ao app, como branding, navegação de nível superior e acesso aos controles do app.
Use layouts consistentes de barra de apps e cabeçalho para colocar controles importantes, como a pesquisa no app, em um local padrão em toda a interface.
Anatomia
A barra de apps e o cabeçalho podem incluir vários elementos. Ele pode ser configurado das seguintes maneiras:
- Cabeçalho do app:quando configurado como cabeçalho, o componente contém espaço para texto opcional, usando o mínimo de ícones e botões. Normalmente, inclui um título na tela e uma seta para voltar.
- Barra de apps:quando configurada como uma barra de apps, 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 de apps, como configurações e pesquisa no app.
![Anatomia da barra de apps e do cabeçalho](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-anatomy-1.png?authuser=7&hl=pt)
1. Seta para voltar
2. Título da tela
3. Botão
4. Controles de apps
5. Ícone do app
6. Navegação principal (guias)
Especificações: barra de apps
Barra de apps com navegação principal: alinhamento ao centro
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-8.png?authuser=7&hl=pt)
Barra de apps com navegação principal: alinhada à esquerda
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-7.png?authuser=7&hl=pt)
Barra de apps com navegação principal: recolhida (gaveta em vez de guias)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-9.png?authuser=7&hl=pt)
Especificações – Cabeçalho do aplicativo
Cabeçalho do app com título centralizado
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-1.png?authuser=7&hl=pt)
Cabeçalho de app com controle de app único
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-2.png?authuser=7&hl=pt)
Cabeçalho de app com vários controles de apps
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-3.png?authuser=7&hl=pt)
Cabeçalho do app com um único botão
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-4.png?authuser=7&hl=pt)
Cabeçalho do app com vários botões
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-5.png?authuser=7&hl=pt)
Cabeçalho do app com estouro de texto
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-6.png?authuser=7&hl=pt)
Cabeçalho do app com uma barra de guias independente
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-spec-10.png?authuser=7&hl=pt)
Personalização
Os OEMs podem refletir a marca modificando a aparência visual da barra de apps e do cabeçalho. As modificações podem incluir:
- Ícones personalizados
- Fontes personalizadas
- Como configurar a aparência de botões ativos, inativos e desativados
- Definir dimensões e posições de botões
O sistema de design oferece orientações para personalizar componentes usando layout, cores, tipografia e dimensionamento.
Exemplos
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-1.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-2.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-3.png?authuser=7&hl=pt)
![](https://developers.google.cn/cars/design/automotive-os/components/images/app-bar-mock-4.png?authuser=7&hl=pt)