La barre d'état, la barre de légende et la barre de navigation sont appelées barres système. Elles affichent des informations importantes telles que le niveau de la batterie, l'heure et les alertes de notification, et permettent une interaction directe avec l'appareil depuis n'importe où.
Il est essentiel de prendre en compte l'importance des barres système, que vous conceviez une interface utilisateur pour les interactions avec l'OS Android, les méthodes de saisie ou d'autres fonctionnalités de l'appareil.
Points à retenir
Incluez des barres système lorsque vous concevez votre application. Tenez compte des zones de sécurité de l'UI, des interactions système, des méthodes de saisie, des découpes d'écran, des barres d'état, des barres de sous-titres, 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 dessinez le contenu derrière ces barres pour qu'il s'affiche bord à bord.
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 à la nuance de notification. Les styles de barre d'état peuvent être transparents ou translucides.
Icônes de barre d'état
Les icônes de la barre d'état peuvent 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, et d'autres paramètres. Pour en savoir plus, consultez la section Icônes de la 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 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
Rendre la barre d'état transparente ou translucide pour que le contenu de votre application s'étende sur l'ensemble de l'écran Définissez ensuite le style des icônes de la 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 assurer la rétrocompatibilité.
Dans l'image de gauche suivante, la barre d'état est transparente et l'arrière-plan vert de TopAppBar est dessiné derrière la barre d'état.
Les barres d'état transparentes sont idéales lorsque l'UI ne s'affiche pas sous la barre d'état ou qu'une image est dessinée sous la barre d'état. Les barres d'état transparentes 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 la section Conception bord à bord.
Barre de navigation
Android permet aux utilisateurs de contrôler la navigation à l'aide des commandes Retour, Accueil et Aperçu:
- La touche Retour vous permet de revenir directement à la vue précédente.
- L'écran d'accueil quitte l'application et affiche l'écran d'accueil de l'appareil.
- La vue d'ensemble affiche les applications actives et les applications récentes non fermées.
Les utilisateurs peuvent choisir parmi différentes configurations de barre de navigation, y compris la navigation par gestes (recommandée) et la navigation à trois boutons. Pour offrir la meilleure expérience possible, tenez compte de plusieurs types de navigation.
Navigation par gestes
Nous vous recommandons d'utiliser la navigation par gestes, sauf si l'utilisateur choisit d'utiliser une autre méthode dans ses préférences. La navigation par gestes n'utilise pas de boutons pour le Retour, l'Accueil et la vue d'ensemble. Elle affiche plutôt une seule poignée de geste pour l'affordance. Les utilisateurs interagissent en balayant l'écran de gauche à droite ou de droite à gauche pour revenir en arrière, et de bas en haut pour accéder à l'écran d'accueil. Balayez l'écran vers le haut de manière prolongée pour ouvrir la vue d'ensemble.
La navigation par gestes est un modèle de navigation plus évolutif pour la conception sur mobile et sur les grands écrans. Pour offrir une expérience utilisateur optimale, 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 à trois boutons
La navigation à trois boutons fournit trois boutons pour le Retour, l'Accueil et l'Aperçu.
Autres variantes de la barre de navigation
Selon la version d'Android et l'appareil, d'autres configurations de barre de navigation peuvent être disponibles pour vos utilisateurs. La navigation à deux boutons, par exemple, fournit deux boutons pour "Accueil" et "Retour".
Icônes de la barre de navigation
Les icônes de la barre de navigation peuvent également apparaître différemment en fonction des préférences ou des thèmes définis par l'utilisateur. Pour en savoir plus, consultez la section Icônes de la barre système.
Définir un style de barre de navigation
Android gère la protection visuelle de l'interface utilisateur en mode 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 derrière elles.
Mode navigation par gestes
Après avoir ciblé Android 15 ou appelé enableEdgeToEdge sur Activity, le système dessine une barre de navigation par gestes transparente et applique une adaptation des couleurs dynamique. Dans l'exemple suivant, la poignée de la barre de navigation passe à une couleur sombre si elle est placée au-dessus d'un contenu clair, et inversement.
Les barres de navigation par gestes transparentes sont toujours recommandées.
À faire
À éviter
Modes de bouton
Après avoir ciblé Android 15 ou appelé enableEdgeToEdge sur Activity, le système applique un écran transparent derrière les barres de navigation à boutons, que vous pouvez supprimer en définissant Window.setNavigationBarContrastEnforced() sur "false".
Nous vous recommandons d'utiliser des barres de navigation à trois boutons transparentes lorsqu'il existe une barre d'application ou une barre de navigation d'application inférieure, ou lorsque l'interface utilisateur 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 un rembourrage 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 la section Protection de la barre système.
Utilisez une navigation à trois boutons translucide pour faire défiler le contenu. Pour en savoir plus sur les considérations concernant la barre de navigation transparente, consultez
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 haut en bas depuis le bas de l'écran, utilisez WindowInsetsAnimationCompat.
Encoches
Sur certains appareils, une encoche est une zone qui s'étend sur la surface de l'écran pour laisser de l'espace aux capteurs avant. Les encoches de l'écran peuvent varier selon le fabricant. Tenez compte de la façon dont les encoches de l'écran interagissent avec le contenu, l'orientation et l'affichage bord à bord.
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 naviguer ou interagir avec les commandes système. Découvrez comment concevoir pour les modes plein écran ou comment masquer les barres système pour le mode immersif.