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, l'app viene visualizzata in modo 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 la barra di stato, la barra dei sottotitoli e la barra di navigazione.

Molte app hanno una barra delle app in alto. La barra superiore delle app dovrebbe estendersi fino al bordo superiore dello schermo ed essere visualizzata dietro la barra di stato. Facoltativamente, la barra delle app in alto può essere ridotta fino 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 anche estendersi fino al bordo inferiore dello schermo ed essere visualizzate dietro la barra di navigazione. In caso contrario, le app dovrebbero mostrare contenuti che scorrono dietro la barra di navigazione.

Quando implementi un layout edge-to-edge nella tua app, tieni presente quanto segue:

1. Attiva un display edge-to-edge
2. Gestisci eventuali sovrapposizioni visive.
3. Prova a mostrare dei segni dietro le barre del sistema.

Attiva display edge-to-edge

Se la tua app ha come target SDK 35 o versioni successive, l'edge-to-edge viene abilitato automaticamente per i dispositivi Android 15 o versioni successive.

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

1. Aggiungi una dipendenza alla libreria androidx.activity nel file build.gradle 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 la funzione di estensione enableEdgeToEdge nella tua app:

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

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

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

Per impostazione predefinita, enableEdgeToEdge() rende trasparenti le barre di sistema, tranne nella modalità di navigazione con tre pulsanti in cui la barra di stato ha una striscia trasparente. I colori delle icone di sistema e della cornice vengono regolati in base al tema chiaro o scuro del sistema.

La funzione enableEdgeToEdge() dichiara automaticamente che l'app deve essere disposta edge-to-edge e regola i colori delle barre di sistema.

Per attivare la visualizzazione edge-to-edge nella tua app senza utilizzare la funzione enableEdgeToEdge(), consulta Configurare manualmente il display edge-to-edge.

Gestire le sovrapposizioni utilizzando i riquadri

Alcune delle visualizzazioni dell'app potrebbero essere tracciate dietro le barre di sistema, come mostrato nella Figura 3.

Puoi risolvere le sovrapposizioni reagendo ai riquadri, che specificano quali parti dello schermo si intersecano con l'UI di sistema, come la barra di navigazione o la barra di stato. L'intersezione dei contenuti può comportare la visualizzazione sopra i contenuti, ma può anche indicare alla tua app i gesti di sistema.

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

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

• Visualizza riquadri di ritagli: per le aree in cui potrebbe esserci un ritaglio dello 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.

Inserti delle barre di sistema

I riquadri della barra di sistema sono i tipi più utilizzati. Rappresentano l'area in cui viene visualizzata l'interfaccia utente di sistema nell'asse Z sopra la tua app. Sono ideali per spostare o bloccare le visualizzazioni dell'app che possono essere toccate e che non devono essere oscurate visivamente dalle barre di sistema.

Ad esempio, il pulsante di azione mobile (FAB) nella figura 3 è parzialmente nascosto dalla barra di navigazione:

Per evitare questo tipo di sovrapposizione visiva in modalità gesto o 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:

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

Se applichi questa soluzione all'esempio mostrato nella figura 3, non si ottiene alcuna sovrapposizione visiva in modalità pulsante, come mostrato nella figura 4:

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

Riquadri con ritagli del display

Alcuni dispositivi hanno ritagli del display. In genere, il ritaglio si trova nella parte superiore dello schermo e nella barra di stato. Quando lo schermo del dispositivo è in modalità orizzontale, il ritaglio potrebbe essere sul bordo verticale. A seconda dei contenuti mostrati dall'app sullo schermo, devi implementare la spaziatura interna per evitare ritagli dello schermo. Per impostazione predefinita, le app disegneranno il 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.

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

Determina il valore di WindowInsetsCompat prendendo il valore logico o delle barre di sistema e i tipi di ritaglio display.

Imposta clipToPadding su RecyclerView in modo che la spaziatura interna scorra con gli elementi 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 i gesti di sistema hanno la priorità sull'app. Queste aree sono mostrate in arancione nella Figura 6:

Come per i 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. I casi d'uso comuni includono i fogli di fondo, lo scorrimento nei giochi e i caroselli implementati utilizzando ViewPager2.

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

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

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

Modalità immersiva

Per alcuni contenuti è preferibile optare per la modalità a schermo intero, in modo da offrire all'utente un'esperienza più coinvolgente. Puoi nascondere le barre di sistema per la modalità immersiva utilizzando le librerie WindowInsetsController e WindowInsetsControllerCompat:

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

Per maggiori informazioni sull'implementazione di questa funzionalità, consulta Nascondi le barre di sistema per la modalità immersiva.

Risorse aggiuntive

Consulta i seguenti riferimenti per ulteriori informazioni su WindowInsets, la navigazione tramite gesti e il funzionamento dei riquadri:

• WindowInsets: listener di layout
• Navigazione tramite gesti: riquadri
• Come funzionano i riquadri su Android?