Inhalte in deiner App randvoll anzeigen

Schreiben Sie jetzt
Jetpack Compose ist das empfohlene UI-Toolkit für Android. Hier erfahren Sie, wie Sie in „Compose“ von Rand zu Rand arbeiten.

Hinter den Systemleisten zeichnen Sie die Darstellung Ihrer App über die gesamte Breite und Höhe des Bildschirms als randlos. Die Systemleisten sind die Statusleiste und die Navigationsleiste.

Um ein randloses Layout zu implementieren, muss Ihre App folgende Anforderungen erfüllen:

  • Hinter der Navigationsleiste ziehen, um eine ansprechendere und modernere Nutzererfahrung zu erzielen
  • Hinter der Statusleiste können Sie ziehen, wenn dies für Ihren Inhalt und Ihr Layout sinnvoll ist, z. B. bei Vollbildbildern. Verwenden Sie dazu APIs wie AppBarLayout. Damit wird eine App-Leiste definiert, die oben auf dem Bildschirm angepinnt ist.
Abbildung 1. Systemleisten in einem randlosen Layout.

So implementieren Sie ein randloses Layout in Ihrer App:

  1. Randloses Display aktivieren
  2. Beheben Sie visuelle Überschneidungen.
Ein Bild, das eine App zeigt, mit Bildern hinter der Statusleiste
Abbildung 2. Beispiel für eine App mit Bildern hinter der Statusleiste.

Randloses Display aktivieren

Sie können das Edge-to-Edge-Display in Ihrer App aktivieren, indem Sie enableEdgeToEdge in onCreate Ihres Activity aufrufen. Sie sollte vor setContentView aufgerufen werden.

Kotlin

  override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge()
    super.onCreate(savedInstanceState)
    ...
  }

Java

  @Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    EdgeToEdge.enable(this);
    super.onCreate(savedInstanceState);
    ...
  }

Standardmäßig sind die Systemleisten von enableEdgeToEdge transparent, außer im Bedienungsmodus über 3 Schaltflächen, bei dem die Statusleiste ein durchscheinendes Gitter erhält. Die Farben der Systemsymbole und des Gitters werden an das helle oder dunkle Design des Systems angepasst.

Die Methode enableEdgeToEdge gibt automatisch an, dass die App randlos dargestellt werden soll, und passt die Farben der Systemleisten an. Weitere Informationen finden Sie unter Rand-Display manuell einrichten, falls dies aus irgendeinem Grund erforderlich ist.

Überlappungen mithilfe von Einsätzen handhaben

Nachdem Sie die randlose Anzeige aktiviert haben, werden möglicherweise einige Ansichten Ihrer App hinter die Systemleisten gezogen, wie in Abbildung 3 gezeigt.

Sie können Überschneidungen beheben, indem Sie auf Einsätze reagieren. Damit geben Sie an, welche Teile des Bildschirms sich mit der System-UI überschneiden, z. B. mit der Navigationsleiste oder der Statusleiste. Bei einer Überschneidung wird die Anzeige über dem Inhalt eingeblendet. Sie kann Ihre App aber auch über Systemgesten informieren.

Die folgenden Arten von Einfügungen können für die randlose Darstellung Ihrer App verwendet werden:

  • Einfügungen von Systemleisten: Am besten geeignet für Ansichten, die anpassbar sind und nicht durch die Systemleisten verdeckt werden dürfen.

  • Eingefügte Touch-Gesten des Systems:für Gestennavigationsbereiche, die vom System verwendet werden und Vorrang vor deiner App haben.

Systembalken-Einsätze

Systemleisten-Einsätze sind die am häufigsten verwendete Einfügung. Sie stellen den Bereich dar, in dem die System-UI in der Z-Achse über Ihrer App angezeigt wird. Sie eignen sich am besten, um Ansichten in Ihrer App zu verschieben oder zu platzieren, die antippbar sind und nicht von den Systemleisten visuell verdeckt werden dürfen.

Zum Beispiel wird die unverankerte Aktionsschaltfläche (UAS) in Abbildung 3 teilweise von der Navigationsleiste verdeckt:

Ein Bild, das eine randlose Implementierung zeigt, aber die Navigationsleiste verdeckt die UAS
Abbildung 3: Navigationsleiste, die eine UAS in einem Edge-to-Edge-Layout überschneidet.

Um diese Art von visueller Überschneidung im Gesten- oder Schaltflächenmodus zu vermeiden, können Sie die Ränder der Ansicht erhöhen, indem Sie getInsets(int) mit WindowInsetsCompat.Type.systemBars() verwenden.

Das folgende Codebeispiel zeigt, wie Systemleisten-Einsätze implementiert werden:

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets ->
  val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
  // Apply the insets as a margin to the view. This solution sets
  // only the bottom, left, and right dimensions, but you can apply whichever
  // insets are appropriate to your layout. You can also update the view padding
  // if that's more appropriate.
  v.updateLayoutParams<MarginLayoutParams> {
      leftMargin = insets.left,
      bottomMargin = insets.bottom,
      rightMargin = insets.right,
  }

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
  WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(fab, (v, windowInsets) -> {
  Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars());
  // Apply the insets as a margin to the view. This solution sets only the
  // bottom, left, and right dimensions, but you can apply whichever insets are
  // appropriate to your layout. You can also update the view padding if that's
  // more appropriate.
  MarginLayoutParams mlp = (MarginLayoutParams) v.getLayoutParams();
  mlp.leftMargin = insets.left;
  mlp.bottomMargin = insets.bottom;
  mlp.rightMargin = insets.right;
  v.setLayoutParams(mlp);

  // Return CONSUMED if you don't want want the window insets to keep passing
  // down to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

Wenn Sie diese Lösung auf das in Abbildung 3 gezeigte Beispiel anwenden, entsteht keine visuelle Überschneidung im Schaltflächenmodus, wie in Abbildung 4 gezeigt:

Bild mit einer durchscheinenden Navigationsleiste, die die UAS nicht verdeckt
Abbildung 4: Visuelle Überschneidungen im Schaltflächenmodus beheben.

Dasselbe gilt für die Bedienung über Gesten, wie in Abbildung 5 dargestellt:

Ein Bild, das randlos mit der Bedienung über Gesten zeigt
Abbildung 5: Visuelle Überschneidungen bei der Bedienung über Gesten werden behoben.

Einfügung von Systemgesten

Eingefügte Systemgesten stellen die Bereiche des Fensters dar, in denen Systemgesten Vorrang vor deiner App haben. Diese Bereiche sind in Abbildung 6 orange dargestellt:

Ein Bild, das Einsätze für Systemgesten zeigt
Abbildung 6. Einfügungen von Systemgesten.

Wie bei den Einfügungen in der Systemleiste können Sie mit getInsets(int) und WindowInsetsCompat.Type.systemGestures() vermeiden, dass sich die Gesten-Einfügungen des Systems überlappen.

Mit diesen Einsätzen können Sie wischbare Ansichten von den Rändern weg verschieben oder auffüllen. Gängige Anwendungsfälle sind Tabellen am unteren Rand, Wischen in Spielen und Karussells, die mit ViewPager2 implementiert werden.

Unter Android 10 oder höher enthalten System-Touch-Gesten einen unteren Bereich für die Startbildschirm-Touch-Geste und einen linken und rechten für die „Zurück“-Touch-Gesten:

Ein Bild, auf dem die Einsätze von Systemgesten zu sehen sind
Abbildung 7. Messungen des integrierten Touch-Gestens.

Das folgende Codebeispiel zeigt, wie Sie Systembewegungseinfügungen implementieren:

Kotlin

ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets ->
    val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures())
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.updatePadding(insets.left, insets.top, insets.right, insets.bottom)

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    WindowInsetsCompat.CONSUMED
}

Java

ViewCompat.setOnApplyWindowInsetsListener(view, (v, windowInsets) -> {
    Insets insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemGestures());
    // Apply the insets as padding to the view. Here, set all the dimensions
    // as appropriate to your layout. You can also update the view's margin if
    // more appropriate.
    view.setPadding(insets.left, insets.top, insets.right, insets.bottom);

    // Return CONSUMED if you don't want the window insets to keep passing down
    // to descendant views.
    return WindowInsetsCompat.CONSUMED;
});

Immersiver Modus

Einige Inhalte lassen sich am besten im Vollbildmodus ansehen, was für ein immersiveres Erlebnis sorgt. Sie können die Systemleisten im immersiven Modus mithilfe der Bibliotheken WindowInsetsController und WindowInsetsControllerCompat ausblenden:

Kotlin

val windowInsetsController =
      WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())

Java

Window window = getWindow();
WindowInsetsControllerCompat windowInsetsController =
      WindowCompat.getInsetsController(window, window.getDecorView());
if (windowInsetsController == null) {
    return;
  }
// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars());

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars());

Weitere Informationen zur Implementierung dieser Funktion finden Sie unter Systemleisten im immersiven Modus ausblenden.

Zusätzliche Ressourcen

Weitere Informationen zu WindowInsets, der Gestennavigation und der Funktionsweise von Einfügungen finden Sie in den folgenden Referenzen: