Conception bord à bord

Une application bord à bord exploite l'intégralité de l'écran en affichant l'interface utilisateur sous les barres système.

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

Points à retenir

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

Affichez votre contenu derrière les barres système

La fonctionnalité bord à bord vous permet d'afficher l'interface utilisateur sous les barres système pour une expérience immersive.

Une application peut résoudre les chevauchements de contenu en réagissant aux encarts. Les encarts décrivent la marge intérieure à appliquer au contenu de votre application pour éviter qu'il ne chevauche les barres système ou les fonctionnalités physiques de l'appareil, telles que les encoches. Découvrez comment prendre en charge le bord à bord 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 de barre système s'appliquent à l'interface utilisateur qui est à la fois cliquable et ne doit pas être visuellement masquée par les barres système.
  • Les encarts de geste système s'appliquent aux zones de navigation par gestes utilisées par le système d'exploitation qui sont prioritaires sur votre application.
  • Les encarts d'encoche s'appliquent aux zones de l'appareil qui s'étendent dans la surface d'affichage, comme l'encoche de la caméra.

Points à prendre en compte concernant la barre d'état

Consultez les Barres système Android pour obtenir des conseils de conception de base concernant les barres système. La section suivante aborde d'autres points à prendre en compte 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 barre d'application supérieure 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 moyennes et grandes peuvent se réduire à une barre d'application plus petite. Consultez les conseils Material.

À faire

Réduisez la petite barre d'application supérieure à la hauteur de la barre d'état si elle 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'interface utilisateur défile en dessous, afin que les icônes de la barre d'état ne semblent pas encombrées. Pour ce faire, commencez par rendre une interface utilisateur défilable bord à bord 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 :

  • Si applicable, utilisez la protection automatique de la barre d'application supérieure Material 3 lors du défilement,
  • Créez un composable de dégradé personnalisé ou utilisez GradientProtection pour les vues. Pour en savoir plus sur la procédure à suivre dans Compose, consultez Protection de la barre système.
Figure 3. Une 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.

À ne pas faire

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

À faire

Utiliser une protection de dégradé qui correspond à l'arrière-plan de chaque volet.

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

Figure 4. Une barre d'état translucide pour le volet de navigation. Cette image montre la protection de la barre d'état pour le volet 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 de la barre d'application supérieure Material 3 et une protection personnalisée.

Consultez les Barres système Android pour obtenir des conseils de conception de base concernant les barres de navigation. La section suivante aborde d'autres points à 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 voile de barre système pour la navigation à trois boutons lorsque la barre d'application inférieure disparaît.

À faire

Conservez la transparence de la navigation par gestes et n'ajoutez pas de voile supplémentaire.

Encoches

Les encoches peuvent affecter l'apparence de votre interface utilisateur. Les applications doivent gérer les encarts d'encoche afin que les parties importantes de l'interface utilisateur ne s'affichent pas sous l'encoche.

À faire

Insérez l'interface utilisateur critique à l'aide d'encarts d'encoche.

À ne pas faire

Placer l'interface utilisateur critique à l'extrémité de l'écran.

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

Figure 5. Les arrière-plans de barre d'application unis s'affichent dans l'encoche, tandis que l'interface utilisateur importante est insérée.

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

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

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

Autres conseils

En général, les arrière-plans et les lignes de séparation doivent également s'afficher 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.