Configurer le mode bord à bord

L'affichage de bord à bord permet à votre application d'afficher son interface utilisateur derrière les barres système (barre d'état, barre de légende et barre de navigation) pour une expérience utilisateur plus immersive. Si vous ciblez des appareils exécutant Android 15 (niveau d'API 35) ou une 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 peut afficher des couleurs unies derrière les barres système ou 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 l'affichage de bord à bord sur les versions précédentes d'Android, appelez enableEdgeToEdge() dans votre Activity.onCreate() méthode :

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 un meilleur contraste. La couleur des icônes système et du voile 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 IME, ce qui vous permet d'ajuster votre mise en page avec un remplissage 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 de bord à bord activé, certains contenus et éléments d'UI de votre application peuvent s'afficher derrière les barres système. Pour éviter que les éléments critiques ou interactifs ne soient masqués par les barres système ou ne se chevauchent avec les gestes système, vous devez gérer les encarts.

Les encarts décrivent les parties de l'écran qui croisent l'UI du système ou les 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.
Encarts d'encoche : représentent les zones où une encoche physique (comme une encoche de caméra) existe sur l'écran de l'appareil.

Dans Compose, vous pouvez gérer les encarts à l'aide de règles, de modificateurs de remplissage ou de modificateurs de taille d'encart. Pour obtenir des instructions détaillées, consultez À propos des encarts de fenêtre.

Rubriques avancées

Pour des cas d'utilisation plus avancés de l'affichage de bord à bord, tenez compte des points suivants.

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()) For example, use either `Scaffold`,

Couleurs et icônes des barres système

Lorsque vous passez à l'affichage de 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 des barres système pour un meilleur contraste.

Pour modifier les icônes de la barre d'état en clair ou en sombre, 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 de l'affichage de bord à bord 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 des barres système.

Boîtes de dialogue

Pour afficher des boîtes de dialogue en plein écran de bord à bord, appelez WindowCompat.enableEdgeToEdge dans la méthode onStart() de la boîte de dialogue :

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}

À propos de WindowInsetsRulers