Edge-to-Edge-Design

Eine randlose App nutzt den gesamten Bildschirm, indem die Benutzeroberfläche unter den Systemleisten gezeichnet wird.

Abbildung 1. Links. Eine App, die nicht im Edge-to-Edge-Modus angezeigt wird. Genau. Eine App, die randlos angezeigt wird.

Fazit

  • Zeichne den Hintergrund und den scrollbaren Inhalt unter den Systemleisten, um eine randlose Darstellung zu ermöglichen.
  • Vermeiden Sie es, Tippgesten oder Ziehziele unter System-Insets hinzuzufügen, da diese mit der randlosen Darstellung und der Bedienung über Gesten in Konflikt stehen.
Abbildung 2. Eine App mit grün hervorgehobenen Gesten-Insets.

Inhalte hinter den Systemleisten anzeigen

Mit der Funktion „Randlos“ können Sie die Benutzeroberfläche unter den Systemleisten zeichnen, um eine immersive Darstellung zu ermöglichen.

Eine App kann auf Überschneidungen von Inhalten reagieren, indem sie auf Insets reagiert. Insets beschreiben, wie viel Abstand der Inhalt Ihrer App haben muss, um Überschneidungen mit Systemleisten oder physischen Gerätefunktionen wie Display-Aussparungen zu vermeiden. Informationen zur Unterstützung des randlosen Designs und zur Verarbeitung von Insets in Compose und Ansichten.

Beachten Sie beim Entwerfen von randlosen Anwendungsfällen die folgenden Arten von Insets:

  • Systemleisten-Insets gelten für UI-Elemente, die sowohl antippbar sind als auch nicht von den Systemleisten verdeckt werden sollten.
  • System-Gesten-Insets gelten für Bereiche, die vom Betriebssystem für die Bedienung über Gesten verwendet werden und Vorrang vor Ihrer App haben.
  • Display-Aussparungs-Insets gelten für Gerätebereiche, die in die Displayoberfläche hineinreichen, z. B. die Kameraaussparung.

Überlegungen zur Statusleiste

Grundlegende Designrichtlinien für Systemleisten finden Sie unter Android-Systemleisten. Im folgenden Abschnitt werden weitere Überlegungen zur Statusleiste erläutert.

Scrollbare Inhalte

Obere App-Leisten sollten 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 minimiert oder aus dem Bildschirm gescrollt werden. Mittlere und große obere App-Leisten können zu einer kleineren App-Leiste minimiert werden. Weitere Informationen finden Sie im [Material-Leitfaden][10].

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 scrollt, damit die Symbole in der Statusleiste nicht unübersichtlich wirken. Dazu müssen Sie zuerst eine scrollbare UI im Vollbildmodus erstellen. Folgen Sie dazu den Schritten in der Dokumentation zu LazyColumn oder RecyclerView. Sorge dann dafür, dass die Systemleiste durchscheinend ist, indem du einen der folgenden Schritte ausführst:

  • Verlassen Sie sich gegebenenfalls auf den automatischen Schutz der Material 3-TopAppBar beim Scrollen.
  • Erstelle ein benutzerdefiniertes Farbverlaufs-Composable oder verwende GradientProtection für Ansichten. Weitere Informationen dazu, wie Sie dies in Compose tun, finden Sie unter Schutz der Systemleiste.
Abbildung 3. Eine App mit grün hervorgehobenen Gesten-Insets.

Achte bei adaptiven Layouts darauf, dass für Bereiche mit unterschiedlichen Hintergrundfarben separate Schutzmaßnahmen vorhanden sind.

Don´t

Der Farbverlaufsschutz passt nicht zum Hintergrund der einzelnen Bereiche.

Das sollten Sie tun

Die Farbverlaufsschutz-Ebene muss dem Hintergrund des jeweiligen Bereichs entsprechen.

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

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

Stapeln Sie keine Schutzmaßnahmen für die Statusleiste, indem Sie beispielsweise sowohl den integrierten Schutz der Material 3-TopAppBar als auch einen benutzerdefinierten Schutz verwenden.

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

Scrollbare Inhalte

[BottomAppBar][10] sollte beim Scrollen mit dem Parameter scrollBehavior minimiert werden.

Das sollten Sie tun

Scrim für die Systemleiste für die Dreitastennavigation hinzufügen, wenn die untere App-Leiste ausgeblendet wird.

Das sollten Sie tun

Die Bedienung über Gesten sollte transparent bleiben. Fügen Sie keine zusätzliche Ebene hinzu.

[NavigationBar]11 sollte jedoch beim Scrollen sichtbar bleiben, da es keinen scrollBehavior-Parameter hat.

Display-Aussparungen

Display-Aussparungen können sich auf das Erscheinungsbild der Benutzeroberfläche auswirken. Apps müssen die Display-Aussparung so berücksichtigen, dass wichtige Teile der Benutzeroberfläche nicht unter der Display-Aussparung dargestellt werden.

Das sollten Sie tun

Wichtige UI-Elemente mithilfe von Display-Aussparungen einrücken.

Don´t

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

Einfarbige Hintergründe der App-Leiste sollten jedoch wie in der folgenden Abbildung in die Display-Aussparung hineinreichen.

Abbildung 5. Einfarbige Hintergründe der App-Leiste werden in die Display-Aussparung gezeichnet, während wichtige UI-Elemente eingerückt sind.

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

Abbildung 6: Ein horizontales Display, das sich über die gesamte Breite erstreckt und bei dem das Karussell durch die Display-Aussparung scrollt.

Informationen zur Unterstützung von Display-Aussparungen in Compose

Weitere Hinweise

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