Juntas, a barra de status, a barra de legenda e a barra 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, e permitem a interação direta com o dispositivo de qualquer lugar.
É essencial considerar a importância das barras do sistema, seja para projetar uma interface para interações com o SO Android, métodos de entrada ou outros recursos do dispositivo.
Aprendizados
Inclua barras do sistema ao projetar seu app. Considere as zonas seguras da interface, as interações do sistema, os métodos de entrada, os recortes de tela, as barras de status, as barras de legenda, as barras de navegação e outros recursos do dispositivo.
Mantenha as barras de status e de navegação do sistema transparentes ou translúcidas e mostre o conteúdo atrás dessas barras para que ele apareça de ponta a ponta.
Evite adicionar gestos de toque ou arrastar destinos sob engastes de gestos. Eles entram em conflito com a navegação de gestos e de borda a borda.
Figura 2. Inserções de gestos do sistema. Evite colocar alvos de toque abaixo dessas áreas
Desenhar o conteúdo atrás das barras do sistema
O recurso de tela cheia permite que o Android mostre a interface abaixo das barras do sistema para uma experiência imersiva, que é uma solicitação comum dos usuários.
Um app pode resolver sobreposições no conteúdo reagindo a insets. Os encartes descrevem quanto o conteúdo do app precisa ser padding para evitar a sobreposição com partes da interface do SO Android, como a barra de status, a barra de legenda, a barra de navegação ou com recursos de dispositivos físicos, como cortes de tela. Leia sobre como oferecer suporte a tela cheia e processar insets no Compose e nas views.
Considere os seguintes tipos de engastes ao projetar para casos de uso de borda a borda:
- Os encartes de barras do sistema se aplicam à interface que pode ser pressionada e que não pode ser visualmente obscurecida pelas barras do sistema.
- Os insets de gestos do sistema se aplicam a áreas de navegação por gestos usadas pelo sistema que têm prioridade sobre o app.
- Os insetos de corte da tela se aplicam a áreas do dispositivo que se estendem para a superfície da tela, como o corte da câmera.
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 arrastando-a para baixo para acessar a sombra de notificação.
Os ícones da barra de status podem aparecer de maneira diferente dependendo do contexto, do horário, das preferências ou temas definidos pelo usuário e de outros parâmetros. É possível definir o estilo do ícone da barra de status como nos exemplos abaixo.
Confira se o conteúdo do app ocupa toda a tela. Mantenha as barras de status e navegação transparentes ou translúcidas com conteúdo de ponta a ponta, conforme mostrado no exemplo abaixo.
A exibição de ponta a ponta é aplicada no Android 15 para que as barras do sistema sejam transparentes ou translúcidas por padrão. Nas versões anteriores do Android, não deixe as barras do sistema opacas.
Quando uma notificação chega, um ícone geralmente aparece na barra de status. Isso sinaliza ao usuário que há algo na gaveta de notificações. Ele pode ser o ícone ou símbolo do app para representar o canal. Consulte Design de notificações.
Definir o estilo da barra de status
Chame
enableEdgeToEdge() para garantir que a barra de status seja transparente em todas as versões. Atualize as cores dos ícones da barra de status para criar contraste.
Por exemplo, para criar ícones escuros:
WindowCompat.getInsetsController(window, window.decorView)
.isAppearanceLightStatusBars = false
Barra de navegação
O Android permite que os usuários controlem a navegação usando os controles de voltar, inicial e visão geral:
- "Voltar" retorna diretamente à visualização anterior.
- A página inicial sai do app e vai 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 (recomendada) e a navegação com três botões. Para oferecer a melhor experiência, considere vários tipos de navegação.
Navegação por gestos.
A navegação por gestos, introduzida no Android 10 (nível 29 da API), é o tipo de navegação recomendado, mas você não pode substituir a preferência do usuário. A navegação por gestos não usa botões para voltar, tela inicial e visão geral, mostrando um grampo de gesto único para a capacidade. Os usuários interagem deslizando da borda esquerda ou direita da tela para voltar e de baixo para cima para acessar a tela inicial. Deslize para cima e mantenha pressionado para abrir a visão geral.
A navegação por gestos é um padrão de navegação mais escalonável para projetar em telas móveis e 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 destinos de toque em inserções de navegação por gestos.
Leia sobre a implementação da navegação por gestos.
Navegação com três botões.
A navegação com três botões oferece três botões para voltar, home e visão geral.
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, oferece dois botões para a tela inicial e para voltar.
Definir um estilo de navegação
Chame enableEdgeToEdge() para garantir que a barra de navegação seja transparente ou translúcida em todas as versões.
Em dispositivos Android 15 e mais recentes ou após chamar enableEdgeToEdge(), a navegação
por gestos é transparente por padrão. A navegação com três botões é translúcida por
padrão ou opaca se estiver dentro da barra de tarefas em um dispositivo de tela grande.
Se o app tiver uma barra de app inferior, defina Window.setNavigationBarContrastEnforced()
como false para garantir que a barra de app inferior possa ser renderizada abaixo da barra de navegação
do sistema sem ter uma tela translúcida aplicada na navegação de três botões.
O Android processa a proteção visual da interface do usuário no modo de navegação por gestos e nos modos de botão.
Modo de navegação por gestos: o sistema aplica a adaptação de cores dinâmica, em que o conteúdo das barras do sistema muda de cor com base no conteúdo por trás delas. No exemplo abaixo, a alça na barra de navegação muda para uma cor escura se for colocada acima de conteúdo claro e vice-versa.
Figura 11. Adaptação dinâmica de cores. Modos de botão: o sistema aplica uma tela translúcida atrás das barras de navegação de botões, que pode ser removida definindo
Window.setNavigationBarContrastEnforced()comofalse.
Figura 12. Adaptação de cores dinâmicas, em que as barras do sistema mudam de cor com base no conteúdo por trás delas
Teclado e navegação
Cada tipo de navegação reage adequadamente ao teclado na tela para
permitir que o usuário realize ações, como dispensar ou até mesmo mudar o
tipo de teclado. Para garantir uma transição suave do teclado, use
WindowInsetsAnimationCompat para sincronizar a transição do app com o teclado deslizando
para cima e para baixo da parte de baixo da tela.
Corte da tela
Um corte da tela é uma área em alguns dispositivos que se estende até a superfície da tela para fornecer espaço para sensores frontais. Os recortes da tela podem variar de acordo com o fabricante.
Os recortes de tela podem afetar a aparência da interface. Ao segmentar o Android 15 (nível 35 da API) ou mais recente, os apps são renderizados na região de recorte de exibição por padrão. Os apps precisam processar recortes de tela para que a interface importante não seja exibida abaixo do recorte. Saiba como oferecer suporte a cortes de tela.
Modo imersivo
É possível ocultar as barras do sistema quando você precisar de uma experiência em tela cheia, por exemplo, quando o usuário estiver assistindo um filme. O usuário ainda precisa poder tocar para revelar as barras do sistema e a interface para 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 do sistema para o modo imersivo.