Edge-to-Edge-Design

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

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

Fazit

  • Hintergrund- und Scrollinhalte werden unter Systemleisten gerendert, 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- und der Bedienung über Gesten in Konflikt stehen.
Abbildung 2. Eine App, in der die Gesteinsets grün hervorgehoben sind.

Inhalte hinter den Systemleisten rendern

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 Insets reagieren, um Überschneidungen bei Inhalten zu vermeiden. Mit Insets wird beschrieben, 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 zur Unterstützung von Edge-to-Edge und zum Umgang mit Insets in Compose und Views

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

  • Systemleisten-Insets werden auf Benutzeroberflächen angewendet, die sowohl antippbar sind als auch nicht visuell von den Systemleisten verdeckt werden sollten.
  • System-Gesten-Insets werden auf Bereiche für die Bedienung über Gesten angewendet, die vom Betriebssystem verwendet werden und Vorrang vor Ihrer App haben.
  • Display-Aussparungseinsätze werden auf Gerätebereiche angewendet, die sich in die Displayoberfläche erstrecken, z. B. die Kameraaussparung.

Überlegungen zur Statusleiste

Grundlegende Richtlinien für das Design von Systemleisten finden Sie unter Android System Bars. 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

Das sollten Sie tun

Die 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 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. Gehen Sie dazu so vor:

  • Verlassen Sie sich auf den automatischen Schutz der Material 3-TopAppBar beim Scrollen, sofern zutreffend.
  • Erstellen Sie eine benutzerdefinierte zusammensetzbare Funktion für Verläufe oder verwenden Sie GradientProtection für Views. Weitere Informationen dazu, wie Sie das in Compose umsetzen, 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

Schutz vor Farbverläufen, die nicht zum Hintergrund der einzelnen Bereiche passen

Das sollten Sie tun

Der Schutz vor Farbverläufen muss zum Hintergrund der jeweiligen Bereiche passen.

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

Abbildung 4: Eine durchscheinende Statusleiste für die Navigationsleiste. Dieses Bild zeigt den Schutz der Statusleiste für das Navigationsmenü, aber nicht für die App.

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

Grundlegende Richtlinien für das Design der 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

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

Das sollten Sie tun

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

Display-Aussparungen

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

Das sollten Sie tun

Wichtige UI-Elemente mit Display-Aussparung-Insets einrücken

Nicht

Platzieren Sie 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 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 Display-Aussparungen in Compose und Views

Weitere Anleitungen

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