Configurer le mode bord à bord

L'affichage bord à bord permet à votre application d'afficher son UI derrière les barres système (barre d'état, barre de titre et barre de navigation) pour offrir une expérience utilisateur plus immersive. Si vous ciblez des appareils équipés d'Android 15 (niveau d'API 35) ou version ultérieure, l'affichage de bord à bord est appliqué par défaut.

Pour afficher correctement le contenu de bord à bord sur toutes les versions d'Android, suivez ces étapes de configuration. Sans ces étapes, votre application risque d'afficher des couleurs unies derrière les barres système ou de ne pas animer son contenu de manière synchrone avec les transitions du clavier à l'écran (IME).

1. Activer l'affichage de bord à bord

Pour activer le mode sans bordure sur les versions d'Android antérieures, appelez enableEdgeToEdge() dans votre méthode Activity.onCreate() :

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

Par défaut, enableEdgeToEdge() rend les barres système transparentes, sauf en mode de navigation à trois boutons, où il applique un voile translucide à la barre de navigation pour améliorer le contraste. La couleur des icônes système et du scrim s'adapte au thème clair ou sombre du système.

2. Configurer windowSoftInputMode

Définissez android:windowSoftInputMode="adjustResize" dans l'entrée AndroidManifest.xml de votre activité. Ce paramètre permet à votre application de recevoir des encarts d'IME, ce qui vous permet d'ajuster votre mise en page avec une marge intérieure lorsque le clavier à l'écran apparaît ou disparaît.

<!-- In your AndroidManifest.xml file: -->
<activity
  android:name=".ui.MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:theme="@style/Theme.MyApplication"
  android:exported="true">
  ...
</activity>

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

Une fois l'affichage bord à bord activé, certains éléments de contenu et d'interface utilisateur de votre application peuvent s'afficher derrière les barres système. Pour éviter que des éléments critiques ou interactifs soient masqués par les barres système ou se chevauchent avec les gestes système, vous devez gérer les encarts.

Les encarts décrivent les parties de l'écran qui se superposent à l'UI du système ou aux gestes système. Les principaux types d'encarts à prendre en compte pour l'affichage de bord à bord sont les suivants :

  • Encarts de barres système : représentent les zones où les barres système sont affichées. Utilisez-les pour éviter que l'UI ne soit masquée par les barres système.
  • Marges de découpe de l'écran : représentent les zones où une découpe physique (comme une encoche d'appareil photo) existe sur l'écran de l'appareil.

Dans Compose, vous pouvez gérer les encarts à l'aide de règles, de modificateurs de marge intérieure ou de modificateurs de taille d'encart. Pour en savoir plus, consultez À propos des encarts de fenêtre.

Rubriques avancées

Tenez compte des points suivants pour les cas d'utilisation de la fonctionnalité de bord à bord plus avancés.

Mode immersif

Certains contenus, comme les vidéos ou les cartes, bénéficient d'une expérience entièrement immersive où les barres système sont masquées. Vous pouvez masquer les barres système à l'aide de WindowInsetsControllerCompat :

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

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

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

Couleurs et icônes de la barre système

Lorsque vous passez en mode bord à bord, l'arrière-plan de votre application peut être visible derrière les barres système. Vous devrez peut-être ajuster les couleurs des icônes de la barre système pour améliorer le contraste.

Pour que les icônes de la barre d'état soient claires ou sombres, utilisez WindowInsetsControllerCompat :

// Set status bar icons to dark.
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = true

// Set status bar icons to light.
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

Protection des barres système

Bien que enableEdgeToEdge() fournisse des barres système transparentes ou translucides par défaut, vous devrez peut-être les personnaliser. Consultez les consignes de conception des barres système Android et les consignes de conception sans bordure pour décider quand utiliser des barres transparentes ou translucides.

Pour rendre la barre de navigation à trois boutons entièrement transparente au lieu de translucide, vous pouvez désactiver l'application du contraste :

window.isNavigationBarContrastEnforced = false

Pour en savoir plus, consultez À propos de la protection de la barre système.

Suivant
À propos de WindowInsetsRulers