Android-Systemleisten

Die Statusleiste, die Untertitelzeile 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 Anwesenheit und Prominenz von Systemleisten, unabhängig davon, ob Sie Layouts, Eingabemethoden oder andere Gerätefunktionen entwerfen.

**Abbildung 1**: Bilder hinter Systemleisten.

Fazit

Fügen Sie Systemleisten in Ihre Layouts für verschiedene Bildschirmgrößen und ‑faktoren ein. Berücksichtigen Sie die sicheren Bereiche der Benutzeroberfläche, Systeminteraktionen, Eingabemethoden, Displayausschnitte, Statusleisten, Untertitelbalken, Navigationsleisten und andere Gerätefunktionen.
Lassen Sie den Systemstatus und die Navigationsleisten transparent oder durchscheinend und zeichnen Sie Inhalte hinter diesen Leisten, um die gesamte Breite des Displays zu nutzen.
Verwenden Sie WindowInsets, um Systemleisten richtig zu berücksichtigen und dafür zu sorgen, 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. Der Nutzer interagiert mit der Statusleiste, indem er sie nach unten zieht, um auf die Benachrichtigungsleiste zuzugreifen. Die Statusleiste kann 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 in der Regel ein Symbol in der Statusleiste angezeigt. So wird dem Nutzer signalisiert, dass es auf der Benachrichtigungsleiste etwas zu sehen gibt. Das kann das App-Symbol oder ein Symbol zur Darstellung des Kanals sein. Weitere Informationen finden Sie unter Benachrichtigungen gestalten.

Abbildung 4: Benachrichtigungssymbol in der Statusleiste.

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 der Symbole in der Systemleiste so fest, dass sie einen angemessenen Kontrast haben.

Unter Android 15 wird die randlose Darstellung erzwungen, wodurch die Statusleiste standardmäßig transparent ist. Rufen Sie enableEdgeToEdge() für die Abwärtskompatibilität auf.

Im folgenden Bild auf der linken Seite ist die Statusleiste transparent und der grüne Hintergrund von TopAppBar wird hinter der Statusleiste angezeigt.

**Abbildung 5.** Nutzen Sie den gesamten Bildschirm, um Ihre Inhalte optimal zu präsentieren. Die Systemleisten dürfen nicht undurchsichtig sein.

Transparente Statusleisten sind ideal, wenn die Benutzeroberfläche nicht unter der Statusleiste angezeigt wird oder ein Bild unter der Statusleiste dargestellt wird. Durchscheinende Statusleisten sind ideal, wenn die Benutzeroberfläche unter der Statusleiste gescrollt wird. Weitere Informationen zum Schutz von Verläufen finden Sie unter Edge-to-Edge-Design.

**Abbildung 6:** Eine randlose App mit einem zweifarbigen Schutzverlauf, der sich über zwei Bereiche hinter der Systemstatusleiste erstreckt.

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 Home App wird geschlossen und der Startbildschirm des Geräts wird angezeigt.
In der Übersicht werden aktive Apps und kürzlich verwendete Apps angezeigt, die nicht geschlossen wurden.

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.

Bei der Bedienung über Gesten werden keine Schaltflächen für „Zurück“, „Startbildschirm“ und „Übersicht“ verwendet. Stattdessen wird ein einzelner Ziehpunkt für Gesten angezeigt. Nutzer interagieren, indem sie vom linken oder rechten Rand des Displays nach innen wischen, um zurückzugehen, und vom unteren Rand nach oben, um zum Startbildschirm zu gelangen. Wenn Sie nach oben wischen und das Display gedrückt halten, wird die Übersicht geöffnet.

Die Bedienung über Gesten ist ein skalierbares Navigationsmuster für das Design auf Mobilgeräten und größeren Bildschirmen. Um eine optimale Bedienung über Gesten zu bieten, sollten Sie die Gestensteuerung berücksichtigen. Gehen Sie dazu so vor:

Unterstützung von Inhalten, die sich über den gesamten Bildschirm erstrecken
Vermeiden Sie es, Interaktionen oder Berührungszielbereiche unter Einsätzen für die Bedienung über Gesten hinzuzufügen.

Weitere Informationen finden Sie unter Unterstützung für die Bedienung über Gesten hinzufügen.

**Abbildung 7.** Navigationsleiste mit Ziehpunkt für Gesten

Ein weiteres gängiges Navigationsmuster auf Android ist das Wechseln zwischen einer Navigationsleiste und einer Navigationsspalte, je nach Fenstergrößenklasse des Displays. Die adaptiven Navigationskomponenten in Jetpack Compose unterstützen mehrere Formfaktoren und sorgen dafür, dass die Systemleisten das Layout der Navigationskomponenten nicht beeinträchtigen.

Bei adaptiven Layouts sollten Sie berücksichtigen, wie sich die Systemleisten in verschiedenen Kontexten verhalten oder wie sie gestaltet werden, z. B. bei kompakten oder maximierten Fenstergrößen oder bei 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.

Android sorgt für den visuellen Schutz der Benutzeroberfläche bei Bedienung über Gesten und in den Schaltflächenmodi. Das System wendet eine dynamische Farbanpassung an, bei der sich die Farbe der Systemleisteninhalte basierend auf dem Inhalt dahinter ändert.

Navigationsmodus über Gesten

Nachdem Sie auf Android 15 ausgerichtet haben 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.

**Abbildung 8.** Dynamische Farbanpassung

Transparente Navigationsleisten für die Bedienung über Gesten sind immer empfehlenswert.

Das sollten Sie tun

Die Navigationsleiste für die Bedienung über Gesten sollte transparent sein.

Das sollten Sie nicht tun

Fügen Sie der Bedienung über Gesten einen Hintergrund hinzu.

Schaltflächenmodi

Nachdem Sie auf Android 15 ausgerichtet oder enableEdgeToEdge für die Activity aufgerufen haben, wendet das System einen durchscheinenden Scrim hinter den Navigationsleisten mit Schaltflächen an. Sie können ihn entfernen, indem Sie Window.setNavigationBarContrastEnforced() auf „false“ setzen.

**Abbildung 9.** Dynamische Farbanpassung mit einem transparenten Scrim.

Verwende transparente Navigationsleisten mit drei Schaltflächen, wenn es eine untere App-Leiste oder eine untere App-Navigationsleiste gibt oder wenn die Benutzeroberfläche nicht unter der Navigationsleiste mit drei Schaltflächen scrollt. Wenn Sie eine transparente Navigationsleiste erhalten möchten, setzen Sie Window.setNavigationBarContrastEnforced() auf „false“ und füllen Sie die unteren App-Leisten auf, um unter den Systemnavigationsleisten zu zeichnen, wie in den Abbildungen 7, 8 und 9 zu sehen ist. Weitere Informationen finden Sie unter Schutz der Systemleiste.

Verwenden Sie eine durchscheinende Navigationsleiste mit drei Schaltflächen für scrollende Inhalte. Weitere Informationen zur durchscheinenden Navigationsleiste finden Sie unter Edge-to-Edge-Design.

Tastatur und Navigation

**Abbildung 10.** Bildschirmtastatur mit Navigationsleisten

Jeder Navigationstyp reagiert angemessen auf die Bildschirmtastatur, damit der Nutzer Aktionen wie das Schließen oder sogar das Ändern des Tastaturtyps ausführen kann. Verwenden Sie WindowInsetsAnimationCompat, um einen reibungslosen Übergang zu gewährleisten, bei dem die App mit dem Ein- und Ausblenden der Tastatur am unteren Bildschirmrand synchronisiert wird.

Layouts

Mit adaptiven Layouts lässt sich der verfügbare Displaybereich optimal nutzen. Sie organisieren die App-Benutzeroberfläche, 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, damit die Benutzeroberfläche nicht durch die Systemleisten auf Displays wie großen Bildschirmen, Foldables und App-Fenstern im Mehrfenstermodus und Desktop-Freiform-Fenster-Modus verdeckt wird.

Wenn Ihre App im Edge-to-Edge-Modus angezeigt wird, prüfen Sie, ob Inhalte und Steuerelemente nicht durch die System-UI verdeckt werden. Wenn die Navigationsleiste beispielsweise eine Schaltfläche verdeckt, kann der Nutzer möglicherweise nicht auf die Schaltfläche klicken.

Weitere Informationen finden Sie unter Kanonische Layouts.

Display-Aussparungen

Eine Display-Aussparung ist ein Bereich auf einigen Geräten, der in die Displayoberfläche hineinragt, um Platz für nach vorn gerichtete Sensoren zu schaffen. Displayausschnitte können je nach Hersteller variieren. Überlegen Sie, wie Displayausschnitte mit Inhalten, Ausrichtung und Edge-to-Edge-Anzeigen interagieren.

**Abbildung 11.** Beispiele für Displayausschnitte.

Immersiver Modus

Sie können Systemleisten ausblenden, wenn Sie eine Vollbildansicht benötigen, z. B. wenn der Nutzer einen Film ansieht. Der Nutzer sollte weiterhin auf das Display tippen können, um die Systemleisten aufzurufen und mit den Systemsteuerungen zu interagieren. Weitere Informationen finden Sie unter Immersive Inhalte und Systemleisten für den immersiven Modus ausblenden.