Configura la visualizzazione edge-to-edge

Il display edge-to-edge consente all'app di disegnare la propria UI dietro le barre di sistema, ovvero la barra di stato, la barra dei sottotitoli codificati e la barra di navigazione, per offrire un'esperienza utente più coinvolgente. Se scegli come target dispositivi con Android 15 (livello API 35) o versioni successive, la modalità edge-to-edge viene applicata per impostazione predefinita.

Per visualizzare correttamente i contenuti edge-to-edge su tutte le versioni di Android, segui questi passaggi di configurazione. Senza questi passaggi, l'app potrebbe disegnare colori pieni dietro le barre di sistema o non animare i suoi contenuti in modo sincrono con le transizioni della tastiera sullo schermo (IME).

1. Attiva la visualizzazione edge-to-edge

Per attivare la visualizzazione da bordo a bordo nelle versioni precedenti di Android, chiama enableEdgeToEdge() nel tuo metodo Activity.onCreate():

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

Per impostazione predefinita, enableEdgeToEdge() rende trasparenti le barre di sistema, tranne nella modalità di navigazione con tre pulsanti, in cui applica una patina traslucida alla barra di navigazione per un contrasto migliore. Il colore delle icone di sistema e del velo si adatta al tema chiaro o scuro del sistema.

2. Configura windowSoftInputMode

Imposta android:windowSoftInputMode="adjustResize" nella voce AndroidManifest.xml della tua attività. Questa impostazione consente all'app di ricevere inserti IME, consentendoti di regolare il layout con il padding quando la tastiera sullo schermo viene visualizzata o scompare.

<!-- In your AndroidManifest.xml file: -->
<activity
  android:name=".ui.MainActivity"
  android:label="@string/app_name"
  android:windowSoftInputMode="adjustResize"
  android:theme="@style/Theme.MyApplication"
  android:exported="true">
  ...
</activity>

3. Gestire le sovrapposizioni utilizzando gli inset

Una volta attivata la modalità edge-to-edge, alcuni contenuti e alcuni elementi dell'interfaccia utente della tua app potrebbero essere visualizzati dietro le barre di sistema. Per evitare che elementi critici o interattivi vengano oscurati dalle barre di sistema o si sovrappongano ai gesti di sistema, devi gestire gli inset.

Gli inset descrivono le parti dello schermo che si intersecano con la UI di sistema o con le gesture di sistema. I principali tipi di rientri da considerare per la visualizzazione edge-to-edge sono:

• Inset delle barre di sistema:rappresentano le aree in cui vengono visualizzate le barre di sistema. Utilizza questi valori per evitare che la UI venga oscurata dalle barre di sistema.
• Ritaglio display: rappresentano le aree in cui è presente un ritaglio fisico (ad esempio una tacca per la fotocamera) sullo schermo del dispositivo.

In Compose, puoi gestire gli inset utilizzando righelli, modificatori di spaziatura interna o modificatori delle dimensioni degli inset. Per indicazioni dettagliate, consulta la sezione Informazioni sugli insetti della finestra.

Argomenti avanzati

Per casi d'uso edge-to-edge più avanzati, considera quanto segue.

Modalità immersiva

Alcuni contenuti, come video o mappe, traggono vantaggio da un'esperienza completamente immersiva in cui le barre di sistema sono nascoste. Puoi nascondere le barre di sistema utilizzando WindowInsetsControllerCompat:

val windowInsetsController =
    WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())

// Show the system bars.
windowInsetsController.show(WindowInsetsCompat.Type.systemBars()) For example, use either `Scaffold`,

Colori e icone della barra di sistema

Quando si passa da un bordo all'altro, lo sfondo dell'app potrebbe essere visibile dietro le barre di sistema, quindi potresti dover regolare i colori delle icone delle barre di sistema per un contrasto migliore.

Per modificare le icone della barra di stato in chiaro o scuro, utilizza WindowInsetsControllerCompat:

// Set status bar icons to dark
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = true

// Set status bar icons to light
WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

Protezione della barra di sistema

Anche se enableEdgeToEdge() fornisce barre di sistema trasparenti o traslucide predefinite, potresti doverle personalizzare. Consulta le linee guida per la progettazione delle barre di sistema Android e le linee guida per la progettazione edge-to-edge per decidere quando utilizzare barre trasparenti anziché traslucide.

Per rendere la barra di navigazione con tre pulsanti completamente trasparente anziché traslucida, puoi disattivare l'applicazione del contrasto:

window.isNavigationBarContrastEnforced = false

Per ulteriori informazioni, vedi Informazioni sulla protezione della barra di sistema.

Finestre di dialogo

Per visualizzare le finestre di dialogo a schermo intero da bordo a bordo, chiama WindowCompat.enableEdgeToEdge nel metodo onStart() della finestra di dialogo:

class MyAlertDialogFragment : DialogFragment() {
    override fun onStart(){
        super.onStart()
        dialog?.window?.let { WindowCompat.enableEdgeToEdge(it) }
    }
    ...
}