Juntas, a barra de status e a barra de navegação são chamadas de barras do sistema. Eles exibem informações importantes como o nível da bateria, a hora e enviar alertas de notificação e interagir diretamente com o dispositivo em qualquer lugar.
É fundamental considerar o destaque das barras do sistema, projetar IUs para interações com o SO Android, métodos de entrada ou outros recursos do dispositivo. Manter as barras de sistema no topo da maioria das camadas para garantir eles são contabilizados.
Aprendizados
Incluir barras de sistema nos designs para considerar as zonas de segurança da interface, o sistema interações, 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.
Deixar as barras de sistema transparentes e mostrar o app em tela cheia continuar a interface sob as barras para oferecer uma experiência completa de ponta a ponta.
Evite adicionar gestos de toque ou alvos de arrastar abaixo de encartes de gesto. esses entrar em conflito com a navegação de ponta a ponta e por gestos.
Figura 2. Encartes de gestos do sistema. Evite colocar o toque metas nessas á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 abaixo das barras de sistema para uma experiência mais imersiva. Recomendamos o uso de ponta a ponta porque tornar a transparente é uma solicitação comum dos usuários. (Leia sobre como são compatíveis com borda a borda.
Um app pode resolver sobreposições no conteúdo reagindo a encartes. Os encartes descrevem quanto do conteúdo do app precisa ser preenchido para evitar sobreposição com partes da interface do SO Android, como a barra de navegação ou de status, ou com recursos de dispositivos físicos, como cortes da tela;
Preste atenção aos seguintes tipos de encarte ao projetar para uso de ponta a ponta casos:
- Os encartes das barras de sistema se aplicam à interface que pode ser tocada e não pode ser visualmente obscurecidos pelas barras do sistema.
- Os encartes de gestos do sistema se aplicam às áreas de navegação por gestos usadas pelo sistema. que têm prioridade sobre seu app.
Barra de status
No Android, a barra de status contém ícones de notificação e do sistema. O o usuário interage com a barra de status puxando-a para baixo para acessar a notificação sombra.
A barra de status pode aparecer de forma diferente dependendo do contexto, hora do dia, preferências ou temas definidos pelo usuário e outros parâmetros. Também é possível definir estilo da barra de status, como nos exemplos a seguir.
Confira se o conteúdo do app cobre toda a tela, agora que de ponta a ponta está obrigatórios. Use barras de sistema transparentes com conteúdo de ponta a ponta, como mostrado exemplo a seguir.
Quando uma notificação chega, um ícone geralmente aparece na barra de status. Isso sinais para o usuário de que há algo a 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
Estilizar o plano de fundo da barra de status como parte do tema do app, com uma cor personalizada ou estilo, 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á definir o estilo do status o conteúdo da barra 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 tela para dar espaço aos sensores frontais. Pode afetar a aparência de 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 gestos (recomendado) e navegação com três botões.
Navegação por gestos.
Introduzido no Android 10 (nível 29 da API), a navegação por gestos é a opção recomendada tipo de navegação, embora não seja possível substituir a preferência do usuário. Gesto a navegação não usa botões para voltar, página inicial e visão geral, mostrando um alça de gesto única para affordance. Os usuários interagem deslizando da esquerda para a direita ou borda direita da tela para voltar e avançar e subir de baixo para cima para casa. 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 em em dispositivos móveis e em telas maiores. Para oferecer a melhor experiência ao usuário, considere navegação por gestos:
- 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 disponíveis para seus usuários. A navegação com dois botões, por exemplo, oferece dois para os botões 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 gerencia toda a proteção visual da interface do usuário em gestos no modo de navegação ou nos modos de botões.
Modo de navegação por gestos: o sistema aplica a adaptação dinâmica de cores, quais conteúdos das barras do sistema mudam de cor com base no conteúdo atrás deles. No exemplo a seguir, o identificador na barra de navegação muda para uma cor escura se for colocada acima do conteúdo claro e vice-versa.
Figura 12:Adaptação dinâmica de cor Modos de botão: o sistema aplica um scrim translúcido atrás do sistema. barras (para API de nível 29 ou superior) ou uma barra de sistema transparente (para nível de API 28 ou inferior).
Figura 13:adaptação dinâmica de cores, em que as barras de 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
permitem que o usuário execute ações como dispensar ou até mesmo alterar o
o tipo de teclado. Para garantir uma transição suave do teclado, Para garantir uma transição suave,
transição que sincroniza a transição do app com o teclado deslizando
para cima e para baixo a partir da parte inferior da tela, use
WindowInsetsAnimationCompat
Modo imersivo
Você pode ocultar barras de sistema quando precisar de uma experiência em tela cheia, por exemplo quando o usuário está assistindo a um filme. O usuário ainda poderá tocar para revelar barras de sistema e interface para navegar ou interagir com os controles do sistema. Saiba mais sobre como projetar para os modos de tela cheia ou leia sobre como ocultar as barras de sistema para o modo imersivo.