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ücksichtige immer das Vorhandensein und die Sichtbarkeit von Systemleisten, egal ob du Layouts, Eingabemethoden oder andere Gerätefunktionen entwirfst.
Android-Fähigkeiten
Auf GitHub ansehenUnterstützung für randlose Anzeige hinzufügen
android skills add edge-to-edge
Fazit
Füge Systemleisten in deine Layouts für verschiedene Bildschirmgrößen und Formfaktoren ein. Berücksichtige sichere UI-Zonen, Systeminteraktionen, Eingabemethoden, Display-Aussparungen, Statusleisten, Titelleisten, Navigationsleisten und andere Gerätefunktionen.
Lass die Systemstatus- und Navigationsleisten transparent oder durchscheinend und zeichne Inhalte hinter diesen Leisten, um den gesamten Bildschirm zu nutzen.
Verwende
WindowInsets, um Überlagerungen durch Systemleisten richtig zu handhaben und dafür zu sorgen, dass deine Inhalte in deinen adaptiven Layouts nicht verdeckt werden.Verwenden Sie kanonische Layouts, die den Bildschirmplatz effizient nutzen.
Statusleiste
Die Statusleiste enthält Benachrichtigungssymbole und Systemsymbole. Der Nutzer interagiert mit der Statusleiste, indem er sie nach unten zieht, um auf die Benachrichtigungsleiste zuzugreifen. Statusleistenstile können transparent oder durchscheinend sein.
Statusleistensymbole
Die Symbole in der Statusleiste können je nach Kontext, Tageszeit, vom Nutzer festgelegten Einstellungen oder Designs und anderen Parametern unterschiedlich aussehen. Weitere Informationen finden Sie unter Symbole in der Systemleiste.
Wenn eine Benachrichtigung eingeht, wird normalerweise ein Symbol in der Statusleiste angezeigt. Das signalisiert dem Nutzer, dass es in der Benachrichtigungsleiste etwas zu sehen gibt. Das kann das App-Symbol oder ein Symbol sein, das den Kanal repräsentiert. Siehe Benachrichtigungsdesign.
Stil der Statusleiste festlegen
Mache die Statusleiste transparent oder durchscheinend, damit der Inhalt deiner App den gesamten Bildschirm ausfüllt. Legen Sie dann den Stil der Symbole in der Systemleiste so fest, dass sie einen angemessenen Kontrast haben.
Unter Android 15 wird die randlose Darstellung erzwungen, sodass die Statusleiste standardmäßig transparent ist. Rufe enableEdgeToEdge() auf, um die Abwärtskompatibilität zu gewährleisten.
In der folgenden Abbildung links 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 dargestellt wird. Transluzente Statusleisten sind ideal, wenn die UI unter der Statusleiste scrollt. Weitere Informationen zum Farbverlaufsschutz finden Sie unter Edge-to-Edge-Design.
Navigation
Unter Android können Nutzer die Navigation über die Steuerelemente „Zurück“, „Startseite“ und „Übersicht“ steuern:
- Mit „Zurück“ kehren Sie zur vorherigen Ansicht zurück.
- Die App wird geschlossen und der Startbildschirm des Geräts wird angezeigt.
- In der Übersicht werden aktive Apps und kürzlich nicht geschlossene Apps angezeigt.
Nutzer können aus verschiedenen Navigationskonfigurationen wählen, darunter die Bedienung über Gesten und die adaptive Navigation. Um eine optimale User Experience 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 Gesten-Handle angezeigt. Nutzer können vom linken oder rechten Bildschirmrand wischen, um zurückzugehen, und von unten nach oben, um zum Startbildschirm zu gelangen. Wenn du nach oben wischst und hältst, wird die Übersicht geöffnet.
Die Bedienung über Gesten ist ein skalierbareres Navigationsmuster für das Design auf Mobilgeräten und größeren Bildschirmen. So sorgst du für eine optimale Nutzerfreundlichkeit bei der Bedienung über Gesten:
- Unterstützung von randlosen Inhalten.
- Fügen Sie keine Interaktionen oder Berührungszielbereiche unter den Insets 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 unter Android ist der Wechsel 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 unterschiedlich gestaltet werden können, z. B. bei kompakten oder maximierten Fenstergrößen oder verschiedenen Faltpositionen.
Weitere Informationen finden Sie unter Adaptive Navigation erstellen.
Navigationssymbole
Navigationssymbole können je nach den vom Nutzer festgelegten Einstellungen oder Designs auch unterschiedlich aussehen. Weitere Informationen finden Sie unter Symbole in der Systemleiste.
Navigationsstil festlegen
Android übernimmt den visuellen Schutz der Benutzeroberfläche im Modus „Bedienung über Gesten“ und in den Schaltflächenmodi. Das System wendet eine dynamische Farbanpassung an, bei der sich die Farbe der Inhalte der Systemleisten je nach den Inhalten dahinter ändert.
Bedienung über Gesten
Wenn die App auf Android 15 ausgerichtet ist oder enableEdgeToEdge für die Activity aufgerufen wird, zeichnet das System eine transparente Navigationsleiste für die Bedienung über Gesten und wendet eine dynamische Farbanpassung an. Im folgenden Beispiel ändert sich die Farbe des Ziehpunkts 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
Tastenmodi
Nachdem du Android 15 als Ziel festgelegt oder enableEdgeToEdge für Activity aufgerufen hast, wendet das System einen halbtransparenten Scrim hinter den Navigationsleisten mit Schaltflächen an. Du kannst diesen entfernen, indem du Window.setNavigationBarContrastEnforced() auf „false“ setzt.
Verwende 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 scrollt. Wenn Sie eine transparente Navigationsleiste verwenden möchten, setzen Sie Window.setNavigationBarContrastEnforced() auf „false“ und fügen Sie den unteren App-Leisten Padding hinzu, damit sie unter den Systemnavigationsleisten angezeigt werden (siehe Abbildungen 7, 8 und 9). Weitere Informationen findest du unter Schutz der Systemleiste.
Verwenden Sie eine halbtransparente Navigationsleiste mit drei Schaltflächen für scrollbare Inhalte. Weitere Informationen zu Überlegungen zur halbtransparenten Navigationsleiste finden Sie unter Edge-to-Edge-Design.
Tastatur und Navigation
Jeder Navigationstyp reagiert angemessen auf die Bildschirmtastatur, sodass der Nutzer Aktionen wie das Schließen oder sogar das Ändern des Tastaturtyps ausführen kann. Verwende 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 App-UI, 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 zu verhindern, dass Ihre Benutzeroberfläche durch die Systemleisten auf Displays wie großen Bildschirmen, Foldables und App-Fenstern im Mehrfenstermodus und Desktop-Freiform-Fenstermodus 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 die Navigationsleiste beispielsweise eine Schaltfläche verdeckt, kann der Nutzer die Schaltfläche möglicherweise nicht anklicken.
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 Sensoren auf der Vorderseite zu bieten. Display-Aussparungen können je nach Hersteller variieren. Überlege, wie sich Display-Aussparungen auf Inhalte, Ausrichtung und randlose Darstellung auswirken.
Immersiver Modus
Du kannst Systemleisten ausblenden, wenn du eine Vollbildansicht benötigst, z. B. wenn sich der Nutzer einen Film ansieht. Der Nutzer sollte aber weiterhin die Möglichkeit haben, durch Tippen die Systemleisten einzublenden und mit den Systemsteuerelementen zu interagieren. Weitere Informationen finden Sie unter Immersive Inhalte und Systemleisten für den immersiven Modus ausblenden.