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'interface bord à bord dans Compose.

Bord à bord dans Compose →

Vous pouvez faire en sorte que votre application s'affiche 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:

• Passez derrière la barre de navigation pour offrir une expérience utilisateur plus attrayante et moderne.
• Tracez des éléments derrière la barre d'état si cela est pertinent pour votre contenu et votre mise en page, par exemple dans le cas d'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.

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 chevauchements d'éléments visuels.

Activez l'affichage bord à bord.

Vous pouvez activer l'affichage bord à bord dans votre application en appelant enableEdgeToEdge dans le onCreate de votre Activity. Elle doit être appelée avant setContentView.

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

  @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 de navigation à trois boutons où la barre d'état prend 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 mise en page bord à bord et ajuste les couleurs des barres système. Si nécessaire, pour une raison quelconque, consultez la section Configurer manuellement l'écran bord à bord.

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

Une fois l'affichage bord à bord activé, certaines vues de votre application peuvent passer derrière les barres système, comme illustré dans la figure 3.

Vous pouvez résoudre les chevauchements en réagissant à des encarts, qui spécifient les parties de l'écran qui se croisent avec l'interface utilisateur du système, comme la barre de navigation ou la barre d'état. Les intersections peuvent signifier s'afficher au-dessus du contenu, mais elles peuvent également informer votre application sur les gestes système.

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

• Encarts de barres système:recommandés 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é. Elles représentent la zone où l'interface utilisateur du système s'affiche sur l'axe Z au-dessus de votre application. Elles sont idéales pour déplacer des vues de votre application sur lesquelles il est possible d'appuyer et qui ne doivent pas être masquées par les barres système.

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

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 la barre système:

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
}

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, il n'y a pas de chevauchement visuel en mode bouton, comme illustré dans la figure 4:

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

Encarts de geste 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 sur 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 les vues à faire glisser et 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.

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

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

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
}

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

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

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

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

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());

Consultez la section Masquer les barres système pour le mode immersif pour découvrir comment mettre en œuvre cette fonctionnalité.

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:

• WindowInsets : écouteurs de mises en page
• Navigation par gestes: encarts
• Fonctionnement des encarts sur Android