Inhalte in Ansichten randlos anzeigen

Compose ausprobieren

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

Vollbildmodus in „Compose“ →

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 Displayrand erstrecken und hinter der Statusleiste angezeigt werden. Optional kann die obere App-Leiste beim Scrollen auf die Höhe der Statusleiste schrumpfen.

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.

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.

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.

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

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

Standardmäßig werden die Systemleisten von enableEdgeToEdge() transparent gemacht, 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 angelegt werden soll, und passt die Farben der Systemleisten an.

Informationen zum Aktivieren des randlosen Displays in Ihrer App ohne die Funktion enableEdgeToEdge() finden Sie unter Randloses Display 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 angezeigt wird, aber auch, dass Ihre App über Systemgesten informiert wird.

Für die randlose Darstellung 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 von 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 zu vergrößern, 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:

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:

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

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

Einzüge für Displayaussparungen

Einige Geräte haben Ausschnitte im Display. 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.

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) -> {
  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:

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:

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

Materialkomponenten

Viele ansichtenbasierte Android-Materialkomponenten (com.google.android.material) 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

Abwärtskompatible Auslieferung von Zusatzinformationen

Wenn Sie verhindern möchten, dass Einzüge an untergeordnete Ansichten gesendet werden, und zu viel Abstand vermeiden möchten, können Sie Einzüge mit der Konstante WindowInsetsCompat.CONSUMED verwenden. Auf Geräten mit Android 10 (API-Level 29 und niedriger) werden Einzüge jedoch nach dem Aufruf von WindowInsetsCompat.CONSUMED nicht an Geschwister gesendet. Das kann zu unbeabsichtigten visuellen Überschneidungen führen.

Wenn Sie prüfen möchten, ob Insets für alle unterstützten Android-Versionen an Geschwister gesendet werden, verwenden Sie ViewGroupCompat#installCompatInsetsDispatch, bevor Sie Insets verwenden. Diese Funktion ist in AndroidX Core und Core-ktx 1.16.0-alpha01 und höher verfügbar.

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
val rootView = findViewById(R.id.main)
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView)

// Use the i.d. assigned to your layout's root view, e.g. R.id.main
LinearLayout rootView = findViewById(R.id.main);
// Call before consuming insets
ViewGroupCompat.installCompatInsetsDispatch(rootView);

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:

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 für den immersiven Modus ausblenden.

Symbole in der Systemleiste

Wenn Sie enableEdgeToEdge aufrufen, werden die Farben der Symbole in der Systemleiste aktualisiert, wenn sich das Gerätedesign ändert.

Wenn Sie die volle Displayfläche nutzen, müssen Sie die Farben der Symbole in der Systemleiste möglicherweise manuell aktualisieren, damit sie einen Kontrast zum Hintergrund Ihrer App bilden. So erstellen Sie beispielsweise helle Symbole für die Statusleiste:

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

WindowCompat.getInsetsController(window, window.getDecorView())
    .setAppearanceLightStatusBars(false);

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. Rufen Sie enableEdgeToEdge auf, um die Abwärtskompatibilität zu gewährleisten.

Die Systemstandardeinstellungen funktionieren jedoch möglicherweise nicht für alle Anwendungsfälle. Lesen Sie die Designrichtlinien für Android-Systemleisten und den Artikel Edge-to-Edge-Design, um zu entscheiden, ob Sie transparente oder halbtransparente Systemleisten verwenden möchten.

Transparente Systemleisten erstellen

Wenn Sie einen transparenten Status-Balken erstellen möchten, richten Sie Ihr Targeting auf Android 15 (SDK 35) oder höher aus oder rufen Sie enableEdgeToEdge() mit Standardargumenten für ältere Versionen auf.

Wenn Sie eine transparente Navigationsleiste für Touch-Gesten erstellen möchten, richten Sie die Ausrichtung auf Android 15 oder höher aus oder rufen Sie enableEdgeToEdge() mit Standardargumenten für ältere Versionen auf. Legen Sie für die Navigationsleiste mit drei Schaltflächen Window.setNavigationBarContrastEnforced auf false fest, da sonst ein halbtransparenter Schleier angewendet wird.

Transluzente Systemleisten erstellen

So erstellen Sie eine halbtransparente Statusleiste:

1. Aktualisieren Sie die androidx-core-Abhängigkeit auf 1.16.0-beta01 oder höher.
2. Setze dein XML-Layout in androidx.core.view.insets.ProtectionLayout und weisen ihm eine ID zu.
3. Greifen Sie programmatisch auf die ProtectionLayout zu, um Schutzmaßnahmen festzulegen. Geben Sie dabei die Seite und ein GradientProtection für die Statusleiste an.

<androidx.core.view.insets.ProtectionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_protection"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/item_list"
        android:clipToPadding="false"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--items-->

    </ScrollView>

</androidx.core.view.insets.ProtectionLayout>
system_bar_protection.xml

val red = 52
val green = 168
val blue = 83
findViewById<ProtectionLayout>(R.id.list_protection)
    .setProtections(
        listOf(
            GradientProtection(
                WindowInsetsCompat.Side.TOP,
                // Ideally, this is the pane's background color
                // alpha = 204 for an 80% gradient
                Color.argb(204, red, green, blue)
            )
        )
    )
SystemBarProtectionSnippet.kt

Achte darauf, dass der an GradientProtection übergebene Wert für ColorInt mit dem Inhaltshintergrund übereinstimmt. Ein Listen-Detaillayout, das auf einem faltbaren Gerät angezeigt wird, kann beispielsweise unterschiedliche GradientProtections in verschiedenen Farben für den Listenbereich und den Detailbereich haben.

Verwenden Sie keine durchsichtige Navigationsleiste für Touch-Gesten. So erstellen Sie eine halbtransparente Navigationsleiste mit drei Schaltflächen:

• Wenn Ihr Layout bereits in einem ProtectionView-Element eingeschlossen ist, können Sie der setProtections-Methode ein zusätzliches ColorProtection oder GradientProtection übergeben. Prüfen Sie vorher, ob window.isNavigationBarContrastEnforced = false.
• Andernfalls setzen Sie window.isNavigationBarContrastEnforced = true. Wenn Ihre App enableEdgeToEdge, window.isNavigationBarContrastEnforced = true aufruft, ist das der Standard.

Weitere Tipps

Achten Sie darauf, dass das letzte Listenelement in RecyclerView oder NestedScrollView nicht von den Systemleisten verdeckt wird. Verwenden Sie dazu Einzüge und legen Sie clipToPadding auf false fest.

Im folgenden Video ist ein RecyclerView mit deaktiviertem (links) und aktiviertem (rechts) Display ohne Ränder zu sehen:

Ein Codebeispiel finden Sie in den Code-Snippets im Abschnitt Dynamische Listen mit RecyclerView erstellen.

Zusätzliche Ressourcen

Weitere Informationen zum Erstellen von Full-View-Anzeigen finden Sie in den folgenden Referenzen.

Blogs

• Tipps zur Verarbeitung von Rändern für die Vollbildansicht in Android 15
• WindowInsets – Listener für Layouts

Design

• Android-Systemleisten
• Edge-to-Edge-Design

Sonstige Dokumentation

• Leitfaden für die vollständige Migration zu Chrome für Android

Videos

• Die Zukunft von Android gestalten
• Bedienung über Gesten: Einzüge