Edge-to-Edge-Design

Eine Edge-to-Edge-App nutzt den gesamten Bildschirm, indem sie die Benutzeroberfläche unter den Systemleisten rendert.

Abbildung 1. Links. Eine App, die nicht über den gesamten Bildschirm angezeigt wird. Genau. Eine App, die randlos angezeigt wird.

Fazit

  • Hintergrund und scrollende Inhalte werden unter Systemleisten dargestellt, um ein großes Display zu ermöglichen.
  • Vermeiden Sie es, Tippgesten oder Drag-Ziele unter System-Insets hinzuzufügen, da diese mit der Edge-to-Edge-Darstellung und der Gestennavigation in Konflikt stehen.
Abbildung 2. Eine App, in der die Gesteinsets grün hervorgehoben sind.

Inhalte hinter den Systemleisten anzeigen

Mit der Funktion „Großes Display“ können Sie die Benutzeroberfläche unter den Systemleisten rendern, um eine immersive Darstellung zu erzielen.

Eine App kann auf Überschneidungen bei Inhalten reagieren, indem sie auf Insets reagiert. Insets beschreiben, wie viel Platz zwischen dem Inhalt Ihrer App und Systemleisten oder physischen Gerätefunktionen wie Displayausschnitten sein muss, damit sich die Elemente nicht überlappen. Informationen zum Unterstützen von Edge-to-Edge und zum Verarbeiten von Insets in Compose und Views

Beachten Sie beim Entwerfen von Edge-to-Edge-Anwendungsfällen die folgenden Arten von Insets:

  • Systemleisteneinzüge werden auf UI angewendet, die sowohl antippbar ist als auch nicht visuell durch die Systemleisten verdeckt werden sollte.
  • System-Gesten-Insets werden auf Bereiche mit Bedienung über Gesten angewendet, die vom Betriebssystem verwendet werden und Vorrang vor Ihrer App haben.
  • Display-Aussparungs-Insets werden auf Gerätebereiche angewendet, die in die Displayoberfläche hineinragen, z. B. die Kamera-Aussparung.

Überlegungen zur Statusleiste

Grundlegende Richtlinien für das Design von Systemleisten Im folgenden Abschnitt werden zusätzliche Aspekte der Statusleiste behandelt.

Scrollen von Inhalten

Die obere App-Leiste sollte beim Scrollen minimiert werden. Informationen zum Minimieren der Material 3-TopAppBar In Material 3 können kleine obere App-Leisten auf die Höhe der Statusleiste reduziert oder vom Bildschirm gescrollt werden. Mittlere und große obere App-Leisten können zu einer kleineren App-Leiste minimiert werden. Weitere Informationen

Das sollten Sie tun

Die kleine obere App-Leiste wird auf die Höhe der Statusleiste reduziert, wenn sie 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 scrollt, damit die Symbole in der Statusleiste nicht überladen wirken. Dazu müssen Sie zuerst eine scrollbare Benutzeroberfläche von Rand zu Rand erstellen. Folgen Sie dazu der Anleitung in der Dokumentation zu LazyColumn oder RecyclerView. Sorgen Sie dann dafür, dass die Systemleiste durchscheinend ist, indem Sie einen der folgenden Schritte ausführen:

  • Verlassen Sie sich auf den automatischen Schutz der Material 3-TopAppBar beim Scrollen, sofern zutreffend.
  • Benutzerdefinierte Gradient-Composable erstellen Weitere Informationen finden Sie unter Schutz der Systemleiste.
Abbildung 3. Eine App, in der die Gesteinsets grün hervorgehoben sind.

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

Nicht

Die Schutzvorrichtung für Farbverläufe stimmt nicht mit dem Hintergrund der einzelnen Bereiche überein.

Das sollten Sie tun

Die Schutzfolie muss zum Hintergrund der jeweiligen Scheibe passen.

Auch Navigationsleisten sollten separat vor dem Rest der App geschützt werden.

Abbildung 4: Eine durchscheinende Statusleiste für die Navigationsleiste. Auf diesem Bild ist der Schutz der Statusleiste für das Navigationsmenü, aber nicht für die App zu sehen.

Stapeln Sie keine Statusleistenschutzmaßnahmen, z. B. indem Sie sowohl den integrierten Schutz der Material 3-TopAppBar als auch einen benutzerdefinierten Schutz verwenden.

Grundlegende Designrichtlinien für die Navigationsleiste finden Sie unter Android System Bars. Im folgenden Abschnitt finden Sie weitere Überlegungen zur Navigationsleiste.

Scrollen von Inhalten

Untere App-Leisten sollten beim Scrollen minimiert werden.

Das sollten Sie tun

Es wird ein Systemleisten-Scrim für die Navigation mit drei Schaltflächen hinzugefügt, wenn die App-Leiste am unteren Rand animiert wird.

Das sollten Sie tun

Bedienung über Gesten sollte transparent sein und es sollte kein zusätzlicher Scrim hinzugefügt werden.

Display-Aussparungen

Displayausschnitte können sich auf das Erscheinungsbild Ihrer Benutzeroberfläche auswirken. Apps müssen die Insets für die Display-Aussparung berücksichtigen, damit wichtige Teile der Benutzeroberfläche nicht unter der Display-Aussparung gerendert werden.

Das sollten Sie tun

Wichtige UI-Elemente mit Display-Aussparungseinsätzen einrücken.

Nicht

Platziere wichtige UI-Elemente ganz am Rand des Bildschirms.

Hintergründe von App-Leisten sollten jedoch wie im folgenden Bild in die Display-Aussparung hineinreichen.

Abbildung 5. Hintergründe von App-Leisten mit Volltonfarbe werden in die Display-Aussparung gezeichnet, während wichtige UI-Elemente eingerückt sind.

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

Abbildung 6: Eine horizontale Anzeige von Kante zu Kante, bei der das Karussell durch die Display-Aussparung scrollt.

Informationen zur Unterstützung von Displayaussparungen in Compose

Weitere Anleitungen

Im Allgemeinen sollten Hintergründe und Trennlinien auch von Rand zu Rand dargestellt werden, während Inhalte wie Text und Schaltflächen eingerückt sein sollten, um die System-UI und Hardwareelemente zu vermeiden.