Die Statusleiste, die Titelleiste und die Navigationsleiste sind die Systemleisten. Sie zeigen wichtige Informationen wie den Akkustand, die Uhrzeit und Benachrichtigungen an und ermöglichen die direkte Interaktion mit dem Gerät von überall aus.
Berücksichtigen Sie immer die Präsenz und Auffälligkeit von Systemleisten, unabhängig davon, ob Sie Layouts, Eingabemethoden oder andere Gerätefunktionen entwerfen.
Android-Skills
Auf GitHub ansehenEdge-to-Edge-Unterstützung hinzufügen
android skills add edge-to-edge
Fazit
Fügen Sie Systemleisten in Ihre Layouts für verschiedene Bildschirmgrößen und Formfaktoren ein. Berücksichtigen Sie dabei sichere UI-Bereiche, Systeminteraktionen, Eingabemethoden, Display-Aussparungen, Statusleisten, Titelleisten, Navigationsleisten und andere Gerätefunktionen.
Machen Sie die Systemstatus- und Navigationsleisten transparent oder durchscheinend und zeichnen Sie Inhalte hinter diesen Leisten, um eine Edge-to-Edge-Darstellung zu erzielen.
Verwenden Sie
WindowInsets, um Systemleisten korrekt zu verarbeiten und sicherzustellen, dass Ihre Inhalte in Ihren adaptiven Layouts nicht verdeckt werden.Verwenden Sie kanonische Layouts, die den Bildschirmplatz effizient nutzen.
Statusleiste
Die Statusleiste enthält Benachrichtigungs- und Systemsymbole. Nutzer können die Statusleiste nach unten ziehen, um auf die Benachrichtigungsleiste zuzugreifen. Statusleisten können transparent oder durchscheinend sein.
Statusleistensymbole
Statusleistensymbole können je nach Kontext, Tageszeit, vom Nutzer festgelegten Einstellungen oder Designs und anderen Parametern unterschiedlich aussehen. Weitere Informationen finden Sie unter Systemleistensymbole.
Wenn eine Benachrichtigung eingeht, wird in der Regel ein Symbol in der Statusleiste angezeigt. So wissen Nutzer, dass es im Benachrichtigungsbereich etwas zu sehen gibt. Das kann Ihr App-Symbol oder ein Symbol für den Kanal sein. Weitere Informationen finden Sie unter Design von Benachrichtigungen.
Stil der Statusleiste festlegen
Machen Sie die Statusleiste transparent oder durchscheinend, damit die Inhalte Ihrer App den gesamten Bildschirm einnehmen. Legen Sie dann den Stil Ihrer Systemleistensymbole so fest, dass die Symbole einen angemessenen Kontrast haben.
In Android 15 wird die Edge-to-Edge-Darstellung erzwungen, wodurch die Statusleiste standardmäßig transparent ist. Rufen Sie enableEdgeToEdge() auf, um die Abwärtskompatibilität zu gewährleisten.
Im folgenden Bild auf der linken Seite ist die Statusleiste transparent und der grüne Hintergrund der TopAppBar wird hinter der Statusleiste angezeigt.
Transparente Statusleisten sind ideal, wenn die Benutzeroberfläche nicht unter der Statusleiste angezeigt wird oder ein Bild unter der Statusleiste gezeichnet wird. Durchscheinende Statusleisten sind ideal, wenn die Benutzeroberfläche unter der Statusleiste gescrollt wird. Weitere Informationen zum Schutz vor Farbverläufen finden Sie unter Edge-to-Edge-Design.
Navigation
In Android können Nutzer die Navigation über die Schaltflächen „Zurück“, „Startbildschirm“ und „Übersicht“ steuern:
- Mit „Zurück“ kehren Sie zur vorherigen Ansicht zurück.
- Mit „Startbildschirm“ verlassen Sie die App und gelangen zum Startbildschirm des Geräts.
- Unter „Übersicht“ werden aktive Apps und kürzlich verwendete, nicht geschlossene Apps angezeigt.
Nutzer können zwischen verschiedenen Navigationskonfigurationen wählen, darunter die Bedienung über Gesten und die adaptive Navigation. Um eine optimale Nutzererfahrung zu bieten, sollten Sie mehrere Arten der Navigation berücksichtigen.
Bedienung über Gesten
Bei der Bedienung über Gesten werden keine Schaltflächen für „Zurück“, „Startbildschirm“ und „Übersicht“ verwendet. Stattdessen wird ein einzelner Griff für Gesten angezeigt. Nutzer können vom linken oder rechten Rand des Bildschirms nach innen wischen, um zurückzugehen, und vom unteren Rand nach oben wischen, um zum Startbildschirm zu gelangen. Wenn Sie nach oben wischen und den Finger gedrückt halten, wird die Übersicht geöffnet.
Die Bedienung über Gesten ist ein skalierbareres Navigationsmuster für das Design auf Mobilgeräten und größeren Bildschirmen. Um die bestmögliche Nutzererfahrung zu bieten, sollten Sie die Bedienung über Gesten berücksichtigen. Gehen Sie dazu so vor:
- Unterstützen Sie Edge-to-Edge-Inhalte.
- Fügen Sie keine Interaktionen oder Touch-Ziele unter den Einzügen für die Bedienung über Gesten hinzu.
Weitere Informationen finden Sie unter Unterstützung für die Bedienung über Gesten hinzufügen.
Adaptive Navigation
Ein weiteres gängiges Navigationsmuster in Android ist das Wechseln zwischen einer Navigationsleiste und einer Navigationsleiste, je nach Fenstergrößenklasse des Displays. Die adaptiven Navigationskomponenten in Jetpack Compose unterstützen mehrere Formfaktoren und verhindern gleichzeitig, dass die Systemleisten das Layout der Navigationskomponenten beeinträchtigen.
Bei adaptiven Layouts sollten Sie berücksichtigen, wie sich die Systemleisten in verschiedenen Kontexten verhalten oder anders gestaltet werden können, z. B. bei kompakten oder erweiterten Fenstergrößen oder verschiedenen faltbaren Positionen.
Weitere Informationen finden Sie unter Adaptive Navigation erstellen.
Navigationssymbole
Navigationssymbole können je nach vom Nutzer festgelegten Einstellungen oder Designs auch unterschiedlich aussehen. Weitere Informationen finden Sie unter Systemleistensymbole.
Navigationsstil festlegen
Android sorgt für den visuellen Schutz der Benutzeroberfläche im Modus für die Bedienung über Gesten und in den Schaltflächenmodi. Das System wendet eine dynamische Farbanpassung an, bei der sich die Farbe der Inhalte der Systemleisten an den Inhalt dahinter anpasst.
Modus für die Bedienung über Gesten
Nachdem Sie Android 15 als Ziel festgelegt oder enableEdgeToEdge für die Activity aufgerufen haben, zeichnet das System eine transparente Bedienung über Gesten und wendet die dynamische Farbanpassung an. Im folgenden Beispiel ändert sich die Farbe des Griffs in der Navigationsleiste in eine dunkle Farbe, wenn er über hellem Inhalt platziert wird, und umgekehrt.
Transparente Navigationsleisten für die Bedienung über Gesten werden immer empfohlen.
Das sollten Sie tun
Das sollten Sie nicht tun
Schaltflächenmodi
Nachdem Sie Android 15 als Ziel festgelegt oder enableEdgeToEdge für die Activity aufgerufen haben, wendet das System hinter den Navigationsleisten mit Schaltflächen einen durchscheinenden Schleier an. Sie können ihn entfernen, indem Sie Window.setNavigationBarContrastEnforced() auf „false“ setzen.
Verwenden Sie transparente Navigationsleisten mit drei Schaltflächen, wenn eine untere App-Leiste oder eine untere App-Navigationsleiste vorhanden ist oder wenn die Benutzeroberfläche nicht unter der Navigationsleiste mit drei Schaltflächen gescrollt wird. Wenn Sie eine transparente Navigationsleiste erhalten möchten, setzen Sie Window.setNavigationBarContrastEnforced() auf „false“ und füllen Sie die unteren App-Leisten auf, damit sie unter den Systemnavigationsleisten gezeichnet werden, wie in den Abbildungen 7, 8 und 9 zu sehen. Weitere Informationen finden Sie unter
Schutz der Systemleiste.
Verwenden Sie eine durchscheinende Navigationsleiste mit drei Schaltflächen für scrollbare Inhalte. Weitere Informationen zu durchscheinenden Navigationsleisten finden Sie unter Edge-to-Edge-Design.
Tastatur und Navigation
Jeder Navigationstyp reagiert entsprechend auf die Bildschirmtastatur, damit
der Nutzer Aktionen wie das Schließen oder sogar das Ändern des Tastatur
typs ausführen kann. Verwenden Sie
WindowInsetsAnimationCompat, um einen reibungslosen Übergang zu gewährleisten, bei dem der Übergang der App
mit dem Ein- und Ausblenden der Tastatur vom unteren Bildschirmrand synchronisiert wird.
Layouts
Adaptive Layouts optimieren den verfügbaren Platz auf dem Display. Sie organisieren die Benutzeroberfläche der App, indem sie Inhalte in sekundäre oder tertiäre Bereiche verschieben.
Berücksichtigen Sie beim Entwerfen adaptiver Layouts, wie die Systemleisten mit Ihren Inhalten interagieren. Verwenden Sie WindowInsets, um sicherzustellen, dass die Benutzeroberfläche auf Displays wie großen Bildschirmen, faltbaren Geräten und App-Fenstern im Mehrfenster- und Desktop-Fenstermodus nicht von den Systemleisten verdeckt wird.
Wenn Ihre App im Edge-to-Edge-Modus angezeigt wird, prüfen Sie, ob Inhalte und Steuerelemente nicht von der System-UI verdeckt werden. Wenn beispielsweise die Navigationsleiste eine Schaltfläche verdeckt, kann der Nutzer möglicherweise nicht darauf klicken.
Weitere Informationen finden Sie unter Kanonische Layouts.
Display-Aussparungen
Eine Display-Aussparung ist ein Bereich auf einigen Geräten, der sich in die Displayoberfläche erstreckt, um Platz für nach vorne gerichtete Sensoren zu schaffen. Display-Aussparungen können je nach Hersteller variieren. Berücksichtigen Sie, wie Display-Aussparungen mit Inhalten, Ausrichtung und Edge-to-Edge-Darstellung interagieren.
Immersiver Modus
Sie können Systemleisten ausblenden, wenn Sie eine Vollbilddarstellung benötigen, z. B. wenn der Nutzer einen Film ansieht. Der Nutzer sollte weiterhin auf das Display tippen können, um Systemleisten einzublenden und mit Systemsteuerungen zu navigieren oder zu interagieren. Weitere Informationen finden Sie unter Immersive Inhalte und Systemleisten für den immersiven Modus ausblenden.