Display-Aussparungen unterstützen

Funktion „Schreiben“ ausprobieren
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Weitere Informationen zum Arbeiten mit Display-Aussparungen in Compose.

Auf einigen Geräten ist eine Display-Aussparung ein Bereich, der in die Displayoberfläche hinausreicht. Es ermöglicht eine randlose Nutzung und bietet gleichzeitig Platz für wichtige Sensoren an der Vorderseite des Geräts.

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

In diesem Dokument wird beschrieben, wie Geräte mit Aussparungen unterstützt werden. Dazu gehört auch die Arbeit mit dem Aussparungsbereich, also dem von Rand zu Rand abgerundeten Rechteck auf der Displayoberfläche, das die Aussparung enthält.

Bild, das ein Beispiel für einen Display-Ausschnitt in der oberen Mitte zeigt
Abbildung 1: 1 Display-Aussparung.

Festlegen, wie die App mit Aussparungen umgehen soll

Wenn Sie nicht möchten, dass sich Ihre Inhalte mit einer Aussparung überschneiden, müssen Sie darauf achten, dass sich der Inhalt nicht mit der Statusleiste und der Navigationsleiste überschneidet. Für das Rendering in den Aussparungsbereich verwenden Sie WindowInsetsCompat.getDisplayCutout(), um ein DisplayCutout-Objekt abzurufen, das die sicheren Einsätze und Begrenzungsrahmen für die einzelnen Ausschnitte enthält. Mit diesen APIs können Sie prüfen, ob sich Ihre Inhalte mit dem Ausschnitt überschneiden, sodass Sie sie bei Bedarf neu positionieren können.

Außerdem können Sie festlegen, ob Inhalte hinter dem Aussparungsbereich platziert werden. Mit dem Fensterlayoutattribut layoutInDisplayCutoutMode wird festgelegt, wie Ihr Inhalt im Aussparungsbereich gezeichnet wird. Sie können für layoutInDisplayCutoutMode einen der folgenden Werte festlegen:

Sie können den Ausschneidemodus entweder programmatisch oder durch Festlegen eines Stils in Ihrer Aktivität festlegen. Im folgenden Beispiel wird ein Stil definiert, mit dem das Attribut LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES auf die Aktivität angewendet wird.

<style name="ActivityTheme">
  <item name="android:windowLayoutInDisplayCutoutMode">
    shortEdges <!-- default, shortEdges, or never -->
  </item>
</style>

In den folgenden Abschnitten werden die verschiedenen Aussparungsmodi ausführlicher beschrieben.

Standardverhalten

Im Hochformat ohne spezielle Flags wird die Statusleiste auf einem Gerät mit Aussparung standardmäßig auf mindestens so hoch wie die Aussparung angepasst. Ihre Inhalte werden im darunterliegenden Bereich angezeigt. Im Quer- oder Vollbildmodus wird das App-Fenster im Letterbox-Format dargestellt, sodass keiner Ihrer Inhalte im Aussparungsbereich zu sehen ist.

Inhalte in Ausschnitten mit kurzer Kante rendern

Für einige Inhalte wie Videos, Fotos, Karten und Spiele kann das Rendern im Aussparungsbereich eine großartige Möglichkeit sein, den Nutzern ein immersives, umfassendes Erlebnis zu bieten. Mit LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES wird der Inhalt in den Aussparungsbereich am kurzen Rand des Bildschirms im Hoch- und Querformat erweitert, unabhängig davon, ob die Systemleisten ausgeblendet oder sichtbar sind. Achten Sie bei Verwendung dieses Modus darauf, dass sich keine wichtigen Inhalte mit dem Aussparungsbereich überschneiden.

Die folgende Abbildung zeigt ein Beispiel für LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES für ein Gerät im Hochformat:

Ein Bild, auf dem Inhalte im Porträtmodus im Ausschnitt gerendert werden
Abbildung 2. Inhalte werden im Porträtmodus im ausgeschnittenen Bereich gerendert.

Die folgende Abbildung zeigt ein Beispiel für LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES für ein Gerät im Querformat:

Ein Bild, auf dem Inhalte im Querformat in den Aussparungsbereich gerendert werden
Abbildung 3: Inhalte werden im Querformat im Aussparungsbereich gerendert.

In diesem Modus erstreckt sich das Fenster unter Aussparungen am kurzen Rand der Anzeige sowohl im Hoch- als auch im Querformat, unabhängig davon, ob das Fenster die Systemleisten verdeckt.

Eine Aussparung in der Ecke wird als eine kurze Kante angesehen:

Ein Bild, das ein Gerät mit einem Eckausschnitt zeigt
Abbildung 4: Ein Gerät mit einem Eckausschnitt.

Inhalte im Display-Aussparungsbereich nie rendern

Mit LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER darf sich das Fenster nie mit dem Ausschnitt überlappen.

Hier ein Beispiel für LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER im Hochformat:

Ein Bild von LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER für das Hochformat
Abbildung 5: Beispiel für LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER für das Hochformat.

Hier ein Beispiel für LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER im Querformat:

Ein Bild von LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER im Querformat
Abbildung 6. Beispiel für LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER im Querformat.

Best Practices für die Unterstützung von Display-Aussparungen

Berücksichtigen Sie bei der Arbeit mit Display-Aussparungen Folgendes:

  • Achten Sie auf die Platzierung wichtiger Elemente der Benutzeroberfläche. Achten Sie darauf, dass wichtige Texte, Steuerelemente oder andere Informationen nicht durch den Aussparungsbereich verdeckt werden.
  • Platzieren oder erweitern Sie keine interaktiven Elemente, die eine detaillierte Erkennung erfordern, im Aussparungsbereich. Im Aussparungsbereich ist die Berührungsempfindlichkeit möglicherweise geringer.
  • Verwenden Sie nach Möglichkeit WindowInsetsCompat, um die Höhe der Statusleiste abzurufen und den passenden Abstand für den Inhalt festzulegen. Vermeiden Sie eine Hartcodierung der Höhe der Statusleiste, da sich dies zu überlappenden oder abgeschnittenen Inhalten führen kann.

    Ein Bild, auf dem zu sehen ist, dass Inhalte wegen falscher Verwendung von Platzhaltern oben ausgeschnitten wurden
    Abbildung 7: Mit WindowInsetsCompat vermeiden Sie, dass sich Inhalte überlappen oder abgeschnitten werden.
  • Verwenden Sie View.getLocationInWindow(), um zu ermitteln, wie viel Fensterbereich Ihre App nutzt. Gehen Sie nicht davon aus, dass die Anwendung das gesamte Fenster nutzt. Verwenden Sie auch nicht View.getLocationOnScreen().

  • Verwenden Sie den Aussparmodus shortEdges oder never, wenn Ihre App in den und aus dem immersiven Modus wechseln muss. Das Standardverhalten kann dazu führen, dass Inhalte in Ihrer App im Aussparungsbereich gerendert werden, wenn die Systemleisten vorhanden sind, aber nicht im immersiven Modus. Dies führt dazu, dass sich der Inhalt bei Übergängen nach oben und unten bewegt, wie im folgenden Beispiel gezeigt.

    Ein Bild, auf dem zu sehen ist, wie sich Inhalte bei Übergängen nach oben und unten bewegen.
    Abbildung 8. Beispiel für Inhalte, die sich bei Übergängen nach oben und unten bewegen
  • Achten Sie im immersiven Modus darauf, Fenster- statt Bildschirmkoordinaten zu verwenden, da Ihre App bei der Letterbox-Darstellung nicht den gesamten Bildschirm verwendet. Aufgrund des Letterbox-Werts sind die Koordinaten des Bildschirmursprungs nicht mit den Koordinaten des Fensterursprungs identisch. Mit getLocationOnScreen() können Sie die Bildschirmkoordinaten bei Bedarf in die Koordinaten der Ansicht umwandeln. Die folgende Abbildung zeigt, wie sich die Koordinaten bei einem Letterbox-Bild voneinander unterscheiden:

    Ein Bild, das Fensterkoordinaten im Vergleich zu Bildschirmkoordinaten zeigt, wenn Inhalte im Letterbox-Format dargestellt werden.
    Abbildung 9: Fensterkoordinaten im Vergleich zu Bildschirmkoordinaten, wenn Inhalte im Letterbox-Format dargestellt werden.
  • Verwenden Sie für die Verarbeitung von MotionEvent MotionEvent.getX() und MotionEvent.getY(), um ähnliche Koordinatenprobleme zu vermeiden. Verwende weder MotionEvent.getRawX() noch MotionEvent.getRawY().

Content-Rendering testen

Teste alle Bildschirme und Funktionen deiner App. Testen Sie dies nach Möglichkeit an Geräten mit verschiedenen Ausschnitten. Wenn Sie kein Gerät mit Aussparung haben, können Sie gängige Konfigurationen für die Aussparung auf jedem Gerät oder Emulator mit Android 9 oder höher simulieren:

  1. Aktivieren Sie Entwickleroptionen.
  2. Scrollen Sie auf dem Bildschirm Entwickleroptionen nach unten zum Abschnitt Zeichnung und wählen Sie Anzeige mit Ausschnitt simulieren aus.
  3. Wählen Sie die Art der Aussparung aus.

    Bild, das zeigt, wie im Emulator eine Display-Aussparung simuliert wird
    Abbildung 10. Entwickleroptionen, mit denen Sie testen können, wie Ihre Inhalte gerendert werden.

Weitere Informationen