Juntas, a barra de status e a barra de navegação são chamadas de barras do sistema. Eles mostram informações importantes, como nível de bateria, horário e alertas de notificação, e oferecem interação direta com o dispositivo de qualquer lugar.
É fundamental considerar o destaque das barras do sistema, esteja você projetando uma interface para interações com o SO Android, métodos de entrada ou outros recursos do dispositivo. Mantenha as barras de sistema no topo da maioria das camadas para garantir que elas sejam consideradas.
Takeaways
Inclua barras de sistema nos designs para considerar zonas de segurança da interface, interações do sistema, métodos de entrada, cortes da tela e outros recursos do dispositivo. Mantenha as barras de sistema na camada superior para garantir que elas sejam consideradas.
O que fazer: deixe as barras de sistema transparentes e coloque o 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 de baixo com a cor da barra de gestos e a cor da barra de status da parte de cima com a 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 áreas de arrastar sob encartes de gesto, já que isso entra em conflito com a navegação de ponta a ponta e por gestos.
Figura 3. Encartes de gestos do sistema. Evite colocar áreas de toque abaixo dessas áreas
Desenhar o conteúdo por trás das barras do sistema
O recurso de ponta a ponta permite que o Android desenhe a interface sob as barras de 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 sobreposições no conteúdo reagindo a 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 físicos do dispositivo, como cortes da tela.
Esteja ciente dos seguintes tipos de encarte ao projetar para casos de uso de ponta a ponta:
- Os encartes das barras de sistema se aplicam à interface que pode ser tocada e não pode ser ocultada visualmente pelas barras de 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 arrastando-a para baixo para acessar a aba de notificações.
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.
Agora que o conteúdo do app abrange toda a tela, agora que a ponta a ponta é necessária. Use barras de sistema transparentes com conteúdo de ponta a ponta, conforme mostrado no exemplo abaixo.
Quando uma notificação chega, 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.
Definir o estilo da barra de status
Estilize o segundo plano da barra de status como parte do tema do app, com uma cor ou um estilo personalizado, além de definir transparência e opacidade.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Se você estiver definindo a cor do plano de fundo manualmente, poderá definir o estilo do conteúdo da barra de status como claro ou escuro para um contraste ideal.
Cortes da tela e 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 para 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 da tela.
Barra de navegação
O Android permite que os usuários controlem a navegação usando os controles de retorno, início e visão geral:
- Voltar retorna diretamente à visualização anterior.
- A tela 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 (recomendado) e a navegação com três botões.
Navegação por gestos.
Apresentada 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, página inicial e visão geral, mas mostra uma única alça de gesto para affordance. Os usuários interagem deslizando da borda esquerda ou direita da tela para voltar e avançar e subir de baixo para cima até a página 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 da seguinte maneira:
- Suporte a conteúdo de ponta a ponta.
- Evite adicionar interações ou áreas de toque sob encartes 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, página inicial 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 home e voltar.
Definir um estilo de navegação
O exemplo abaixo 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ões.
Modo de navegação por gestos: o sistema aplica a adaptação dinâmica de cores, em que o conteúdo das barras do sistema muda de cor com base no conteúdo atrás delas. No exemplo abaixo, a alça na barra de navegação muda para uma cor escura se for colocada acima do conteúdo claro e vice-versa.
Figura 13:adaptação dinâmica de cores. Modos de botão: o sistema aplica um scrim translúcido atrás das barras do sistema (para o nível 29 da API ou mais recente) ou uma barra de sistema transparente (para o nível 28 da API ou anterior).
Figura 14:adaptação dinâmica de cores, 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 corretamente ao teclado na tela para
permitir que o usuário execute ações como dispensar ou até mesmo mudar o
tipo de teclado. Para garantir uma transição suave do teclado, use
WindowInsetsAnimationCompat para garantir uma transição tranquila
que sincronize a transição do app com o teclado deslizando
de baixo para cima e para baixo.
Modo imersivo
É possível ocultar barras de 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 poderá tocar para revelar as barras do sistema e a interface e 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 no modo imersivo.