Découches dans Compose

Une encoche d'écran est une zone sur certains appareils qui s'étend sur la surface de l'écran. Il offre une expérience bord à bord, tout en laissant de l'espace pour les capteurs importants à l'avant de l'appareil.

Android est compatible avec les encoches d'écran sur les appareils équipés d'Android 9 (niveau d'API 28) ou version ultérieure. Toutefois, les fabricants d'appareils peuvent également prendre en charge les découpes d'écran sur les appareils équipés d'Android 8.1 ou version antérieure.

Cette page explique comment prendre en charge les appareils avec des encoches dans Compose, y compris comment utiliser la zone de découpe, c'est-à-dire le rectangle de bord à bord sur la surface de l'écran qui contient la découpe.

Cas par défaut

Les applications ciblant le niveau d'API 34 ou inférieur, ou les activités qui n'appellent pas enableEdgeToEdge, ne s'affichent pas dans la région de l'encoche par défaut, sauf si l'application s'affiche dans une barre système contenant l'encoche.

Les applications ciblant le niveau d'API 35 ou supérieur sur les appareils équipés d'Android 15 ou version ultérieure, ou les activités qui appellent enableEdgeToEdge, dessinent dans la zone de découpe.

En d'autres termes, LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT, LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES et LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER sont interprétés comme LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS pour les fenêtres non flottantes dans les applications ciblant le niveau d'API 35 ou version ultérieure sur les appareils exécutant Android 15 ou version ultérieure.

Gérer manuellement les informations de découpage

Vous devez gérer les informations de découpe pour éviter que la zone de découpe ne masque du texte, des commandes ou des éléments interactifs importants nécessitant une reconnaissance tactile précise (la sensibilité tactile peut être plus faible dans la zone de découpe). Lorsque vous gérez les découpes, ne codez pas en dur la hauteur de la barre d'état, car cela peut entraîner un chevauchement ou un contenu coupé. Gérez plutôt les découpes de l'une des manières suivantes:

• Utiliser WindowInsets.displayCutout, WindowInsets.safeContent ou WindowInsets.safeDrawing

• Accéder à l'objet Path de découpe avec LocalView.current.rootWindowInsets.displayCutout

Pour Compose, nous vous recommandons d'utiliser displayCutout, safeContent ou safeDrawing pour gérer les encarts de découpe dans vos composables. Cette approche vous permet de respecter la marge intérieure de la découpe de l'écran lorsque cela est nécessaire, ou de l'ignorer lorsqu'elle n'est pas nécessaire.

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}
CutoutSnippets.kt

Tester l'affichage de votre contenu avec des découpes

Veillez à tester tous les écrans et toutes les expériences de votre application. Si possible, effectuez des tests sur des appareils avec différents types de découpes. Si vous ne possédez pas d'appareil avec une encoche, vous pouvez simuler des configurations d'encoche courantes sur n'importe quel appareil ou émulateur exécutant Android 9 ou version ultérieure en procédant comme suit:

1. Activez les options pour les développeurs.
2. Sur l'écran Options pour les développeurs, faites défiler l'écran jusqu'à la section Drawing (Dessin) et sélectionnez Simulate a display with a cutout (Simuler un écran avec une encoche).
3. Sélectionnez le type de découpe.