Mostra contenuti all'avanguardia nell'app

Prova la modalità Scrivi

Jetpack Compose è il toolkit dell'interfaccia utente consigliato per Android. Scopri come lavorare con l'edge-to-edge in Compose.

Edge-to-edge in Compose →

Puoi rendere la tua app edge-to-edge, utilizzando l'intera larghezza e l'altezza del display, disegnando dietro le barre di sistema. Le barre di sistema sono la barra di stato e la barra di navigazione.

Per implementare un layout edge-to-edge, la tua app deve:

• Disegna dietro la barra di navigazione per creare un'esperienza utente più moderna e accattivante.
• Traccia dietro la barra di stato se è opportuno per i tuoi contenuti e il tuo layout, come nel caso di immagini a larghezza intera. Per farlo, utilizza API come AppBarLayout, che definiscono una barra delle app bloccata nella parte superiore dello schermo.

Per implementare un layout edge-to-edge nella tua app, segui questi passaggi:

1. Attiva il display edge-to-edge.
2. Gestire eventuali sovrapposizioni visive.

Attiva il display edge-to-edge.

Puoi attivare il display edge-to-edge nell'app chiamando il numero enableEdgeToEdge in onCreate del tuo Activity. Deve essere chiamato prima del giorno 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 che nella modalità di navigazione con tre pulsanti, in cui la barra di stato presenta una trama trasparente. I colori delle icone di sistema e del telaio vengono regolati in base al tema chiaro o scuro del sistema.

Il metodo enableEdgeToEdge dichiara automaticamente che l'app deve essere disposta da bordo a bordo e regola i colori delle barre di sistema. Consulta la sezione "Configurare manualmente il display edge-to-edge" se è necessario per qualsiasi motivo.

Gestire le sovrapposizioni utilizzando gli insiemi

Dopo aver attivato il display edge-to-edge, alcune delle visualizzazioni dell'app potrebbero essere visualizzate dietro le barre di sistema, come mostrato nella Figura 3.

Puoi risolvere le sovrapposizioni reagendo agli inset, che specificano quali parti della schermata si intersecano con l'UI di sistema, come la barra di navigazione o la barra di stato. L'intersezione può significare la visualizzazione sopra i contenuti, ma può anche indicare all'app i gesti di sistema.

I tipi di riquadri che si applicano alla visualizzazione da bordo a bordo dell'app sono:

• Inserti delle barre di sistema: ideali per viste toccabili e che non devono essere visivamente oscurate dalle barre di sistema.

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

Inserti barre di sistema

Gli insiemi delle barre di sistema sono quelli più utilizzati. Rappresentano l'area in cui viene visualizzata l'interfaccia utente di sistema sull'asse Z sopra l'app. Sono ideali per spostare le visualizzazioni dell'app toccabili e che non devono essere oscurate visivamente dalle barre di sistema.

Ad esempio, il pulsante di azione mobile (FAB) nella figura 3 è parzialmente oscurato 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 gli insiemi della barra 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 verifica 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:

Inset di gesti di sistema

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

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

Utilizza questi riquadri per spostare le visualizzazioni a scorrimento o allontanarle dai bordi. I casi d'uso comuni includono fogli inferiori, scorrimento nei giochi e caroselli implementati utilizzando ViewPager2.

Su Android 10 o versioni successive, i riquadri dei gesti di sistema contengono un riquadro inferiore per il gesto Home e uno verso destra e sinistra per i gesti indietro:

Il seguente esempio di codice 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

L'esperienza di alcuni contenuti è ottimale a schermo intero, in modo da offrire all'utente un'esperienza più immersiva. Puoi nascondere le barre di sistema per attivare 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 ulteriori informazioni sull'implementazione di questa funzionalità, consulta la sezione Nascondi le barre di sistema per la modalità immersiva.

Risorse aggiuntive

Consulta i seguenti riferimenti per maggiori informazioni su WindowInsets, sulla navigazione tramite gesti e sul funzionamento degli insiemi:

• WindowInsets: ascoltatori dei layout
• Navigazione tramite gesti: integrate
• Come funzionano gli inserti su Android?