Afficher le contenu bord à bord dans votre application

Essayer Compose
Jetpack Compose est le kit d'outils d'interface utilisateur recommandé pour Android. Découvrez comment utiliser l'affichage bord à bord dans Compose.

Vous pouvez afficher votre application bord à bord (en utilisant toute la largeur et la hauteur de l'écran) en dessinant derrière les barres système. Les barres système sont la barre d'état et la barre de navigation.

Pour implémenter une mise en page bord à bord, votre application doit procéder comme suit:

  • Passez derrière la barre de navigation pour offrir une expérience utilisateur plus attrayante et moderne.
  • Placez-vous derrière la barre d'état si cela convient à votre contenu et à votre mise en page, par exemple pour les images en pleine largeur. Pour ce faire, utilisez des API telles que AppBarLayout, qui définit une barre d'application épinglée en haut de l'écran.
Figure 1 : Barres système avec une mise en page bord à bord.

Pour implémenter une mise en page bord à bord dans votre application, procédez comme suit:

  1. Activez l'affichage bord à bord.
  2. Gérez les éventuels chevauchements visuels.
Image montrant une application avec des images derrière la barre d'état
Figure 2. Exemple d'application avec des images derrière la barre d'état.

Activez l'affichage bord à bord.

Vous pouvez activer l'affichage bord à bord dans votre application 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 méthode enableEdgeToEdge déclare automatiquement que l'application doit être affichée bord à bord et ajuste les couleurs des barres système. Consultez la section Configurer manuellement l'écran bord à bord si cela est nécessaire pour une raison quelconque.

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

Une fois l'affichage bord à bord activé, 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'interface utilisateur 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.

  • Encarts de gestes système:pour les zones de navigation par gestes utilisées par le système et qui sont 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:

Image montrant l'implémentation bord à bord, mais que la barre de navigation recouvre 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:

Image montrant une barre de navigation translucide qui ne recouvre pas le bouton d&#39;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:

Image montrant un bord à bord avec la navigation par gestes
Image 5. Résolution du chevauchement visuel en mode de navigation par gestes.

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:

Image montrant des encarts de gestes système
Image 6. Encarts de gestes système.

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:

Image montrant des mesures d&#39;encart de geste 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: