Puoi impostare l'app in modalità edge-to-edge, utilizzando l'intera larghezza e 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, l'app deve:
- Traccia dietro la barra di navigazione per offrire un'esperienza utente più avvincente e moderna.
- Traccia dietro la barra di stato se è appropriato per i tuoi contenuti e il tuo layout,
come nel caso di immagini a larghezza intera. Per farlo, utilizza API come
AppBarLayout
, che definisce una barra delle app bloccata nella parte superiore dello schermo.
Per implementare un layout edge-to-edge nella tua app:
- Consente di attivare la visualizzazione edge-to-edge.
- Gestisci eventuali sovrapposizioni visive.
![Un'immagine che mostra un'app con immagini dietro la barra di stato](https://developer.android.com/static/images/guide/navigation/e2e-imagery-behind-status-bar.png?authuser=1&hl=it)
Consente di attivare la visualizzazione edge-to-edge.
Puoi attivare la visualizzazione edge-to-edge nella tua app chiamando enableEdgeToEdge
in onCreate
di 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 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.
Il metodo enableEdgeToEdge
dichiara automaticamente che l'app deve essere
disposta edge-to-edge e regola i colori delle barre di sistema. Consulta la sezione
"Configura manualmente il display edge-to-edge"
se necessario per qualsiasi motivo.
Gestire le sovrapposizioni utilizzando i riquadri
Dopo aver attivato la visualizzazione edge-to-edge, alcune viste dell'app potrebbero essere visualizzate dietro le barre di sistema, come mostrato nella figura 3.
Puoi risolvere le sovrapposizioni reagendo agli insiemi, 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.
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:
![Un'immagine che mostra l'implementazione edge-to-edge, ma la barra di navigazione copre il FAB](https://developer.android.com/static/images/guide/navigation/e2e-after-implementation.png?authuser=1&hl=it)
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:
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; });
Se applichi questa soluzione all'esempio mostrato nella figura 3, non si ottiene alcuna sovrapposizione visiva in modalità pulsante, come mostrato nella figura 4:
![Un'immagine che mostra una barra di navigazione trasparente che non copre il FAB](https://developer.android.com/static/images/guide/navigation/e2e-system-bars-top.png?authuser=1&hl=it)
Lo stesso vale per la modalità di navigazione tramite gesti, come mostrato nella figura 5:
![Un'immagine che mostra da bordo a bordo con la navigazione tramite gesti](https://developer.android.com/static/images/guide/navigation/e2e-system-bars-bottom.png?authuser=1&hl=it)
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:
![Un'immagine che mostra i riquadri dei gesti di sistema](https://developer.android.com/static/images/guide/navigation/e2e-system-gesture-insets.png?authuser=1&hl=it)
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:
![Un'immagine che mostra le misurazioni effettuate con i gesti di sistema](https://developer.android.com/static/images/guide/navigation/e2e-system-gesture-insets-measurements.png?authuser=1&hl=it)
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; });
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
:
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());
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?