Mostra contenuti all'avanguardia nell'app

Prova il metodo Scrivi
Jetpack Compose è il toolkit consigliato per la UI per Android. Scopri come lavorare con edge-to-edge in Compose.
Edge-to-edge in Compose → .

Dopo aver scelto come target l'SDK 35 o versioni successive su un dispositivo con Android 15 o versioni successive, la visualizzazione dell'app è edge-to-edge. La finestra si estende per tutta la larghezza e l'altezza del display disegnando dietro le barre di sistema. Le barre di sistema includono lo stato barra dei sottotitoli, barra dei sottotitoli e barra di navigazione.

Molte app hanno una barra delle app in alto. La barra superiore dell'app dovrebbe estendersi fino al bordo superiore di sullo schermo e dietro la barra di stato. Se vuoi, la barra delle app in alto può si riduce all'altezza della barra di stato quando i contenuti scorrono.

Molte app hanno anche una barra delle app o una barra di navigazione in basso. Queste barre devono si estende anche fino al bordo inferiore dello schermo e si trova dietro la barra di navigazione . In caso contrario, le app dovrebbero mostrare contenuti che scorrono dietro la barra di navigazione.

Figura 1. Barre di sistema in un layout edge-to-edge.

Quando implementi un layout edge-to-edge nella tua app, mantieni quanto segue mente:

  1. Attiva un display edge-to-edge
  2. Gestisci eventuali sovrapposizioni visive.
  3. Prova a mostrare dei segni dietro le barre del sistema.
di Gemini Advanced.
Esempio di immagini dietro la barra di stato
Figura 2. Esempio di immagini dietro sulla barra di stato.
di Gemini Advanced.
.

Attiva la visualizzazione edge-to-edge

Se la tua app ha come target SDK 35 o versioni successive, il protocollo edge-to-edge viene abilitato automaticamente Dispositivi Android 15 o versioni successive.

Per attivare la modalità edge-to-edge nelle versioni precedenti di Android:

  1. Aggiungi una dipendenza androidx.activity in build.gradle file dell'app o del modulo:

    Kotlin

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

    Alla moda

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

  2. Importa il enableEdgeToEdge nella tua app:

Abilita manualmente edge-to-edge chiamando enableEdgeToEdge in onCreate delle Activity. Dovrebbe essere chiamata prima delle ore setContentView.

Kotlin

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

Java

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

Per impostazione predefinita, enableEdgeToEdge() rende le barre di sistema trasparenti, ad eccezione delle Modalità di navigazione con tre pulsanti in cui la barra di stato presenta una tela trasparente. La i colori delle icone di sistema e della cornice vengono regolati in base al sistema tema chiaro o scuro.

La funzione enableEdgeToEdge() dichiara automaticamente che l'app dovrebbe essere distende lo schermo da un bordo all'altro e regola i colori delle barre di sistema.

Per attivare la visualizzazione edge-to-edge nella tua app senza utilizzare il Funzione enableEdgeToEdge(), vedi Configura manualmente il display edge-to-edge.

Gestire le sovrapposizioni utilizzando i riquadri

Alcune visualizzazioni dell'app potrebbero essere nascoste dietro le barre di sistema, come mostrato nella figura 3.

Puoi risolvere le sovrapposizioni reagendo ai riquadri, che specificano le parti la schermata si interseca con l'interfaccia utente di sistema, come la barra di navigazione o lo stato . L'intersezione dei contenuti può comportare la visualizzazione sopra i contenuti, ma può anche fornire informazioni la tua app sui gesti di sistema.

I tipi di riquadri applicabili alla visualizzazione edge-to-edge dell'app sono:

  • Inserti delle barre di sistema:opzione migliore per le viste che possono essere toccate e che non devono essere oscurati visivamente dalle barre di sistema.

  • Visualizza riquadri di ritagli: per le aree in cui potrebbe essere presente un ritaglio schermo a causa della forma del dispositivo.

  • Inserti di gesti di sistema: per le aree di navigazione tramite gesti utilizzate dal sistema. che hanno la priorità sulla tua app.

Inserzioni delle barre di sistema

I riquadri della barra di sistema sono i tipi più utilizzati. Rappresentano in cui viene visualizzata l'interfaccia utente di sistema sull'asse Z sopra l'app. Sono le migliori per spostare o bloccare le visualizzazioni della tua app che è possibile toccare e che non devono essere oscurate visivamente dalle barre del sistema.

Ad esempio, l'azione floating il pulsante (FAB) nella figura 3 è parzialmente oscurati dalla barra di navigazione:

esempio di implementazione edge-to-edge, ma la barra di navigazione copre il FAB
Figura 3. Barra di navigazione sovrapposta a un FAB in una il layout edge-to-edge.

Per evitare questo tipo di sovrapposizione visiva sia in modalità gesto che in modalità pulsante, puoi aumentare i margini della visualizzazione utilizzando getInsets(int) con WindowInsetsCompat.Type.systemBars().

Il seguente esempio di codice mostra come implementare i pannelli delle barre di sistema:

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;
});

Applicando questa soluzione all'esempio mostrato nella figura 3, sovrapposizione visiva in modalità pulsante, come mostrato nella figura 4:

una barra di navigazione trasparente che non copre il FAB
Figura 4. Risoluzione della sovrapposizione visiva nel pulsante .

Lo stesso vale per la modalità di navigazione tramite gesti, come mostrato nella figura 5:

edge-to-edge con navigazione tramite gesti
Figura 5. Risoluzione della sovrapposizione visiva nel gesto modalità di navigazione.

Riquadri con ritagli del display

Alcuni dispositivi hanno ritagli del display. In genere, il ritaglio si trova nella parte superiore della schermata e presente nella barra di stato. Quando lo schermo del dispositivo è in orizzontale , il ritaglio potrebbe essere sul bordo verticale. In base ai contenuti della tua app, vengono mostrati sullo schermo, devi implementare la spaziatura interna per evitare ritagli dello schermo, per impostazione predefinita, le app disegneranno nel ritaglio display.

Ad esempio, molte schermate di app mostrano un elenco di elementi. Non oscurare gli elementi dell'elenco con il ritaglio display o le barre di sistema.

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;
});

Determina il valore di WindowInsetsCompat prendendo l'or logico del barre di sistema e i tipi di ritaglio display.

Imposta clipToPadding su RecyclerView in modo che la spaziatura interna scorra con il le voci dell'elenco. In questo modo gli elementi possono andare dietro le barre di sistema quando l'utente scorre, come mostrato nell'esempio seguente.

<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" />

Inserimento di gesti di sistema

I riquadri dei gesti di sistema rappresentano le aree della finestra in cui sono presenti i gesti di sistema avranno la priorità sulla tua app. Queste aree sono mostrate in arancione nella figura 6:

Esempio di riquadri con gesti di sistema
Figura 6. Inserire i gesti di sistema.

Come nel caso dei riquadri della barra di sistema, puoi evitare di sovrapporre i riquadri dei gesti di sistema utilizzando getInsets(int) con WindowInsetsCompat.Type.systemGestures().

Utilizza questi riquadri per spostare o bloccare le viste a scorrimento allontanandole dai bordi. Uso comune di questi casi includono i fogli inferiori, lo scorrimento nei giochi e i caroselli implementati con ViewPager2

Su Android 10 o versioni successive, i riquadri dei gesti di sistema contengono un riquadro in basso per gesto Home e un riquadro sinistro e destro per i gesti Indietro:

un esempio di misurazioni del sistema con i segni dei gesti
Figura 7. Misurazioni integrate con i gesti di sistema.

L'esempio di codice che segue mostra come implementare gli insiemi di gesti di sistema:

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;
});

Componenti dei materiali

Molti componenti Material di Android basati su visualizzazioni (com.google.android.material){:.external} gestiscono automaticamente gli inserti, tra cui BottomAppBar, BottomNavigationView, NavigationRailView e NavigationView

Tuttavia, AppBarLayout non gestisce automaticamente i riquadri. Aggiungi android:fitsSystemWindows="true" per gestire inserti in alto o usare setOnApplyWindowInsetsListener.

Leggi come gestire i riquadri con Componenti di Material in Compose.

Modalità immersiva

Alcuni contenuti sono più adatti alla visualizzazione a schermo intero, offrendo all'utente un'esperienza più coinvolgente. Puoi nascondere le barre di sistema per la modalità immersiva utilizzando WindowInsetsController e WindowInsetsControllerCompat librerie:

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());

Consulta Nascondi le barre di sistema per la modalità immersiva per ulteriori informazioni sull'implementazione di questa funzionalità.

Risorse aggiuntive

Per ulteriori informazioni su WindowInsets, sulla navigazione con i gesti e sul funzionamento degli inserti, consulta i seguenti riferimenti: