Barres système Android

La barre d'état, la barre de légende et la barre de navigation sont les barres système. Elles affichent des informations importantes telles que le niveau de batterie, l'heure et les alertes de notification, et permettent une interaction directe avec l'appareil depuis n'importe où.

Tenez toujours compte de la présence et de la visibilité des barres système, que vous conceviez des mises en page, des méthodes de saisie ou d'autres fonctionnalités de l'appareil.

android skills add edge-to-edge

Points à retenir

• Incluez des barres système dans vos mises en page pour différentes tailles d'écran et différents facteurs de forme. Tenez compte des zones sécurisées de l'UI, des interactions système, des méthodes de saisie, des encoches, des barres d'état, des barres de légende, des barres de navigation et d'autres fonctionnalités de l'appareil.

• Laissez les barres d'état et de navigation du système transparentes ou translucides, et affichez le contenu derrière ces barres pour passer en mode bord à bord.

• Utilisez WindowInsets pour gérer correctement les intrusions de la barre système et vous assurer que votre contenu n'est pas masqué dans vos mises en page adaptatives.

• Utilisez des mises en page canoniques qui utilisent efficacement l'espace à l'écran.

Barre d'état

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. Les styles de barre d'état peuvent être transparents ou translucides.

Icônes de barre d'état

Les icônes de barre d'état peuvent s'afficher différemment selon le contexte, l'heure, les préférences ou les thèmes définis par l'utilisateur, et d'autres paramètres. Pour en savoir plus, consultez Icônes de barre système.

Lorsqu'une notification arrive, une icône s'affiche généralement dans la barre d'état. Cela indique à l'utilisateur qu'il y a quelque chose à voir dans le volet des notifications. Il peut s'agir de l'icône de votre application ou d'un symbole représentant le canal. Consultez Conception des notifications.

Définir le style de la barre d'état

Rendez la barre d'état transparente ou translucide pour que le contenu de votre application s'affiche sur tout l'écran. Définissez ensuite le style des icônes de votre barre système afin qu'elles aient un contraste approprié.

Le mode bord à bord est appliqué sur Android 15, ce qui rend la barre d'état transparente par défaut. Appelez enableEdgeToEdge() pour la rétrocompatibilité.

Dans l'image de gauche suivante, la barre d'état est transparente et l'arrière-plan vert de TopAppBar s'affiche derrière la barre d'état.

Les barres d'état transparentes sont idéales lorsque l'UI n'apparaît pas sous la barre d'état ou qu'une image s'affiche sous la barre d'état. Les barres d'état translucides sont idéales lorsque l'UI défile sous la barre d'état. Pour en savoir plus sur la protection des dégradés , consultez Conception bord à bord.

Navigation

Android permet aux utilisateurs de contrôler la navigation à l'aide des commandes "Retour", "Accueil" et "Aperçu" :

• "Retour" permet de revenir à la vue précédente.
• "Accueil" permet de quitter l'application et d'accéder à l'écran d'accueil de l'appareil.
• "Aperçu" affiche les applications actives et les applications récentes qui n'ont pas été ignorées.

Les utilisateurs peuvent choisir parmi différentes configurations de navigation, y compris la navigation par gestes et la navigation adaptative. Pour offrir une expérience utilisateur optimale, tenez compte de plusieurs types de navigation.

Navigation par gestes

La navigation par gestes n'utilise pas de boutons pour "Retour", "Accueil" et "Aperçu". Elle affiche plutôt un seul bouton de geste pour l'affordance. Les utilisateurs interagissent en balayant l'écran depuis le bord gauche ou droit pour revenir en arrière, et en balayant l'écran de bas en haut pour accéder à l'écran d'accueil. Balayer l'écran vers le haut et maintenir la pression permet d'ouvrir l'aperçu.

La navigation par gestes est un modèle de navigation plus évolutif pour la conception sur les écrans mobiles et plus grands. Pour offrir la meilleure expérience utilisateur possible, tenez compte de la navigation par gestes en procédant comme suit :

• Prise en charge du contenu bord à bord.
• Évitez d'ajouter des interactions ou des cibles tactiles sous les encarts de navigation par gestes.

Pour en savoir plus, consultez Ajouter la prise en charge de la navigation par gestes.

Navigation adaptative

Un autre modèle de navigation courant sur Android consiste à basculer entre un rail de navigation et une barre de navigation en fonction de la classe de taille de la fenêtre de l'écran. Les composants de navigation adaptative dans Jetpack Compose gèrent plusieurs facteurs de forme tout en empêchant les barres système d'interférer avec la mise en page des composants de navigation.

Dans les mises en page adaptatives, réfléchissez au comportement ou au style des barres système dans différents contextes, tels que les tailles de fenêtre compactes ou étendues, ou les différentes positions pliables.

Pour en savoir plus, consultez Créer une navigation adaptative.

Icônes de navigation

Les icônes de navigation peuvent également s'afficher différemment selon les préférences ou les thèmes définis par l'utilisateur. Pour en savoir plus, consultez Icônes de barre système.

Définir un style de navigation

Android gère la protection visuelle de l'interface utilisateur en mode de navigation par gestes et en mode bouton. Le système applique une adaptation dynamique des couleurs, dans laquelle le contenu des barres système change de couleur en fonction du contenu situé derrière elles.

Mode de navigation par gestes

Après avoir ciblé Android 15 ou appelé enableEdgeToEdge sur l'Activity, le système dessine une barre de navigation par gestes transparente et applique une adaptation dynamique des couleurs. Dans l'exemple suivant, le bouton de la barre de navigation passe à une couleur sombre s'il est placé au-dessus d'un contenu clair, et inversement.

Les barres de navigation par gestes transparentes sont toujours recommandées.

check_circle

À faire

Laissez la barre de navigation par gestes transparente.

cancel

À éviter

Ajoutez un arrière-plan à la barre de navigation par gestes.

Modes bouton

Après avoir ciblé Android 15 ou appelé enableEdgeToEdge sur l'Activity, le système applique un voile translucide derrière les barres de navigation des boutons, que vous pouvez supprimer en définissant Window.setNavigationBarContrastEnforced() sur "false".

Utilisez des barres de navigation transparentes à trois boutons lorsqu'il existe une barre d'application inférieure ou une barre de navigation d'application inférieure, ou lorsque l'UI ne défile pas sous la barre de navigation à trois boutons. Pour obtenir une barre de navigation transparente, définissez Window.setNavigationBarContrastEnforced() sur "false" et ajoutez des marges intérieures aux barres d'application inférieures pour qu'elles s'affichent sous les barres de navigation du système, comme illustré dans les figures 7, 8 et 9. Pour en savoir plus, consultez Protection de la barre système.

Utilisez une barre de navigation translucide à trois boutons pour faire défiler le contenu. Pour en savoir plus sur les considérations relatives à la barre de navigation translucide, consultez Conception bord à bord.

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 telles que fermer ou même modifier le type de clavier. Pour assurer une transition fluide qui synchronise la transition de l'application avec le clavier qui glisse de bas en haut et de haut en bas de l'écran, utilisez WindowInsetsAnimationCompat.

Mises en page

Les mises en page adaptatives optimisent l'espace d'affichage disponible. Elles organisent l'UI de l'application en déplaçant le contenu dans des volets secondaires ou tertiaires.

Lorsque vous concevez des mises en page adaptatives, réfléchissez à la manière dont les barres système interagissent avec votre contenu. Utilisez WindowInsets pour vous assurer que votre UI n'est pas masquée par les barres système sur les écrans tels que les grands écrans, les appareils pliables et les fenêtres d'application en mode multifenêtre et en mode fenêtrage du bureau.

Lorsque votre application s'affiche en mode bord à bord, vérifiez que le contenu et les commandes ne sont pas masqués par l'UI du système. Par exemple, si la barre de navigation recouvre un bouton, l'utilisateur risque de ne pas pouvoir cliquer dessus.

Pour en savoir plus, consultez Mises en page canoniques.

Encoches

Une encoche est une zone de certains appareils qui s'étend sur la surface d'affichage pour laisser de la place aux capteurs avant. Les encoches peuvent varier selon le fabricant. Réfléchissez à la manière dont les encoches interagissent avec le contenu, l'orientation et le mode bord à bord.

Mode immersif

Vous pouvez masquer les barres système lorsque vous avez besoin d'une expérience plein écran, par exemple lorsque l'utilisateur regarde un film. L'utilisateur doit toujours pouvoir appuyer pour afficher les barres système et naviguer ou interagir avec les commandes système. Pour en savoir plus, consultez Contenu immersif et Masquer les barres système pour le mode immersif.