Afficher le contenu bord à bord dans les vues

Essayer Compose

Jetpack Compose est le kit d'outils d'UI recommandé pour Android. Découvrez comment utiliser le mode bord à bord dans Compose.

Bord à bord dans Compose →

Une fois que vous ciblez le SDK 35 ou une version ultérieure sur un appareil équipé d'Android 15 ou version ultérieure, votre application s'affiche de bord à bord. La fenêtre s'étend sur toute la largeur et la hauteur de l'écran en s'affichant derrière les barres système. Les barres système incluent la barre d'état, la barre de légende et la barre de navigation.

De nombreuses applications comportent une barre d'application supérieure. La barre d'application supérieure doit s'étendre jusqu'au bord supérieur de l'écran et s'afficher derrière la barre d'état. La barre d'application supérieure peut éventuellement se réduire à la hauteur de la barre d'état lorsque le contenu défile.

De nombreuses applications comportent également une barre d'application ou une barre de navigation inférieure. Ces barres doivent également s'étendre jusqu'au bord inférieur de l'écran et s'afficher derrière la barre de navigation. Sinon, les applications doivent afficher un contenu à faire défiler derrière la barre de navigation.

Figure 1. Barres système dans une mise en page bord à bord.

Lorsque vous implémentez une mise en page bord à bord dans votre application, tenez compte des points suivants:

1. Activer un affichage de bord à bord
2. Gérez les chevauchements visuels.
3. Envisagez d'afficher des écrans de masquage derrière les barres système.

Figure 2 Exemple d'imagerie derrière la barre d'état.

Important :L'affichage de bord à bord est appliqué sur Android 15 (niveau d'API 35) ou version ultérieure une fois que votre application cible le SDK 35. Si votre application n'est pas encore bord à bord, des parties de celle-ci peuvent être masquées et vous devez gérer les encarts. Selon l'application, ce travail peut être important ou non.

Activer l'affichage de bord à bord

Si votre application cible le SDK 35 ou une version ultérieure, l'affichage de bord à bord est automatiquement activé pour les appareils Android 15 ou version ultérieure.

Pour activer le plein écran sur les versions précédentes d'Android, procédez comme suit:

1. Ajoutez une dépendance à la bibliothèque androidx.activity dans le fichier build.gradle de votre application ou de votre module:

   Kotlin

   dependencies {
       val activity_version = activity_version
       // Java language implementation
       implementation("androidx.activity:activity:$activity_version")
       // Kotlin
       implementation("androidx.activity:activity-ktx:$activity_version")
   }

   Groovy

   dependencies {
       def activity_version = activity_version
       // Java language implementation
       implementation 'androidx.activity:activity:$activity_version'
       // Kotlin
       implementation 'androidx.activity:activity-ktx:$activity_version'
   }

2. Importez la fonction d'extension enableEdgeToEdge dans votre application:

Activez manuellement l'affichage de bord à bord en appelant enableEdgeToEdge dans onCreate de votre Activity. Il doit être appelé avant setContentView.

Kotlin

     override fun onCreate(savedInstanceState: Bundle?) {
       enableEdgeToEdge()
       super.onCreate(savedInstanceState)
       ...
     }
   

Java

     @Override
     protected void onCreate(@Nullable Bundle savedInstanceState) {
       EdgeToEdge.enable(this);
       super.onCreate(savedInstanceState);
       ...
     }
   

Par défaut, enableEdgeToEdge() rend les barres système transparentes, sauf en mode navigation à trois boutons, où la barre d'état reçoit un écran transparent. Les couleurs des icônes système et du masquage sont ajustées en fonction du thème clair ou sombre du système.

La fonction enableEdgeToEdge() déclare automatiquement que l'application doit être mise en page de bord à bord et ajuste les couleurs des barres système.

Pour activer l'affichage de bord à bord dans votre application sans utiliser la fonction enableEdgeToEdge(), consultez la section Configurer manuellement l'affichage de bord à bord.

Gérer les chevauchements à l'aide des marges intérieures

Certaines vues de votre application peuvent s'afficher derrière les barres système, comme illustré dans la figure 3.

Vous pouvez résoudre les chevauchements en réagissant aux encarts, qui spécifient les parties de l'écran qui se chevauchent avec l'UI du système, comme la barre de navigation ou la barre d'état. L'intersection peut signifier l'affichage au-dessus du contenu, mais elle peut également informer votre application sur les gestes système.

Les types d'encarts qui s'appliquent à l'affichage de votre application de bord à bord sont les suivants:

• Encarts des barres système:idéal pour les vues cliquables qui ne doivent pas être masquées visuellement par les barres système.

• Encoches d'affichage:pour les zones où il peut y avoir une encoche d'écran en raison de la forme de l'appareil.

• Encarts de gestes système:pour les zones de navigation par gestes utilisées par le système et qui ont la priorité sur votre application.

Encarts des barres système

Les encarts de barre système sont le type d'encarts le plus couramment utilisé. Ils représentent la zone où l'UI du système s'affiche sur l'axe Z au-dessus de votre application. Ils sont particulièrement utiles pour déplacer ou rembourser les vues de votre application qui peuvent être enfoncées et qui ne doivent pas être masquées visuellement par les barres système.

Par exemple, le bouton d'action flottant (FAB) de la figure 3 est partiellement masqué par la barre de navigation:

Figure 3 : Barre de navigation recouvrant un bouton d'action flottant dans une mise en page de bord à bord.

Pour éviter ce type de chevauchement visuel en mode geste ou en mode bouton, vous pouvez augmenter les marges de la vue à l'aide de getInsets(int) avec WindowInsetsCompat.Type.systemBars().

L'exemple de code suivant montre comment implémenter des marges intérieures de barre système:

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets ->
  val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
  // Apply the insets as a margin to the view. This solution sets
  // only the bottom, left, and right dimensions, but you can apply whichever
  // insets are appropriate to your layout. You can also update the view padding
  // if that's more appropriate.
  v.updateLayoutParams<MarginLayoutParams> {
      leftMargin = insets.left
      bottomMargin = insets.bottom
      rightMargin = insets.right
  }

  // Return CONSUMED if you don't want the window insets to keep passing
  // down to descendant views.
  WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> {
  Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
  // Apply the insets as a margin to the view. This solution sets only the
  // bottom, left, and right dimensions, but you can apply whichever insets are
  // appropriate to your layout. You can also update the view padding if that's
  // more appropriate.
  MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams();
  mlp.leftMargin = insets.left;
  mlp.bottomMargin = insets.bottom;
  mlp.rightMargin = insets.right;
  v.setLayoutParams(mlp);

  // Return CONSUMED if you don't want the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

Si vous appliquez cette solution à l'exemple illustré à la figure 3, aucun chevauchement visuel ne se produit en mode bouton, comme illustré à la figure 4:

Figure 4 : Résolution du chevauchement visuel en mode bouton.

Il en va de même pour le mode de navigation par gestes, comme illustré dans la figure 5:

Figure 5 : Résolution du chevauchement visuel en mode navigation par gestes

Encoches de l'écran

Certains appareils comportent des encoches. En général, la découpe se trouve en haut de l'écran et est incluse dans la barre d'état. Lorsque l'écran de l'appareil est en mode Paysage, la découpe peut se trouver sur le bord vertical. En fonction du contenu affiché à l'écran par votre application, vous devez implémenter une marge intérieure pour éviter les encoches, car par défaut, les applications s'affichent dans l'encoche.

Par exemple, de nombreux écrans d'application affichent une liste d'éléments. Ne masquez pas les éléments de liste avec la découpe de l'écran ni les barres système.

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets ->
  val bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
      or WindowInsetsCompat.Type.displayCutout()
  )
  v.updatePadding(
    left = bars.left,
    top = bars.top,
    right = bars.right,
    bottom = bars.bottom,
  )
  WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> {
  Insets bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
    | WindowInsetsCompat.Type.displayCutout()
  );
  v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
  return WindowInsetsCompat.CONSUMED;
});

Déterminez la valeur de WindowInsetsCompat en prenant la ou logique des barres système et des types de découpes d'affichage.

Définissez clipToPadding sur RecyclerView afin que la marge intérieure défile avec les éléments de la liste. Cela permet aux éléments de se placer derrière les barres système lorsque l'utilisateur fait défiler l'écran, comme illustré dans l'exemple suivant.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

Encastrements de gestes système

Les encarts de gestes système représentent les zones de la fenêtre où les gestes système sont prioritaires sur votre application. Ces zones sont représentées en orange dans la figure 6:

Figure 6 : Encarts de gestes système.

Comme pour les encarts de la barre système, vous pouvez éviter les chevauchements des encarts de gestes système à l'aide de getInsets(int) avec WindowInsetsCompat.Type.systemGestures().

Utilisez ces encarts pour déplacer ou ajouter un espace aux vues à balayer afin de les éloigner des bords. Les cas d'utilisation courants incluent les bottom sheets, le balayage dans les jeux et les carrousels implémentés à l'aide de ViewPager2.

Sous Android 10 ou version ultérieure, les encarts de gestes système contiennent un encart en bas pour le geste d'accueil, et un encart à gauche et à droite pour les gestes Retour:

Image 7. Mesures d'encart des gestes système.

L'exemple de code suivant montre comment implémenter des encarts de gestes système:

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets ->
    val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures())
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.updatePadding(insets.left, insets.top, insets.right, insets.bottom)

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> {
    Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures());
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.setPadding(insets.left, insets.top, insets.right, insets.bottom);

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

Composants Material

De nombreux composants Android Material (com.google.android.material) basés sur des vues gèrent automatiquement les encarts, y compris BottomAppBar, BottomNavigationView, NavigationRailView et NavigationView.

Toutefois, AppBarLayout ne gère pas automatiquement les marges intérieures. Ajoutez android:fitsSystemWindows="true" pour gérer les encarts supérieurs.

Découvrez comment gérer les marges intérieures avec les composants Material dans Compose.

Distribution des encarts rétrocompatible

Pour arrêter le transfert des encarts vers les vues enfants et éviter un rembourrage excessif, vous pouvez consommer des encarts à l'aide de la constante WindowInsetsCompat.CONSUMED. Toutefois, sur les appareils équipés d'Android 10 (niveau d'API 29 ou version antérieure), les encarts ne sont pas distribués aux frères et sœurs après l'appel de WindowInsetsCompat.CONSUMED, ce qui peut entraîner un chevauchement visuel involontaire.

Figure 8 : Exemple de distribution d'incrustation défectueuse. Les marges intérieures ne sont pas distribuées aux vues sœurs après que ViewGroup 1 a consommé des marges intérieures sur Android 10 (niveau d'API 29) ou version antérieure, ce qui entraîne le chevauchement de TextView 2 avec la barre de navigation du système. Toutefois, les encarts sont distribués aux vues sœurs sur Android 11 (niveau d'API 30) ou version ultérieure, comme prévu.

Pour vérifier que les marges intérieures sont distribuées aux frères et sœurs pour toutes les versions Android compatibles, utilisez ViewGroupCompat#installCompatInsetsDispatch avant de consommer les marges intérieures, disponibles sur AndroidX Core et Core-ktx 1.16.0-alpha01 et versions ultérieures.

Kotlin

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
val rootView = findViewById(R.id.main)
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView)

Java

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
LinearLayout rootView = findViewById(R.id.main);
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView);

Figure 9 : Correction de la distribution des encarts après l'appel de ViewGroupCompat#installCompatInsetsDispatch.

Mode immersif

Certains contenus sont mieux adaptés au mode plein écran, ce qui offre à l'utilisateur une expérience plus immersive. Vous pouvez masquer les barres système pour le mode immersif à l'aide des bibliothèques WindowInsetsController et WindowInsetsControllerCompat:

Kotlin

val windowInsetsController =
      WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())

Java

Window window = getWindow();
WindowInsetsControllerCompat windowInsetsController =
      WindowCompat.getInsetsController(window, window.getDecorView());
if (windowInsetsController == null) {
    return;
  }
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars());

Pour en savoir plus sur l'implémentation de cette fonctionnalité, consultez Masquer les barres système pour le mode immersif.

Icônes de la barre système

L'appel de enableEdgeToEdge garantit que les couleurs des icônes de la barre système sont mises à jour lorsque le thème de l'appareil change.

Lorsque vous passez en mode bord à bord, vous devrez peut-être mettre à jour manuellement les couleurs des icônes de la barre système afin qu'elles contrastent avec l'arrière-plan de votre application. Par exemple, pour créer des icônes de barre d'état claires:

Kotlin

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

Java

WindowCompat.getInsetsController(window, window.getDecorView())
    .setAppearanceLightStatusBars(false);

Protection de la barre système

Une fois que votre application cible le SDK 35 ou une version ultérieure, l'affichage bord à bord est appliqué. La barre d'état du système et les barres de navigation par gestes sont transparentes, mais la barre de navigation à trois boutons est translucide. Appelez enableEdgeToEdge pour rendre cette opération rétrocompatible.

Toutefois, les valeurs par défaut du système peuvent ne pas fonctionner pour tous les cas d'utilisation. Consultez les conseils de conception des barres système Android et la conception bord à bord pour déterminer si vous devez utiliser des barres système transparentes ou transparentes.

Créer des barres système transparentes

Créez une barre d'état transparente en ciblant Android 15 (SDK 35) ou version ultérieure, ou en appelant enableEdgeToEdge() avec des arguments par défaut pour les versions antérieures.

Créez une barre de navigation par gestes transparente en ciblant Android 15 ou version ultérieure, ou en appelant enableEdgeToEdge() avec des arguments par défaut pour les versions antérieures. Pour la barre de navigation à trois boutons, définissez Window.setNavigationBarContrastEnforced sur false, sinon un écran transparent sera appliqué.

Créer des barres système transparentes

Pour créer une barre d'état transparente, procédez comme suit:

1. Mettez à jour la dépendance androidx-core vers la version 1.16.0-beta01 ou ultérieure.
2. Encapsulez votre mise en page XML dans androidx.core.view.insets.ProtectionLayout et attribuez-lui un ID.
3. Accédez de manière programmatique à ProtectionLayout pour définir des protections, en spécifiant le côté et un GradientProtection pour la barre d'état.

<androidx.core.view.insets.ProtectionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_protection"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/item_list"
        android:clipToPadding="false"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--items-->

    </ScrollView>

</androidx.core.view.insets.ProtectionLayout>
system_bar_protection.xml

findViewById<ProtectionLayout>(R.id.list_protection)
    .setProtections(
        listOf(
            GradientProtection(
                WindowInsetsCompat.Side.TOP,
                // Ideally, this is the pane's background color
                paneBackgroundColor
            )
        )
    )
SystemBarProtectionSnippet.kt

Assurez-vous que le ColorInt transmis à GradientProtection correspond à l'arrière-plan du contenu. Par exemple, une mise en page "Liste et vue détaillée" affichée sur un appareil pliable peut avoir des GradientProtections de différentes couleurs pour le panneau de liste et le panneau d'informations.

Figure 1. Protection en dégradé de différentes couleurs.

Ne créez pas de barre de navigation par gestes transparente. Pour créer une barre de navigation à trois boutons transparente, procédez comme suit:

• Si votre mise en page est déjà encapsulée dans un ProtectionView, vous pouvez transmettre un ColorProtection ou un GradientProtection supplémentaire à la méthode setProtections. Avant de procéder, assurez-vous que window.isNavigationBarContrastEnforced = false.
• Sinon, définissez window.isNavigationBarContrastEnforced = true. Si votre application appelle enableEdgeToEdge, window.isNavigationBarContrastEnforced = true, il s'agit de la valeur par défaut.

Autres conseils

Vérifiez que le dernier élément de la liste n'est pas masqué par les barres système dans votre RecyclerView ou NestedScrollView en gérant les marges intérieures et en définissant clipToPadding sur false.

La vidéo suivante montre un RecyclerView avec l'affichage bord à bord désactivé (à gauche) et activé (à droite):

Pour obtenir un exemple de code, consultez les extraits de code de la section Créer des listes dynamiques avec RecyclerView.

Ressources supplémentaires

Pour en savoir plus sur l'affichage bord à bord, consultez les références suivantes.

Blogs

• Conseils de gestion des marges intérieures pour l'application forcée bord à bord d'Android 15
• WindowInsets : écouteurs pour les mises en page

Design

• Barres système Android
• Conception bord à bord

Autres documents

• Guide de migration de Chrome sur Android de bout en bout

Vidéos

• Préparer l'avenir d'Android
• Navigation par gestes: marges intérieures