Diese Seite wurde von der Cloud Translation API übersetzt.

Inhalte in deiner App randvoll anzeigen

Du kannst deine App so einstellen, dass sie randlos auf der gesamten Breite und Höhe des Displays angezeigt wird. Dazu zeichnest du hinter die Systemleisten. Die Systemleisten sind die Statusleiste und die Navigationsleiste.

Um ein Edge-to-Edge-Layout zu implementieren, muss Ihre App folgende Voraussetzungen erfüllen:

Hinter der Navigationsleiste zeichnen, um eine ansprechendere und modernere User Experience zu schaffen.
Ziehen Sie den Bereich hinter der Statusleiste, wenn dies für den Inhalt und das Layout sinnvoll ist, z. B. bei Bildern in voller Breite. Verwenden Sie dazu APIs wie AppBarLayout, mit dem eine App-Leiste oben auf dem Bildschirm angeheftet wird.

Abbildung 1. Systemleisten in einem randlosen Layout.

Führen Sie die folgenden Schritte aus, um ein Edge-to-Edge-Layout in Ihrer App zu implementieren:

Aktivieren Sie das randlose Display.
Gehen Sie mit allen visuellen Überschneidungen um.

Ein Bild einer App mit Bildern hinter der Statusleiste — **Abbildung 2.** Beispiel für eine App mit Bildern hinter der Statusleiste.

Aktivieren Sie das randlose Display.

Du kannst das randlose Display in deiner App aktivieren, indem du in onCreate deiner Activity enableEdgeToEdge aufrufst. 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 sorgt enableEdgeToEdge dafür, dass die Systemleisten transparent sind. Eine Ausnahme bildet der Navigationsmodus mit 3 Schaltflächen, bei dem die Statusleiste ein durchsichtiges Display erhält. Die Farben der Systemsymbole und des Gitternetzes werden an das helle oder dunkle Design des Systems angepasst.

Bei der Methode enableEdgeToEdge wird automatisch festgelegt, dass die App randvoll dargestellt werden soll, und die Farben der Systemleisten werden angepasst. Falls dies aus irgendeinem Grund erforderlich ist, finden Sie weitere Informationen unter Edge-to-Edge-Display manuell einrichten.

Überlappungen mit Einsätzen handhaben

Nachdem Sie das randlose Display aktiviert haben, ziehen sich möglicherweise einige Ansichten Ihrer App hinter die Systemleisten (siehe Abbildung 3).

Sie können Überschneidungen beheben, indem Sie auf Einsätze reagieren, die angeben, welche Teile des Bildschirms sich mit der System-UI wie der Navigationsleiste oder der Statusleiste überschneiden. Überschneidungen können bedeuten, dass sie über dem Inhalt angezeigt werden, aber sie können Ihre App auch über Systemgesten informieren.

Die folgenden Arten von Einsätzen gelten für die randlose Darstellung Ihrer App:

Einfügungen für Systemleisten:Am besten geeignet für Ansichten, die antippbar sind und nicht durch Systemleisten verdeckt werden dürfen.
Eingaben von Systemgesten:für Bereiche zur Gestennavigation, die vom System verwendet werden und Vorrang vor Ihrer App haben.

Systemleisteneinsätze

Systemleisteneinsätze sind die am häufigsten verwendeten Arten von Einfügungen. Sie stellen den Bereich dar, in dem die System-UI auf der Z-Achse über Ihrer App angezeigt wird. Sie eignen sich am besten dazu, Ansichten in Ihrer App zu verschieben oder aufzufüllen, die antippbar sind und nicht von den Systembalken verdeckt werden dürfen.

Beispielsweise wird die Unverankerte Aktionsschaltfläche (UAS) in Abbildung 3 teilweise von der Navigationsleiste verdeckt:

Ein Bild, das die randlose Implementierung zeigt, aber die Navigationsleiste verdeckt die UAS. — **Abbildung 3**: Navigationsleiste, die eine UAS in einem randlosen Layout überlappt.

Um diese Art von visueller Überschneidung im Gesten- oder Schaltflächenmodus zu vermeiden, können Sie die Ränder der Ansicht mithilfe von getInsets(int) und WindowInsetsCompat.Type.systemBars() vergrößern.

Das folgende Codebeispiel zeigt, wie Systemleisteneinfügungen 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 Beispiel in Abbildung 3 anwenden, entsteht im Schaltflächenmodus keine visuelle Überschneidung (siehe Abbildung 4):

Ein Bild mit einer durchsichtigen Navigationsleiste, die den FAB nicht verdeckt — **Abbildung 4**: Visuelle Überschneidung wird im Schaltflächenmodus aufgelöst.

Dasselbe gilt für den Bedienungsmodus über Gesten, wie in Abbildung 5 dargestellt:

Ein Bild, auf dem von Rand zu Rand mit Bedienung über Gesten zu sehen ist — **Abbildung 5**: Visuelle Überschneidung wird im Bedienungsmodus über Gesten aufgelöst.

System-Touch-Gesten

Systemgesten-Einsätze stellen die Bereiche des Fensters dar, in denen Systemgesten Vorrang vor Ihrer App haben. Diese Bereiche sind in Abbildung 6 orange dargestellt:

Bild, das Einsätze von Systemgesten zeigt — **Abbildung 6.** System-Touch-Gesten

Wie bei den Systemleisten-Einsätzen können Sie auch hier eine Überlappen der Gesten-Einsätze mit getInsets(int) und WindowInsetsCompat.Type.systemGestures() vermeiden.

Verwenden Sie diese Einfügungen, um wischbare Ansichten von den Kanten weg zu verschieben oder mit Pads zu verschieben. Zu den häufigsten Anwendungsfällen gehören Tabellen am unteren Rand, das Wischen in Spielen und Karussells, die mit ViewPager2 implementiert wurden.

Unter Android 10 oder höher enthalten System-Gesteneinsätze einen unteren Bereich für die Startbildschirmgeste und einen nach links und rechts für die Zurück-Bewegung:

Bild, das die Messungen von System-Touch-Gesten zeigt — **Abbildung 7.** Messungen von Systembewegungen.

Das folgende Codebeispiel zeigt, wie Einfügungen für System-Gesten implementiert werden:

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 abspielen, was dem Nutzer ein intensiveres Erlebnis bietet. Mithilfe der Bibliotheken WindowInsetsController und WindowInsetsControllerCompat können Sie die Systemleisten für den immersiven Modus 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 findest du unter Systemleisten für immersiven Modus ausblenden.

Weitere Informationen

In den folgenden Referenzen finden Sie weitere Informationen zu WindowInsets, zur Bedienung über Gesten und zur Funktionsweise von Einfügungen: