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.

Rand bis zum Rand im „Schreiben“ →

Sobald Sie SDK 35 oder höher auf einem Gerät mit Android 15 oder höher ausrichten, wird Ihre App Edge-to-Edge-Display angezeigt. Das Fenster nimmt die gesamte Breite und Höhe des Bildschirms ein, indem es hinter den Systemleisten gezeichnet wird. Zu den Systemleisten gehören die Status-, die Untertitel- und die Navigationsleiste.

Viele Apps haben eine obere App-Leiste. Die obere App-Leiste sollte sich bis zum oberen Bildschirmrand erstrecken und hinter der Statusleiste angezeigt werden. Optional kann die obere App-Leiste auf die Höhe der Statusleiste angepasst werden, wenn der Inhalt scrollt.

Viele Apps haben auch eine untere App-Leiste oder eine untere Navigationsleiste. Diese Leisten sollten sich auch bis zum unteren Bildschirmrand erstrecken und hinter der Navigationsleiste angezeigt werden. Andernfalls sollten in Apps scrollbare Inhalte hinter der Navigationsleiste angezeigt werden.

Wenn Sie ein Edge-to-Edge-Layout in Ihrer App implementieren, ist Folgendes zu beachten:

1. Randloses Display aktivieren
2. Beheben Sie visuelle Überschneidungen.
3. Erwäge die Anzeige von Gittern hinter den Systemleisten.

Randloses Display aktivieren

Wenn Ihre App auf SDK 35 oder höher ausgerichtet ist, wird Edge-to-Edge automatisch für Android 15-Geräte oder höher aktiviert.

So aktivieren Sie Edge-to-Edge unter früheren Android-Versionen:

1. Fügen Sie der androidx.activity-Bibliothek in der Datei build.gradle Ihrer App oder Ihres Moduls eine Abhängigkeit hinzu:

   Kotlin

   dependencies {
       val activity_version = activity_version
       // Java language implementation
       implementation("androidx.activity:activity:$activity_version")
       // Kotlin
       implementation("androidx.activity:activity-ktx:$activity_version")
   }
   

   Cool

   dependencies {
       def activity_version = activity_version
       // Java language implementation
       implementation 'androidx.activity:activity:$activity_version'
       // Kotlin
       implementation 'androidx.activity:activity-ktx:$activity_version'
   }
   

2. Importieren Sie die Erweiterungsfunktion enableEdgeToEdge in Ihre App:

Aktivieren Sie Edge-to-Edge manuell. Rufen Sie dazu enableEdgeToEdge in onCreate Ihrer Activity auf. Sie sollte vor setContentView aufgerufen werden.

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

     @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 Funktion enableEdgeToEdge() gibt automatisch an, dass die App randlos dargestellt werden soll, und passt die Farben der Systemleisten an.

Informationen zum Aktivieren der randlosen Anzeige in Ihrer App ohne die Funktion enableEdgeToEdge() finden Sie unter Edge-to-Edge-Display manuell einrichten.

Überlappungen mithilfe von Einsätzen handhaben

Einige Ansichten Ihrer App werden möglicherweise hinter den Systemleisten angezeigt (siehe Abbildung 3).

Sie können Überschneidungen beheben, indem Sie auf Einfügungen reagieren. Diese geben an, welche Teile des Bildschirms sich mit der System-UI überschneiden, z. B. 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 antippbar sind und nicht durch die Systemleisten verdeckt werden dürfen.

• Display-Aussparungen:für Bereiche, in denen aufgrund der Form des Geräts eine Bildschirmaussparung vorhanden sein kann.

• Eingefügte Touch-Gesten des Systems:für vom System verwendete Navigationsbereiche für Gesten, die 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:

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:

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
}

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:

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

Display-Aussparungen

Einige Geräte haben Display-Aussparungen. Üblicherweise befindet sich die Aussparung oben auf dem Bildschirm und in der Statusleiste. Wenn sich der Bildschirm des Geräts im Querformat befindet, kann sich die Aussparung am vertikalen Rand befinden. Je nachdem, welche Inhalte in Ihrer App auf dem Bildschirm angezeigt werden, sollten Sie einen Innenrand implementieren, um Display-Aussparungen zu vermeiden, da Apps standardmäßig in der Display-Aussparung zeichnen.

Auf vielen App-Bildschirmen wird beispielsweise eine Liste mit Elementen angezeigt. Verdecken Sie Listenelemente nicht durch die Display-Aussparung oder die Systemleisten.

ViewCompat.setOnApplyWindowInsetsListener(binding.recyclerView) { v, insets ->
  val bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
      or WindowInsetsCompat.Type.displayCutout()
  )
  v.updatePadding(
    left = bars.left,
    top = bars.top,
    right = bars.right,
    bottom = bars.bottom,
  )
  WindowInsetsCompat.CONSUMED
}

ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> {
  WindowInsetsCompat bars = insets.getInsets(
    WindowInsetsCompat.Type.systemBars()
    | WindowInsetsCompat.Type.displayCutout()
  );
  v.setPadding(bars.left, bars.top, bars.right, bars.bottom);
  return WindowInsetsCompat.CONSUMED;
});

Bestimmen Sie den Wert von WindowInsetsCompat anhand des logischen oder der Systembalken und der Arten der Display-Aussparung.

Legen Sie für clipToPadding den Wert RecyclerView fest, sodass der Abstand mit den Listenelementen scrollt. Dadurch verbleiben die Elemente hinter den Systemleisten, wenn der Nutzer scrollt, wie im folgenden Beispiel gezeigt.

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />

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:

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:

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

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
}

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:

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

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

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

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:

• WindowInsets – Zuhörer für Layouts
• Bedienung über Gesten: Einfügungen
• Wie funktionieren Insets unter Android?