Ausschnitte in Compose

Eine Displayaussparung ist ein Bereich auf einigen Geräten, der sich über die Displayfläche erstreckt. Sie ermöglicht ein randloses Display und bietet gleichzeitig Platz für wichtige Sensoren auf der Vorderseite des Geräts.

Beispiel für einen Ausschnitt im Porträtmodus
Abbildung 1: Beispiel für einen Ausschnitt im Porträtmodus
Beispiel für einen Ausschnitt im Querformat
Abbildung 2. Beispiel für einen Ausschnitt im Querformat

Android unterstützt Displayaussparungen auf Geräten mit Android 9 (API-Ebene 28) und höher. Gerätehersteller können Displayausschnitte jedoch auch auf Geräten mit Android 8.1 oder niedriger unterstützen.

Auf dieser Seite wird beschrieben, wie Sie in Compose Unterstützung für Geräte mit Ausschnitten implementieren. Außerdem erfahren Sie, wie Sie mit dem Ausschnittsbereich arbeiten, also dem Rechteck von Rand zu Rand auf der Displayoberfläche, das den Ausschnitt enthält.

Standardfall

Bei Apps, die auf API-Level 34 oder niedriger ausgerichtet sind, oder bei Aktivitäten, die enableEdgeToEdge nicht aufrufen, wird standardmäßig nicht in den Ausschnittsbereich gezeichnet, es sei denn, die App zeichnet in eine Systemleiste, die den Displayausschnitt enthält.

Apps, die auf API-Level 35 oder höher auf Geräten mit Android 15 oder höher ausgerichtet sind, oder Aktivitäten, die enableEdgeToEdge aufrufen, werden in den Ausschnittsbereich gezeichnet.

Mit anderen Worten: LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT, LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES und LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER werden als LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS für nicht schwimmende Fenster in Apps interpretiert, die auf API-Level 35 oder höher auf Geräten mit Android 15 oder höher ausgerichtet sind.

Informationen zu Ausschnitten manuell verarbeiten

Sie müssen Informationen zum Ausschnitt so verarbeiten, dass wichtige Texte, Steuerelemente oder interaktive Elemente, die eine genaue Touch-Erkennung erfordern, nicht vom Ausschnitt verdeckt werden. Die Touch-Empfindlichkeit kann im Ausschnittsbereich geringer sein. Verwenden Sie bei Ausschnitten keine hartcodierte Statusleiste, da dies zu überlappenden oder abgeschnittenen Inhalten führen kann. Gehen Sie stattdessen auf eine der folgenden Arten vor:

Für Compose empfehlen wir, displayCutout, safeContent oder safeDrawing zu verwenden, um Ausschnitte in Ihren Compose-Assets zu verarbeiten. So können Sie den Abstand zum Displayausschnitt bei Bedarf berücksichtigen oder ignorieren, wenn er nicht erforderlich ist.

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

Rendern von Inhalten mit Ausschnitten testen

Testen Sie alle Bildschirme und Funktionen Ihrer App. Testen Sie nach Möglichkeit auf Geräten mit unterschiedlichen Aussparungen. Wenn Sie kein Gerät mit einer Aussparung haben, können Sie gängige Aussparungskonfigurationen auf jedem Gerät oder Emulator mit Android 9 oder höher simulieren. Gehen Sie dazu so vor:

  1. Aktivieren Sie die Entwickleroptionen.
  2. Scrollen Sie auf dem Bildschirm Entwickleroptionen nach unten zum Bereich Zeichnen und wählen Sie Display mit Aussparung simulieren aus.
  3. Wählen Sie den Ausschnittstyp aus.
    Displayaussparung im Emulator simulieren
    Abbildung 3. Mit den Entwickleroptionen können Sie testen, wie Ihre Inhalte gerendert werden.