Inhalte in deiner App randvoll anzeigen

Compose ausprobieren

Jetpack Compose ist das empfohlene UI-Toolkit für Android. Informationen zum Arbeiten mit Vollbildmodus in Compose

Vollbildmodus in „Schreiben“ →

Wenn Sie Ihre App auf SDK 35 oder höher auf einem Gerät mit Android 15 oder höher ausrichten, wird sie randlos angezeigt. Das Fenster erstreckt sich über die gesamte Breite und Höhe des Displays, da es hinter den Systemleisten gezeichnet wird. Zu den Systemleisten gehören die Statusleiste, die Untertitelleiste und die Navigationsleiste.

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

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

Abbildung 1. Systemleisten in einem randlosen Layout.

Beachten Sie bei der Implementierung eines Vollbildlayouts in Ihrer App Folgendes:

1. Randloses Display aktivieren
2. Beheben Sie alle visuellen Überschneidungen.
3. Sie können auch einen Scrim hinter den Systemleisten anzeigen.

Abbildung 2. Beispiel für Bilder hinter der Statusleiste.

Wichtig: Unter Android 15 (API-Level 35) und höher wird randlose Darstellung erzwungen, sobald Ihre App auf SDK 35 ausgerichtet ist. Wenn Ihre App nicht bereits randlos ist, werden Teile Ihrer App möglicherweise verdeckt und Sie müssen Einzüge berücksichtigen. Je nach App kann dieser Aufwand erheblich sein oder nicht.

Randlose Anzeige aktivieren

Wenn Ihre App auf SDK 35 oder höher ausgerichtet ist, wird die randlose Darstellung für Geräte mit Android 15 oder höher automatisch aktiviert.

So aktivieren Sie den Vollbildmodus bei älteren Android-Versionen:

1. Fügen Sie der Bibliothek androidx.activity 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")
   }
   

   Groovy

   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:

Sie können die randlose Anzeige manuell aktivieren, indem Sie enableEdgeToEdge in onCreate Ihres Activity aufrufen. Er 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 werden die Systemleisten von enableEdgeToEdge() transparent dargestellt, mit Ausnahme des Navigationsmodus mit drei Schaltflächen, in dem die Statusleiste einen halbtransparenten Schleier erhält. Die Farben der Systemsymbole und des Scrims werden je nach hellem oder dunklem Systemdesign angepasst.

Die Funktion enableEdgeToEdge() gibt automatisch an, dass die App randlos gestaltet werden soll, und passt die Farben der Systemleisten an.

Wenn Sie die randlose Anzeige in Ihrer App aktivieren möchten, ohne die Funktion enableEdgeToEdge() zu verwenden, lesen Sie den Hilfeartikel Randlose Anzeige manuell einrichten.

Überschneidungen mit Einzügen beheben

Einige Ansichten Ihrer App werden möglicherweise hinter den Systemleisten dargestellt, wie in Abbildung 3 dargestellt.

Sie können Überschneidungen beheben, indem Sie auf Einzüge reagieren, die angeben, welche Teile des Bildschirms sich mit der System-UI überschneiden, z. B. die Navigationsleiste oder die Statusleiste. „Überschneiden“ kann bedeuten, dass die Anzeige über den Inhalten eingeblendet wird, aber auch, dass Ihre App über Systemgesten informiert wird.

Für die Vollansicht Ihrer App stehen folgende Arten von Einblendungen zur Verfügung:

• Systemleisten-Einzüge:Am besten geeignet für Ansichten, die angetippt werden können und nicht von den Systemleisten verdeckt werden dürfen.

• Bereiche mit Displayaussparungen:Für Bereiche, in denen aufgrund der Form des Geräts eine Displayaussparung vorhanden sein kann.

• System-Gestenbereiche:Bereiche für die Gestennavigation, die vom System verwendet werden und Vorrang vor Ihrer App haben.

Einzüge der Systemleisten

Systemleisten-Einzüge sind die am häufigsten verwendete Art von Einzügen. 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 auszuweiten, die anklickbar sind und nicht von den Systemleisten verdeckt werden dürfen.

In Abbildung 3 wird beispielsweise der Floating-Action-Button (FAB) teilweise von der Navigationsleiste verdeckt:

Abbildung 3. Navigationsleiste, die sich in einem Vollbild-Layout über eine FAB überschneidet

Um diese Art von visueller Überschneidung im Modus für Touch-Gesten oder im Modus für Schaltflächen zu vermeiden, können Sie die Ränder des Ansichtsbereichs mit WindowInsetsCompat.Type.systemBars() und getInsets(int) vergrößern.

Im folgenden Codebeispiel wird gezeigt, wie Sie Einzüge für die Systemleiste implementieren:

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, gibt es im Schaltflächenmodus keine visuelle Überschneidung, wie in Abbildung 4 dargestellt:

Abbildung 4: Visuelle Überschneidungen im Schaltflächenmodus wurden behoben.

Das Gleiche gilt für den Modus für die Gestennavigation, wie in Abbildung 5 dargestellt:

Abbildung 5: Visuelle Überschneidungen im Modus „Bedienung über Gesten“ wurden behoben.

Einzüge für Displayaussparungen

Einige Geräte haben Displayausschnitte. Normalerweise befindet sich die Aussparung oben auf dem Display und ist in der Statusleiste enthalten. Wenn sich das Display des Geräts im Querformat befindet, befindet sich die Aussparung möglicherweise am vertikalen Rand. Je nach Inhalt, der in Ihrer App auf dem Display angezeigt wird, sollten Sie einen Abstand implementieren, um Displayausschnitte zu vermeiden. Standardmäßig werden Apps nämlich in den Displayausschnitt gezeichnet.

Viele App-Bildschirme enthalten beispielsweise eine Liste von Elementen. Listenelemente dürfen nicht durch den Displayausschnitt oder die Systemleisten verdeckt werden.

Kotlin

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
}

Java

ViewCompat.setOnApplyWindowInsetsListener(mBinding.recyclerView, (v, insets) -> {
  Insets 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, indem Sie die logische ODER-Bedingung der Systemleisten und der Displayausschnitttypen anwenden.

Legen Sie clipToPadding auf RecyclerView fest, damit das Padding mit den Listenelementen scrollt. So können die Elemente beim Scrollen des Nutzers hinter den Systemleisten verschwinden, 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" />

Einzüge für System-Gesten

System-Gestenbereiche stellen die Bereiche des Fensters dar, in denen System-Gesten Vorrang vor Ihrer App haben. Diese Bereiche sind in Abbildung 6 orange dargestellt:

Abbildung 6: Einzüge für System-Gesten

Wie bei den Einzügen der Systemleiste können Sie auch die Einzüge für System-Touch-Gesten mit WindowInsetsCompat.Type.systemGestures() überschneiden.getInsets(int)

Mit diesen Einzügen können Sie wischbare Ansichten von den Rändern weg verschieben oder anpassen. Zu den häufigsten Anwendungsfällen gehören Unterseiten, Wischen in Spielen und Karussells, die mit ViewPager2 implementiert wurden.

Unter Android 10 oder höher enthalten die Einzüge für Systemgesten einen unteren Einzug für die Start-Geste und einen linken und rechten Einzug für die Zurück-Gesten:

Abbildung 7: Maße für den Einzug von System-Gesten

Im folgenden Codebeispiel wird gezeigt, wie Sie Einzüge für Systemgesten 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;
});

Materialkomponenten

Viele ansichtenbasierte Android-Materialkomponenten (com.google.android.material){:.external} verarbeiten Einzüge automatisch, darunter BottomAppBar, BottomNavigationView, NavigationRailView und NavigationView.

AppBarLayout verarbeitet jedoch nicht automatisch Einzüge. Fügen Sie android:fitsSystemWindows="true" hinzu, um Einzüge oben zu verarbeiten.

Weitere Informationen zum Umgang mit Einzügen mit Material Components in Compose

Immersiver Modus

Einige Inhalte werden am besten im Vollbildmodus wiedergegeben, um den Nutzern ein immersiveres Erlebnis zu bieten. Sie können die Systemleisten im Vollbildmodus mit den 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 für den immersiven Modus ausblenden.

Schutz der Systemleiste

Sobald Ihre App auf SDK 35 oder höher ausgerichtet ist, wird Edge-to-Edge erzwungen. Die Systemstatusleiste und die Navigationsleisten für Gesten sind transparent, die Navigationsleiste mit drei Schaltflächen ist jedoch durchscheinend.

Wenn Sie den standardmäßigen halbtransparenten Hintergrundschutz für die Navigation mit drei Schaltflächen entfernen möchten, setzen Sie Window.setNavigationBarContrastEnforced auf false.

Weitere Informationen

Weitere Informationen zu WindowInsets, Gestennavigation und Einblendungen finden Sie in den folgenden Referenzen:

• Android-Systemleisten
• Tipps zur Verarbeitung von Rändern für die Vollbildansicht in Android 15
• WindowInsets – Listener für Layouts
• Bedienung über Gesten: Einzüge
• Wie funktionieren Einleger auf Android-Geräten?