![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-hero.png?authuser=4&hl=pt-br)
Juntas, as barras de status e de navegação são chamadas de barras do sistema. Eles mostram informações importantes, como o nível da bateria, a hora e alertas de notificação, além de fornecer interação direta com o dispositivo de qualquer lugar.
É fundamental considerar o destaque das barras do sistema, ao projetar uma interface para interações com o SO Android, métodos de entrada ou outros recursos do dispositivo. Mantenha as barras do sistema na parte de cima da maioria das camadas para garantir que elas sejam contabilizadas.
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-image-behind.png?authuser=4&hl=pt-br)
Takeaways
Inclua barras de sistema nos seus designs para considerar zonas de segurança da interface, interações do sistema, métodos de entrada, cortes de tela e outros recursos do dispositivo. Manter as barras de sistema na camada superior garante que elas sejam contabilizadas.
O que fazer: torne as barras do sistema transparentes e organize seu app em tela cheia, continuando a interface abaixo das barras para oferecer uma experiência completa de ponta a ponta.
Se não for possível definir as duas barras como transparentes, verifique se as cores delas correspondem à cor do corpo do app. Por exemplo, combine a cor da barra de navegação inferior com a da barra de gestos e a cor da barra de status superior à cor do corpo.
Figura 2:verificar se as cores da barra do sistema correspondem à cor do corpo do app. Evite adicionar gestos de toque ou destinos de arrastar em encartes de gesto. Esses conflitos com a navegação de borda a borda e por gestos.
Figura 3:encartes de gestos do sistema. Evite colocar áreas de toque nessas áreas
Desenhar o conteúdo atrás das barras do sistema
O recurso de ponta a ponta permite que o Android desenhe a interface abaixo das barras do sistema para uma experiência mais imersiva. Recomendamos o uso de ponta a ponta, porque tornar a barra de navegação transparente é uma solicitação comum dos usuários. Leia sobre como oferecer suporte de ponta a ponta.
Um app pode resolver as sobreposições no conteúdo reagindo aos encartes. Os encartes descrevem quanto o conteúdo do app precisa ser preenchido para evitar a sobreposição com partes da interface do SO Android, como a barra de navegação ou a barra de status, ou com recursos do dispositivo físico, como cortes da tela.
Esteja ciente dos seguintes tipos de encartes ao projetar para casos de uso de ponta a ponta:
- Os encartes das barras de sistema se aplicam à interface que pode ser tocada e que não pode ser coberta visualmente pelas barras do sistema.
- Os encartes de gestos do sistema se aplicam a áreas de navegação por gestos usadas pelo sistema que têm prioridade sobre o app.
Barra de status
No Android, a barra de status contém ícones de notificação e do sistema. O usuário interage com a barra de status ao puxá-la para baixo para acessar a aba de notificações.
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-status-bar-region-highlighted.png?authuser=4&hl=pt-br)
A barra de status pode aparecer de maneira diferente, dependendo do contexto, da hora do dia, das preferências ou temas definidos pelo usuário e de outros parâmetros. Também é possível definir o estilo da barra de status, como nos exemplos a seguir.
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-status-bar-light-dark-theme.png?authuser=4&hl=pt-br)
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-default-bars-black.png?authuser=4&hl=pt-br)
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-styled-bars.png?authuser=4&hl=pt-br)
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-transparent-edge-to-edge.png?authuser=4&hl=pt-br)
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-do-and-dont.png?authuser=4&hl=pt-br)
Quando chega uma notificação, um ícone geralmente aparece na barra de status. Isso sinaliza ao usuário que há algo para ver na gaveta de notificações. Pode ser o ícone ou símbolo do app para representar o canal. Consulte Design de notificações.
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-notification-icon.png?authuser=4&hl=pt-br)
Definir o estilo da barra de status
Defina o estilo do plano de fundo da barra de status como parte do tema do app, com uma cor ou um estilo personalizado, além de definir a transparência e a opacidade.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Se você definir manualmente a cor do plano de fundo, poderá estilizar o conteúdo da barra de status como claro ou escuro para ter o contraste ideal.
Cortes de tela e a barra de status
Um corte da tela é uma área em alguns dispositivos que se estende até a superfície da tela para fornecer espaço a sensores frontais. Isso pode afetar a aparência das barras de status. Os cortes da tela podem variar de acordo com o fabricante.
Leia sobre como oferecer suporte a cortes de tela.
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-display-cutouts.png?authuser=4&hl=pt-br)
Barra de navegação
O Android permite que os usuários controlem a navegação usando os controles "Voltar", "Início" e "Visão geral":
- Voltar retorna diretamente à visualização anterior.
- A tela inicial sai do app para a tela inicial do dispositivo.
- A visão geral mostra que os apps estão abertos e foram abertos recentemente.
Os usuários podem escolher entre várias configurações da barra de navegação, incluindo a navegação por gestos (recomendado) e a navegação com três botões.
Navegação por gestos
Introduzida no Android 10 (nível 29 da API), a navegação por gestos é o tipo de navegação recomendado, embora não seja possível substituir a preferência do usuário. A navegação por gestos não usa botões para voltar, "Início" e "Visão geral", mostrando uma única alça de gesto para affordance. Os usuários interagem com o dedo deslizando da borda esquerda ou direita da tela para voltar, avançar, de baixo para cima e voltar para a tela inicial. Deslizar para cima e segurar abre a visão geral.
A navegação por gestos é um padrão de navegação mais escalonável para projetar para dispositivos móveis e telas maiores. Para oferecer a melhor experiência do usuário, considere a navegação por gestos:
- Suporte a conteúdo de ponta a ponta
- Evite adicionar interações ou áreas de toque em encartes da navegação por gestos.
Leia sobre a implementação da navegação por gestos.
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-gesture-handle.png?authuser=4&hl=pt-br)
Navegação com três botões
A navegação com três botões oferece três botões para voltar, para página inicial e para visão geral.
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-3-button-nav.png?authuser=4&hl=pt-br)
Outras variações da barra de navegação
Dependendo da versão do Android e do dispositivo, outras configurações da barra de navegação podem estar disponíveis para os usuários. A navegação com dois botões, por exemplo, fornece dois botões para iniciar e voltar.
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-2-button-nav.png?authuser=4&hl=pt-br)
Definir um estilo de navegação
O exemplo a seguir mostra como implementar um estilo de navegação.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
O Android processa toda a proteção visual da interface do usuário no modo de navegação por gestos ou nos modos de botão.
Modo de navegação por gestos: o sistema aplica a adaptação dinâmica de cores, em que o conteúdo das barras de sistema muda de cor com base no conteúdo por trás delas. No exemplo a seguir, a alça na barra de navegação mudará para uma cor escura se for colocada acima do conteúdo claro e vice-versa.
Figura 15:adaptação dinâmica de cores Modos de botão: o sistema aplica um scrim translúcido atrás das barras de sistema (para o nível de API 29 ou mais recente) ou uma barra de sistema transparente (para o nível de API 28 ou anterior).
Figura 16:adaptação dinâmica de cores, em que as barras do sistema mudam de cor com base no conteúdo atrás delas.
Teclado e navegação
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-on-screen-keyboard.png?authuser=4&hl=pt-br)
Cada tipo de navegação reage de forma adequada ao teclado na tela para
permitir que o usuário execute ações como dispensar ou até mudar o
tipo de teclado. Para garantir uma transição suave do teclado, use
WindowInsetsAnimationCompat
para garantir uma transição suave que sincronize a transição do app com o teclado deslizando
de baixo para cima na tela.
Modo imersivo
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-immersive-mode.png?authuser=4&hl=pt-br)
Você pode ocultar as barras de sistema quando precisar de uma experiência em tela cheia, por exemplo, quando o usuário estiver assistindo um filme. O usuário ainda pode tocar para revelar barras do sistema e a interface, a fim de navegar ou interagir com os controles do sistema. Saiba mais sobre como projetar para modos de tela cheia ou leia sobre como ocultar as barras de sistema para o modo imersivo.