Barres système Android

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, des alertes et interagir directement avec votre appareil, où que vous soyez.

Il est essentiel de prendre en compte la proéminence des barres système, que vous concevoir une UI pour les interactions avec l'OS Android, les modes de saisie ou d'autres des fonctionnalités de l'appareil. Laissez les barres système en haut de la plupart des calques pour garantir dont elles sont prises en compte.

<ph type="x-smartling-placeholder">

</ph>

Figure 1:Images placées derrière les barres système

Points à retenir

• Incluez des barres système dans vos conceptions pour tenir compte des zones de sécurité de l'interface utilisateur, des interactions, modes de saisie, encoches et 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: rendre les barres système transparentes et afficher votre application en plein écran en continuant l'UI sous les barres pour offrir une expérience bord à bord.

• Si vous ne pouvez pas rendre les deux barres transparentes, assurez-vous que les couleurs des barres correspondre à la couleur du corps de votre application. Par exemple, faites correspondre le bas couleur de la barre de navigation avec celle de la barre de gestes et de la barre d'état supérieure couleur avec la couleur du corps.

  <ph type="x-smartling-placeholder">

  </ph>

  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. ces entrent en conflit avec la navigation bord à bord et la navigation par gestes.

  <ph type="x-smartling-placeholder">

  </ph>

  Figure 3:Encarts de gestes système Évitez d'appuyer sur cibles dans ces domaines

  Remarque :Les barres système et la navigation peuvent varier selon le fabricant de l'appareil. Plus anciens les appareils peuvent comporter des boutons de navigation physiques au lieu de boutons logiciels.

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 barre de navigation transparente est une demande courante des utilisateurs. (Découvrez comment bord à bord).

Remarque :Ne masquez pas les barres système, sauf temporairement pour le mode immersif. comme regarder une vidéo en plein écran.

Une application peut résoudre les problèmes de chevauchement au niveau du contenu en réagissant aux encarts. Les encarts décrivent la quantité de contenu à ajouter à votre application pour éviter tout chevauchement avec parties de l'interface utilisateur de l'OS Android, telles que la barre de navigation ou la barre d'état, ou avec Fonctionnalités de l'appareil physique, telles que les encoches

Tenez compte des types d'encarts suivants lorsque vous concevez pour une utilisation bord à bord cas:

• Les encarts de barre système s'appliquent aux interfaces utilisateur sur lesquelles il est à la fois tactile et qui ne doivent pas l'être visuellement obscurcis 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. qui prévalent sur votre application.

Barre d'état

Sur Android, la barre d'état contient des icônes de notification et des icônes système. La l'utilisateur interagit avec la barre d'état en la faisant glisser vers le bas pour accéder à la notification l'ombre.

<ph type="x-smartling-placeholder">

</ph>

Figure 4:Zone de la barre d'état mise en évidence au-dessus de la barre d'application supérieure

La barre d'état peut s'afficher différemment selon le contexte, l'heure de la journée, les préférences ou thèmes définis par l'utilisateur, et d'autres paramètres. Vous pouvez également définir style de barre d'état, comme dans les exemples suivants.

<ph type="x-smartling-placeholder">

</ph>

Figure 5:Barre d'état avec les thèmes clair et sombre

Assurez-vous que le contenu de votre application occupe la totalité de l'écran, maintenant que l'affichage de bord à bord obligatoire. Utilisez des barres système transparentes avec du contenu bord à bord, comme indiqué dans les dans l'exemple suivant.

<ph type="x-smartling-placeholder">

</ph>

Figure 6:Barres transparentes à l'aide de l'icône Fonctionnalité bord à bord, idéale pour mettre en valeur votre contenu en utilisant le plus d'espace à l'écran.

<ph type="x-smartling-placeholder">

</ph>

Figure 7:Appliquez un style à vos barres système afin d'améliorer votre contenu ou de les adapter votre image de marque. Ne conservez pas les attributs par défaut des barres système.

Lorsque vous recevez une notification, une icône apparaît généralement dans la barre d'état. Ce signale à 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. Voir Conception des notifications :

<ph type="x-smartling-placeholder">

</ph>

Figure 8:Icône de notification dans la barre d'état

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 personnalisée ou style, et définir 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 appliquer un style à l'état le contenu de la barre en clair ou sombre pour un contraste optimal.

Encoches et barre d'état

Une encoche est une zone de certains appareils qui s'étend dans l'écran afin de libérer de l'espace pour les capteurs avant. Cela peut affecter l'apparence de barres d'état. Les encoches peuvent varier selon le fabricant.

Découvrez comment prendre en charge les encoches.

<ph type="x-smartling-placeholder">

</ph>

Figure 9:Exemples d'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 diverses configurations de barre de navigation, y compris les gestes (recommandé) et la navigation à trois boutons.

Navigation par gestes

Introduit dans Android 10 (niveau d'API 29), la navigation par gestes est recommandée type de navigation, bien que vous ne puissiez pas remplacer les préférences de l'utilisateur. Geste la navigation n'utilise pas les boutons Retour, Accueil et Aperçu, au lieu d'afficher un poignée de geste unique pour l' affordance. Les utilisateurs interagissent en balayant l’écran de la gauche ou sur le bord droit de l'écran pour avancer et avancer et remonter à domicile. 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 mobiles et grands écrans. Pour offrir la meilleure expérience utilisateur possible, tenez compte navigation par gestes par:

• 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.

<ph type="x-smartling-placeholder">

</ph>

Figure 10:Barre de navigation par gestes

Conseil :Il n'existe aucun moyen de déterminer le type de navigation dont dispose l'utilisateur. est activé. Pour offrir la meilleure expérience possible, tenez compte de plusieurs types la navigation. Si vous êtes en position de devoir hiérarchiser votre travail, il est il est préférable de donner la priorité à la navigation par gestes, car il s’agit du type de navigation que les utilisateurs Android actuels et nouveaux connaissent le mieux.

Navigation à trois boutons

La navigation à trois boutons fournit trois boutons pour "Retour", "Accueil" et "Aperçu".

<ph type="x-smartling-placeholder">

</ph>

Figure 11:Barre de navigation à trois boutons

Autres variantes de la barre de navigation

Selon la version d'Android et l'appareil, d'autres configurations de la barre de navigation peuvent mis à la disposition de vos utilisateurs. La navigation à deux boutons, par exemple, offre deux possibilités boutons pour accueil et retour.

<ph type="x-smartling-placeholder">

</ph>

Figure 12:Barre de navigation à deux boutons

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 toute la protection visuelle de l'interface utilisateur en un geste le mode de navigation ou dans les modes bouton.

• Mode de navigation par gestes: le système applique une adaptation dynamique des couleurs, dont le contenu des barres système change de couleur en fonction du contenu qui se cache derrière. Dans l'exemple suivant, la poignée de la barre de navigation devient sombre s'il est placé au-dessus d'un contenu clair, et inversement.

  <ph type="x-smartling-placeholder">

  </ph>

  Figure 13:Adaptation des couleurs dynamique

• Modes des boutons: le système applique un fond translucide derrière le système. barres (pour le niveau d'API 29 ou supérieur) ou une barre système transparente (pour le niveau d'API) 28 ou version antérieure).

  <ph type="x-smartling-placeholder">

  </ph>

  Figure 14:Adaptation des couleurs dynamique, avec les barres système changent de couleur en fonction de leur contenu

Clavier et navigation

<ph type="x-smartling-placeholder">

</ph>

Figure 15:Clavier à l'écran avec barres de navigation

Chaque type de navigation réagit de manière appropriée au clavier à l'écran pour : permettent à l'utilisateur d'effectuer des actions, comme fermer ou même modifier type de clavier. Pour garantir une transition en douceur au clavier, qui synchronise la transition entre l'application et le clavier vers le haut et le bas à partir du bas de l'écran, utilisez WindowInsetsAnimationCompat

Mode immersif

<ph type="x-smartling-placeholder">

</ph>

Figure 16:Mode immersif affichant une expérience plein écran sur un appareil mobile en mode paysage

Vous pouvez masquer les barres système lorsque vous avez besoin d'un affichage en plein écran, par exemple lorsque l'utilisateur regarde un film. L'utilisateur doit toujours pouvoir appuyer sur 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.