Ensemble, la barre d'état 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 d'interagir directement avec l'appareil où que vous soyez.
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 transparentes, et dessinez le contenu derrière ces barres pour qu'il s'affiche bord à bord.
Évitez d'ajouter des gestes de pression ou des cibles de glisser-déposer sous les encarts de gestes. Ils sont en conflit avec la navigation de bord à bord et par gestes.
Figure 2:Encarts de gestes système Évitez de placer des cibles de pression sous ces zones.
Dessiner votre contenu derrière les barres système
La fonctionnalité d'affichage bord à bord permet à Android d'afficher l'UI sous les barres système pour une expérience immersive, ce qui est une demande courante des utilisateurs.
Une application peut résoudre les chevauchements de contenu en réagissant aux éléments intégrés. Les encarts indiquent la marge intérieure dont le contenu de votre application a besoin pour éviter de se chevaucher avec 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 d'affichage. Découvrez comment prendre en charge le mode plein écran et gérer les encarts dans Compose et les vues.
Tenez compte des types d'encarts suivants lorsque vous concevez des cas d'utilisation bord à bord:
- Les encarts des barres système s'appliquent à une interface utilisateur qui peut être enfoncée et qui ne doit pas être masqué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 ont la priorité 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 à la nuance de notification.
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. Vous pouvez définir le style d'icône de la barre d'état comme dans les exemples suivants.
Assurez-vous que le contenu de votre application s'étend sur l'ensemble de l'écran. Laissez les barres d'état et de navigation transparentes ou translucides avec un contenu d'un bord à l'autre, comme illustré dans l'exemple suivant.
L'affichage de bord à bord est appliqué sur Android 15 afin que les barres système soient transparentes ou translucides par défaut. Dans les versions antérieures d'Android, ne laissez pas les barres système opaques.
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
Assurez-vous que la barre d'état est transparente sur toutes les versions en appelant enableEdgeToEdge(). Assurez-vous de modifier les couleurs des icônes de la barre d'état pour assurer un contraste.
Par exemple, pour créer des icônes sombres:
WindowCompat.getInsetsController(window, window.decorView)
.isAppearanceLightStatusBars = false
Afficher les encoches et la barre d'état
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. Cela peut affecter l'apparence des barres d'état. Les encoches de l'écran peuvent varier selon le fabricant.
Découvrez comment gérer les encoches.
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.
- L'aperçu indique que les applications sont ouvertes et qu'elles ont été ouvertes récemment.
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
La navigation par gestes, introduite dans Android 10 (niveau d'API 29), est le type de navigation recommandé, mais vous ne pouvez pas remplacer 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. Elle affiche plutôt un seul bouton 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:
- Prise en charge du contenu bord à bord
- Évitez d'ajouter des interactions ou des 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 le Retour, l'Accueil et l'Aperçu.
Autres variantes de 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".
Définir un style de navigation
Assurez-vous que la barre de navigation est transparente ou translucide sur toutes les versions en appelant enableEdgeToEdge().
Sur les appareils Android 15 et versions ultérieures, ou après avoir appelé enableEdgeToEdge(), la navigation par gestes est transparente par défaut. La navigation à trois boutons est translucide par défaut ou opaque si elle se trouve dans la barre des tâches sur un appareil à grand écran.
Si votre application comporte une barre d'application inférieure, définissez Window.setNavigationBarContrastEnforced() sur false pour vous assurer que la barre d'application inférieure peut s'afficher sous la barre de navigation du système sans qu'un écran transparent ne soit appliqué dans la navigation à trois boutons.
Android gère la protection visuelle de l'interface utilisateur en mode navigation par gestes et en mode bouton.
Mode de navigation par gestes: le système applique une adaptation des couleurs dynamique, 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 passe à une couleur sombre si elle est placée au-dessus d'un contenu clair, et inversement.
Figure 12:Adaptation dynamique des couleurs Modes de bouton: le système applique un écran transparent derrière les barres de navigation à boutons, que vous pouvez supprimer en définissant
Window.setNavigationBarContrastEnforced()surfalse.
Figure 13:Adaptation dynamique des couleurs, où les barres système changent de couleur en fonction du contenu derrière elles
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 du 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'UI afin de naviguer ou d'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.