Edge-to-Edge-Design

Bei einer App mit großem Display wird der gesamte Bildschirm genutzt, indem die Benutzeroberfläche unter den Systemleisten angezeigt wird.

Abbildung 1 Links. Eine App ohne großes Display. Rechts. Eine App mit großem Display.

Fazit

  • Zeichnen Sie den Hintergrund und scrollende Inhalte unter den Systemleisten, um ein großes Display zu nutzen.
  • Fügen Sie keine Tippgesten oder Drag-Ziele unter System-Insets hinzu. Diese stehen im Konflikt mit dem großen Display und der Gestensteuerung.
Abbildung 2. Eine App mit grün hervorgehobenen Gesten-Insets.

Inhalte hinter den Systemleisten zeichnen

Mit der Funktion „Großes Display“ können Sie die Benutzeroberfläche unter den Systemleisten zeichnen, um eine immersive Nutzung zu ermöglichen.

Eine App kann Überlappungen von Inhalten beheben, indem sie auf Insets reagiert. Insets beschreiben wie viel Abstand zum Rand die Inhalte Ihrer App haben müssen, um Überlappungen mit Systemleisten oder mit physischen Gerätefunktionen wie Display-Aussparungen zu vermeiden. Informationen zur Unterstützung des großen Displays und zum Umgang mit Insets in Compose und Views.

Beachten Sie beim Entwerfen von Anwendungsfällen für das große Display die folgenden Arten von Insets:

  • Systemleisten-Insets gelten für Benutzeroberflächen, die sowohl antippbar sind als auch nicht visuell durch die Systemleisten verdeckt werden sollten.
  • Systemgesten-Insets gelten für Bereiche der Gestensteuerung, die vom Betriebssystem verwendet werden und Vorrang vor Ihrer App haben.
  • Display-Aussparungs-Insets gelten für Gerätebereiche, die in die Displayoberfläche hineinragen, z. B. die Aussparung für die Kamera.

Überlegungen zur Statusleiste

Grundlegende Designrichtlinien für Systemleisten finden Sie unter Android-Systemleisten. Im folgenden Abschnitt werden zusätzliche Überlegungen zur Statusleiste behandelt.

Scrollende Inhalte

Obere App-Leisten sollten beim Scrollen minimiert werden. Informationen zum Minimieren der oberen App-Leiste von Material 3 In Material 3 können kleine obere App-Leisten auf die Höhe der Statusleiste minimiert oder vom Bildschirm gescrollt werden. Mittlere und große obere App-Leisten können auf eine kleinere App-Leiste minimiert werden. Weitere Informationen finden Sie in den Material-Richtlinien.

Das sollten Sie tun

Minimieren Sie die kleine obere App-Leiste auf die Höhe der Statusleiste, wenn die App-Leiste fixiert ist.

Das sollten Sie tun

Fügen Sie einen passenden Hintergrundfarbverlauf hinzu, wenn die kleine obere App-Leiste nicht fixiert ist.

Statusleisten sollten durchscheinend sein, wenn die Benutzeroberfläche darunter gescrollt wird, damit die Symbole in der Statusleiste nicht überladen aussehen. Dazu müssen Sie zuerst eine scrollbare Benutzeroberfläche mit großem Display erstellen. Folgen Sie dazu der Anleitung in der Dokumentation zu LazyColumn oder RecyclerView. Achten Sie dann darauf, dass die Systemleiste durchscheinend ist. Dazu haben Sie folgende Möglichkeiten:

  • Verlassen Sie sich gegebenenfalls auf den automatischen Schutz der oberen App-Leiste von Material 3 beim Scrollen, .
  • Erstellen Sie eine benutzerdefinierte zusammensetzbare Funktion für den Farbverlauf oder verwenden Sie GradientProtection für Views. Weitere Informationen dazu in Compose finden Sie unter Systemleisten schutz.
Abbildung 3. Eine App mit grün hervorgehobenen Gesten-Insets.

Bei adaptiven Layouts müssen separate Schutzmaßnahmen für Bereiche mit unterschiedlichen Hintergrundfarben vorhanden sein.

Das sollten Sie vermeiden

Verwenden Sie keinen Farbverlaufsschutz, der nicht zum Hintergrund der einzelnen Bereiche passt.

Das sollten Sie tun

Verwenden Sie einen Farbverlaufsschutz, der zum Hintergrund der einzelnen Bereiche passt.

Ebenso sollten Navigationsleisten separat von der restlichen App geschützt werden.

Abbildung 4 Eine durchscheinende Statusleiste für die Navigationsleiste. Dieses Bild zeigt den Statusleistenschutz für die Navigationsleiste, aber nicht für die App.

Verwenden Sie nicht mehrere Statusleistenschutzmaßnahmen gleichzeitig, z. B. den integrierten Schutz der oberen App-Leiste von Material 3 und einen benutzerdefinierten Schutz.

Grundlegende Designrichtlinien für Navigationsleisten finden Sie unter Android-Systemleisten. Im folgenden Abschnitt werden zusätzliche Überlegungen zur Navigationsleiste behandelt.

Scrollende Inhalte

Untere App-Leisten sollten beim Scrollen minimiert werden.

Das sollten Sie tun

Fügen Sie einen Systemleisten-Scrim für die Navigation mit drei Schaltflächen hinzu, wenn die untere App-Leiste animiert wird.

Das sollten Sie tun

Lassen Sie die Bedienung über Gesten durchscheinend und fügen Sie keinen zusätzlichen Scrim hinzu.

Display-Aussparungen

Display-Aussparungen können sich auf das Erscheinungsbild Ihrer Benutzeroberfläche auswirken. Apps müssen Display-Aussparungs-Insets verarbeiten, damit wichtige Teile der Benutzeroberfläche nicht unter der Display-Aussparung angezeigt werden.

Das sollten Sie tun

Verwenden Sie Display-Aussparungs-Insets, um wichtige Benutzeroberflächen-Elemente einzurücken.

Das sollten Sie vermeiden

Platzieren Sie wichtige Benutzeroberflächen-Elemente nicht ganz am Rand des Bildschirms.

Hintergründe von App-Leisten mit einer einheitlichen Farbe sollten jedoch in die Display-Aussparung hineinreichen, wie im folgenden Bild gezeigt.

Abbildung 5 Hintergründe von App-Leisten mit einer einheitlichen Farbe reichen in die Display-Aussparung hinein, während wichtige Benutzeroberflächen-Elemente eingerückt sind.

Achten Sie darauf, dass horizontale Karussells in die Display-Aussparung hineinreichen.

Abbildung 6 Ein horizontales Display mit großem Display, bei dem das Karussell durch die Display-Aussparung gescrollt wird.

Informationen zur Unterstützung von Display-Aussparungen in Compose und Views

Weitere Richtlinien

Im Allgemeinen sollten Hintergründe und Trennlinien ebenfalls bis zum Rand reichen, während Inhalte wie Text und Schaltflächen eingerückt sein sollten, um die System-Benutzeroberfläche und Hardwareelemente zu vermeiden.