Ensemble, les barres d'état et de navigation sont appelées barres système. Ils affichent des informations importantes telles que le niveau de la batterie, l'heure et des alertes de notification, et permettent une interaction directe avec l'appareil, où que vous soyez.
Que vous conceviez une UI pour les interactions avec l'OS Android, des modes de saisie ou d'autres fonctionnalités de l'appareil, il est essentiel de prendre en compte la proéminence des barres système. Laissez les barres système en haut de la plupart des calques pour vous assurer qu'elles sont prises en compte.
Prises de possession
Incluez des barres système dans vos conceptions pour tenir compte des zones de sécurité de l'interface utilisateur, des interactions système, des modes de saisie, des encoches et d'autres fonctionnalités de l'appareil. Gardez les barres système au niveau de la couche supérieure afin qu’elles soient prises en compte.
À faire: rendez les barres système transparentes et affichez votre application en plein écran, en continuant l'interface utilisateur sous les barres pour offrir une expérience bord à bord.
Si vous ne pouvez pas définir les deux barres comme transparentes, assurez-vous que leurs couleurs correspondent à la couleur du corps de votre application. Par exemple, assurez-vous que la couleur de la barre de navigation inférieure correspond à celle de la barre de gestes et de la couleur de la barre d'état supérieure à celle du corps.
Figure 2:Assurez-vous que les couleurs de la barre système correspondent à la couleur du corps de votre application Évitez d'ajouter des gestes tactiles ou des cibles de déplacement sous des encarts de gestes, car ils entrent en conflit avec la navigation bord à bord et la navigation par gestes.
Figure 3:Encarts de gestes système Évitez de placer des éléments tactiles en dessous de ces zones.
Affichez votre contenu derrière les barres système
La fonctionnalité bord à bord permet à Android de dessiner l'interface utilisateur sous les barres système pour une expérience plus immersive. Nous vous recommandons d'utiliser l'affichage bord à bord, car les utilisateurs demandent souvent à rendre la barre de navigation transparente. (Découvrez comment utiliser l'affichage de bord à bord.)
Une application peut résoudre les problèmes de chevauchement au niveau du contenu en réagissant aux encarts. Les encarts indiquent dans quelle mesure le contenu de votre application doit être rempli pour éviter de chevaucher des parties de l'interface utilisateur de l'OS Android, telles que la barre de navigation ou la barre d'état, ou avec des fonctionnalités physiques de l'appareil telles que les encoches.
Tenez compte des types d'encarts suivants lorsque vous concevez des cas d'utilisation de bord à bord:
- Les encarts de barres système s'appliquent à l'interface utilisateur sur laquelle il est possible d'appuyer et qui ne doit pas être occultée visuellement par les barres système.
- Les encarts de gestes système s'appliquent aux zones de navigation par gestes utilisées par le système et qui sont prioritaires sur votre application.
Barre d'état
Sur Android, la barre d'état contient des icônes de notification et des icônes système. L'utilisateur interagit avec la barre d'état en la faisant glisser vers le bas pour accéder au volet des notifications.
La barre d'état peut apparaître différemment en fonction du contexte, de l'heure de la journée, des préférences ou des thèmes définis par l'utilisateur, ainsi que d'autres paramètres. Vous pouvez également définir le style de la barre d'état, comme dans les exemples suivants.
Assurez-vous que le contenu de votre application couvre la totalité de l'écran maintenant que l'affichage de bord à bord est requis. Utilisez des barres système transparentes avec du contenu bord à bord, comme illustré dans l'exemple suivant.
Lorsque vous recevez une notification, une icône apparaît généralement dans la barre d'état. Cela indique à l'utilisateur qu'il y a quelque chose à voir dans le panneau des notifications. Il peut s'agir de l'icône ou du symbole de votre application pour représenter la chaîne. Consultez la section Conception des notifications.
Définir le style de la barre d'état
Appliquez un style à l'arrière-plan de la barre d'état dans le thème de votre application, avec une couleur ou un style personnalisé, et définissez la transparence et l'opacité.
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
Si vous définissez manuellement la couleur d'arrière-plan, vous pouvez éventuellement styliser le contenu de la barre d'état sur clair ou sombre pour optimiser le contraste.
Encoches et barre d'état
Une encoche est une zone de certains appareils qui s'étend dans la surface de l'écran afin d'offrir de l'espace aux capteurs frontaux. Cela peut affecter l'apparence des barres d'état. Les encoches peuvent varier selon le fabricant.
Découvrez comment prendre en charge les encoches.
Barre de navigation
Android permet aux utilisateurs de contrôler la navigation à l'aide des commandes Retour, Accueil et Aperçu:
- La fonction Retour revient directement à la vue précédente.
- L'écran d'accueil quitte l'application pour revenir à l'écran d'accueil de l'appareil.
- "Vue d'ensemble" indique que les applications sont ouvertes et ont été ouvertes récemment.
Les utilisateurs peuvent choisir parmi différentes configurations de barre de navigation, y compris la navigation par gestes (recommandé) et la navigation à trois boutons.
Navigation par gestes
Introduit dans Android 10 (niveau d'API 29), la navigation par gestes est le type de navigation recommandé, bien que vous ne puissiez pas ignorer les préférences de l'utilisateur. La navigation par gestes n'utilise pas de boutons pour le retour, l'accueil et l'aperçu, mais une seule poignée de geste pour l' affordance. Les utilisateurs interagissent en balayant l'écran depuis le bord gauche ou droit pour passer d'une page à l'autre, et inversement. Pour ouvrir l'aperçu, balayez l'écran vers le haut de manière prolongée.
La navigation par gestes est un modèle de navigation plus évolutif pour la conception sur des appareils mobiles et des écrans plus grands. Pour offrir la meilleure expérience utilisateur possible, tenez compte de la navigation par gestes en:
- Compatibilité avec le contenu bord à bord
- Évitez d'ajouter des interactions ou des zones cibles tactiles sous les encarts de navigation par gestes.
Découvrez comment implémenter la navigation par gestes.
Navigation à trois boutons
La navigation à trois boutons fournit trois boutons pour "Retour", "Accueil" et "Aperçu".
Autres variantes de la barre de navigation
Selon la version d'Android et l'appareil, d'autres configurations de la barre de navigation peuvent être disponibles pour vos utilisateurs. La navigation à deux boutons, par exemple, fournit deux boutons pour la page d'accueil et la navigation "Retour".
Définir un style de navigation
L'exemple suivant montre comment implémenter un style de navigation.
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android gère toutes les protections visuelles de l'interface utilisateur en mode de navigation par gestes ou en mode bouton.
Mode de navigation par gestes: le système applique une adaptation dynamique des couleurs, dans laquelle le contenu des barres système change de couleur en fonction du contenu derrière elles. Dans l'exemple suivant, la poignée de la barre de navigation prend une couleur sombre si elle est placée au-dessus d'un contenu clair, et inversement.
Figure 13:Adaptation des couleurs dynamique Modes des boutons: le système applique un fond translucide derrière les barres système (pour le niveau d'API 29 ou supérieur) ou une barre système transparente (pour le niveau d'API 28 ou inférieur).
Figure 14:Adaptation des couleurs dynamique, dans laquelle les barres système changent de couleur en fonction du contenu qui se trouve derrière
Clavier et navigation
Chaque type de navigation réagit de manière appropriée au clavier à l'écran pour permettre à l'utilisateur d'effectuer des actions, comme fermer ou même modifier le type de clavier. Pour assurer une transition fluide au clavier, utilisez WindowInsetsAnimationCompat.
Mode immersif
Vous pouvez masquer les barres système lorsque vous avez besoin d'une expérience en plein écran, par exemple lorsque l'utilisateur regarde un film. L'utilisateur doit toujours pouvoir appuyer pour afficher les barres système et l'interface utilisateur afin de naviguer ou d'interagir avec les commandes système. Apprenez-en plus sur la conception pour les modes plein écran ou découvrez comment masquer les barres système pour le mode immersif.