Edge-to-Edge-Design

Bei einer App, die den gesamten Bildschirm einnimmt, wird die Benutzeroberfläche unter den Systemleisten angezeigt.

Abbildung 1 Links. Eine App, die nicht bildschirmfüllend ist. Genau. Eine App, die randlos ist.

Fazit

  • Zeichnen Sie Hintergrund und scrollbare Inhalte unter den Systemleisten, um das Display vollständig zu nutzen.
  • Fügen Sie unter System-Einblendungen keine Tipp- oder Ziehziele hinzu. Diese stehen im Konflikt mit der Vollbildanzeige und der Gestennavigation.
Abbildung 2. Eine App mit Touch-Gesten, die grün hervorgehoben sind.

Inhalte hinter den Systemleisten zeichnen

Mit der Funktion „Bildschirmfüllend“ können Sie die Benutzeroberfläche unter den Systemleisten platzieren, um ein immersives Erlebnis zu schaffen.

Eine App kann Überschneidungen von Inhalten beheben, indem sie auf Einblendungen reagiert. Mit Einzügen wird angegeben, wie viel Abstand die Inhalte Ihrer App haben müssen, um Überschneidungen mit Systemleisten oder physischen Gerätefunktionen wie Displayausschnitten zu vermeiden. Weitere Informationen dazu, wie Sie Vollbildanzeigen unterstützen und Einzüge in Compose und Views verarbeiten, finden Sie hier.

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

  • Systemleisten-Einzüge gelten für UI-Elemente, die angetippt werden können und nicht durch die Systemleisten visuell verdeckt werden sollten.
  • System-Gestenbereiche gelten für Bereiche zur Gestennavigation, die vom Betriebssystem verwendet werden und Vorrang vor Ihrer App haben.
  • Einleger für Displayaussparungen gelten für Bereiche des Geräts, die sich über die Displayoberfläche erstrecken, z. B. die Kameraaussparung.

Statusleiste

In den Android-Systemleisten finden Sie grundlegende Designrichtlinien für Systemleisten. Im folgenden Abschnitt werden weitere Aspekte zur Statusleiste erläutert.

Scrollbare Inhalte

Obere App-Leisten sollten beim Scrollen minimiert werden. Informationen zum Minimieren der Material 3 TopAppBar

Dos

Maximieren Sie die App-Leiste, wenn sie fixiert ist.

Dos

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

Statusleisten sollten durchsichtig sein, wenn die Benutzeroberfläche darunter scrollt, damit die Symbole in der Statusleiste nicht überladen wirken. Erstellen Sie dazu zuerst eine scrollbare UI, die von Rand zu Rand reicht. Folgen Sie dazu der Anleitung in der LazyColumn- oder RecyclerView-Dokumentation. Sorgen Sie dann dafür, dass die Systemleiste durchsichtig ist. Gehen Sie dazu so vor:

  • Nutzen Sie bei Bedarf den automatischen Schutz der Material 3 TopAppBar beim Scrollen.
  • Erstelle ein benutzerdefiniertes Composeable mit 60% Alpha oder verwende GradientProtection für Ansichten.
Abbildung 3 Eine App mit Touch-Gesten, die grün hervorgehoben sind.

Bei adaptiven Layouts müssen Bereiche mit unterschiedlichen Hintergrundfarben separat geschützt werden.

Nicht

Farbverlaufsschutz, der nicht mit dem Hintergrund der einzelnen Bereiche übereinstimmt

Dos

Der Farbverlauf muss zum Hintergrund der einzelnen Bereiche passen.

Ebenso sollten Navigationsleisten separat vom Rest der App geschützt sein.

Abbildung 4: Eine durchsichtige Statusleiste für die Navigationsleiste. Auf diesem Bild ist der Statusleistenschutz für die Navigationsleiste, aber nicht für die App zu sehen.

Stapeln Sie keine Schutzmechanismen für die Statusleiste, z. B. den integrierten Schutz für die Material 3 TopAppBar und einen benutzerdefinierten Schutz.

In den Android-Systemleisten finden Sie grundlegende Designrichtlinien für Navigationsleisten. Im folgenden Abschnitt finden Sie weitere Hinweise zur Navigationsleiste.

Scrollbare Inhalte

Untere App-Leisten sollten beim Scrollen minimiert werden.

Dos

Fügen Sie eine Systemleisten-Schiebemaske für die Navigation mit drei Schaltflächen hinzu, wenn die untere App-Leiste ausgeblendet wird.

Dos

Die Bedienung per Geste 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 Ausschnitte des Displays berücksichtigen, damit wichtige Bereiche der Benutzeroberfläche nicht unter dem Displayausschnitt dargestellt werden.

Dos

Wichtige UI-Elemente in Ausschnitte für Displayaussparungen einfügen.

Nicht

Platzieren Sie wichtige UI-Elemente am äußersten Rand des Bildschirms.

Vollständige App-Bar-Hintergründe sollten jedoch in den Displayausschnitt hineinragen, wie in der folgenden Abbildung dargestellt.

Abbildung 5: Vollständige App-Bar-Hintergründe werden in den Displayausschnitt gezogen, während wichtige UI-Elemente eingefügt werden.

Achten Sie darauf, dass horizontale Karussells in den Displayausschnitt hineinragen.

Abbildung 6: Ein horizontales Display von Rand zu Rand, bei dem das Karussell durch den Displayausschnitt scrollt.

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

Weitere Hinweise

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