Conception bord à bord

Une application bord à bord tire parti de l'intégralité de l'écran en dessinant l'UI sous les barres système.

Figure 1. À gauche. Une application qui n'est pas bord à bord. C'est vrai. Une application bord à bord.

Points à retenir

  • Dessinez l'arrière-plan et le contenu défilant sous les barres système pour une expérience bord à bord.
  • Évitez d'ajouter des cibles de déplacement ou des gestes d'appui sous les encarts système, car ils sont en conflit avec la navigation par gestes et le mode bord à bord.
Figure 2. Application avec des encarts de geste mis en évidence en vert.

Afficher votre contenu derrière les barres système

La fonctionnalité de bord à bord vous permet de dessiner l'UI sous les barres système pour une expérience immersive.

Une application peut gérer les chevauchements de contenu en réagissant aux encarts. Les encarts décrivent la marge intérieure dont le contenu de votre application a besoin pour éviter de chevaucher les barres système ou les fonctionnalités de l'appareil physique, telles que les encoches. Découvrez comment prendre en charge le mode bord à bord et gérer les encarts dans Compose et Views.

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

  • Les encarts de barre système s'appliquent à l'UI qui est à la fois cliquable et 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 l'OS et qui sont prioritaires sur votre application.
  • Les encarts d'encoche s'appliquent aux zones de l'appareil qui s'étendent sur la surface de l'écran, comme l'encoche de la caméra.

Considérations relatives à la barre d'état

Consultez Barres système Android pour obtenir des conseils de conception de base concernant les barres système. La section suivante aborde d'autres considérations concernant la barre d'état.

Défilement du contenu

Les barres d'application supérieures doivent se réduire lors du défilement. Découvrez comment réduire la TopAppBar Material 3. Dans Material 3, les petites barres d'application supérieures peuvent se réduire à la hauteur de la barre d'état ou disparaître de l'écran. Les barres d'application supérieures de taille moyenne et grande peuvent se réduire à une barre d'application plus petite. Consultez les consignes Material.

À faire

Réduisez la petite barre d'application supérieure à la hauteur de la barre d'état si la barre d'application est fixe.

À faire

Ajoutez un dégradé de couleur d'arrière-plan correspondant si la petite barre d'application supérieure n'est pas fixe.

Les barres d'état doivent être translucides lorsque l'UI défile en dessous, afin que les icônes de la barre d'état ne semblent pas encombrées. Pour ce faire, commencez par créer une UI de bord à bord défilable en suivant les étapes de la documentation LazyColumn ou RecyclerView. Ensuite, assurez-vous que la barre système est translucide en procédant de l'une des manières suivantes :

  • S'appuyer sur la protection automatique TopAppBar Material 3 lors du défilement, le cas échéant.
  • Créez un composable de dégradé personnalisé. Pour en savoir plus, consultez Protection de la barre système.
Figure 3 : Application avec des encarts de geste mis en évidence en vert.

Pour les mises en page adaptatives, assurez-vous qu'il existe des protections distinctes pour les volets avec des couleurs d'arrière-plan différentes.

À éviter

Avoir une protection de dégradé qui ne correspond pas à l'arrière-plan de chaque volet

À faire

Bénéficier d'une protection par dégradé qui correspond à l'arrière-plan de chaque volet.

De même, les tiroirs de navigation doivent également être protégés séparément du reste de l'application.

Figure 4. Barre d'état translucide pour le panneau de navigation. Cette image montre la protection de la barre d'état pour le panneau de navigation, mais pas pour l'application.

N'empilez pas les protections de la barre d'état, par exemple en utilisant à la fois la protection intégrée TopAppBar de Material 3 et une protection personnalisée.

Pour obtenir des conseils de base sur la conception de la barre de navigation, consultez Barres système Android. La section suivante inclut d'autres éléments à prendre en compte concernant la barre de navigation.

Défilement du contenu

Les barres d'application inférieures doivent se réduire lors du défilement.

À faire

Ajoutez un scrim de barre système pour la navigation à trois boutons lorsque la barre d'application inférieure disparaît.

À faire

Maintenez la transparence de la navigation par gestes et n'ajoutez pas de calque supplémentaire.

Encoches

Les encoches peuvent affecter l'apparence de votre UI. Les applications doivent gérer les encoches d'écran afin que les parties importantes de l'UI ne soient pas dessinées sous l'encoche.

À faire

Insérez l'UI critique à l'aide des encoches de l'écran.

À éviter

Placez l'UI critique tout au bord de l'écran.

Toutefois, les arrière-plans de barre d'application unie doivent s'étendre dans l'encoche, comme illustré dans l'image suivante.

Figure 5 : Les arrière-plans de barre d'application solides s'étendent dans l'encoche, tandis que l'UI importante est insérée.

Assurez-vous que les carrousels horizontaux s'affichent dans l'encoche.

Figure 6 : Affichage horizontal bord à bord, où le carrousel défile dans l'encoche.

Découvrez comment prendre en charge les encoches dans Compose.

Autres conseils

En général, les arrière-plans et les lignes de séparation doivent également s'étendre de bord à bord, tandis que le contenu tel que le texte et les boutons doit être inséré pour éviter l'interface utilisateur du système et les éléments matériels.