Cette page a été traduite par l'API Cloud Translation.

Afficher le contenu bord à bord dans votre application

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 bord à bord. La fenêtre s'étend sur toute la largeur et la hauteur de l'écran en dessinant derrière les barres système. Les barres système incluent la barre d'état, la barre de sous-titres et la barre de navigation.

De nombreuses applications ont une barre d'application supérieure. La barre d'application supérieure doit s'étirer jusqu'au bord supérieur de l'écran et s'afficher derrière la barre d'état. Si vous le souhaitez, la barre d'application supérieure peut être réduite à la hauteur de la barre d'état lorsque le contenu défile.

De nombreuses applications disposent également d'une barre d'application ou d'une barre de navigation inférieures. Ces barres doivent également s'étirer jusqu'au bord inférieur de l'écran et s'afficher derrière la barre de navigation. Sinon, les applications doivent afficher du contenu défilant derrière la barre de navigation.

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

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

Activer l'affichage bord à bord
Gérez les éventuels chevauchements visuels.
Pensez à montrer des fonds derrière les barres système.

Exemple d'image derrière la barre d'état — **Figure 2**. Exemple d'images situées derrière la barre d'état.

Activer l'affichage 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 l'affichage bord à bord sur les versions précédentes d'Android, procédez comme suit:

Ajoutez une dépendance à la bibliothèque androidx.activity dans le fichier build.gradle de votre application ou 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'
}

Importez la fonction d'extension enableEdgeToEdge dans votre application:

Activez manuellement l'affichage bord à bord en appelant enableEdgeToEdge dans onCreate de votre Activity. Elle doit être appelée 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 dans le mode de navigation à trois boutons, où la barre d'état reçoit un fond translucide. Les couleurs des icônes système et du fond 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 affichée bord à bord et ajuste les couleurs des barres système.

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

Gérer les chevauchements à l'aide d'encarts

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 présentent une intersection avec l'UI du système, comme la barre de navigation ou la barre d'état. L'intersection peut signifier s'afficher 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 de barre système:idéal pour les vues sur lesquelles il est possible d'appuyer et qui ne doivent pas être masquées visuellement par les barres système.
Incrustations d'encoche:pour les zones où il peut y avoir une encoche 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 prioritaires sur votre application.

Encarts de barres système

Les encarts de la barre système sont le type d'encart le plus couramment utilisé. Ils représentent la zone où l'interface utilisateur du système s'affiche sur l'axe Z au-dessus de votre application. Ils sont mieux utilisés pour déplacer ou compléter les vues de votre application sur lesquelles il est possible d'appuyer et qui ne doivent pas être masquées visuellement par les barres système.

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

exemple d'implémentation bord à bord, mais la barre de navigation couvre le bouton d'action flottant — **Figure 3** : Barre de navigation chevauchant un bouton d'action flottant dans une mise en page bord à bord.

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

L'exemple de code suivant montre comment implémenter des encarts 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 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 want the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

Si vous appliquez cette solution à l'exemple de la figure 3, elle n'entraîne aucun chevauchement visuel en mode bouton, comme illustré dans la figure 4:

Une barre de navigation translucide ne recouvrant pas le bouton d'action flottant — **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:

bord à bord avec navigation par gestes — **Image 5.** Résolution du chevauchement visuel en mode de navigation par gestes.

Encarts de l'encoche

Certains appareils sont dotés d'une encoche. En règle générale, l'encoche se trouve en haut de l'écran et figure dans la barre d'état. Lorsque l'écran de l'appareil est en mode Paysage, l'encoche peut se trouver sur le bord vertical. En fonction du contenu affiché par votre application à l'écran, vous devez implémenter une marge intérieure pour éviter les encoches. Par défaut, les applications s'afficheront dans l'encoche.

Par exemple, de nombreux écrans d'application affichent une liste d'éléments. Ne masquez pas les éléments de liste à l'aide de l'encoche ou des 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) -> {
  WindowInsetsCompat 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 utilisant le ou logique des barres système et le type d'encoche.

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 passer derrière les barres système lorsque l'utilisateur fait défiler la page, 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" />

Encarts 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:

Comme pour les encarts de la barre système, vous pouvez éviter de chevaucher les encarts de gestes système en utilisant getInsets(int) avec WindowInsetsCompat.Type.systemGestures().

Utilisez ces encarts pour déplacer ou compenser les vues à balayer en les éloignant 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.

Sur Android 10 ou version ultérieure, les encarts de geste système contiennent un encart inférieur pour le geste d'accueil, et un encart gauche et droit pour les gestes Retour:

Exemple de mesures d'encarts de gestes système — **Image 7.** Mesures d'encart de geste 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;
});

Mode immersif

Il est préférable d'afficher certains contenus en plein écran afin d'offrir à 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.

Ressources supplémentaires

Consultez les documentations de référence suivantes pour en savoir plus sur WindowInsets, la navigation par gestes et le fonctionnement des encarts: