Configurer le mode bord à bord

L'affichage 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 offrir une expérience utilisateur plus immersive. Si vous ciblez des appareils exécutant Android 15 (niveau d'API 35) ou version ultérieure, le mode bord à bord est appliqué par défaut.

Pour afficher correctement le contenu 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 le mode bord à bord sur les versions précédentes d'Android, 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 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 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 le mode bord à bord activé, il est possible que certains contenus et éléments d'UI de votre application s'affichent 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. Voici les principaux types d'encarts à prendre en compte pour l'affichage bord à bord :

• Encarts de barre 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.
• Encoches : représentent les zones où une encoche physique (comme une encoche pour l'appareil photo) est présente 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 obtenir des conseils détaillés, consultez À propos des encarts de fenêtre.

Rubriques avancées

Voici quelques éléments à prendre en compte pour les cas d'utilisation bord à bord plus avancés.

Mode immersif

Certains contenus, comme les vidéos ou les cartes, bénéficient d'une expérience totalement 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 de la barre système

Lorsque vous passez au mode bord à bord, l'arrière-plan de votre application peut être visible derrière les barres système. Vous devrez peut-être ajuster la couleur 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 foncé, 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 de la barre 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 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 de la barre 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) }
    }
    ...
}