Informazioni sulla protezione della barra di sistema

Una volta che la tua app ha come target l'SDK 35 o versioni successive, viene applicata la modalità edge-to-edge. La barra di stato del sistema e le barre di navigazione tramite gesti sono trasparenti, ma la barra di navigazione con tre pulsanti è traslucida. Chiama enableEdgeToEdge per renderla compatibile con le versioni precedenti.

Tuttavia, le impostazioni predefinite del sistema potrebbero non funzionare per tutti i casi d'uso. Consulta le linee guida sulla progettazione delle barre di sistema di Android e le linee guida sulla progettazione edge-to-edge per una panoramica di quando prendere in considerazione l'utilizzo di barre di sistema trasparenti o traslucide.

Creare barre di sistema trasparenti

Crea una barra di navigazione tramite gesti trasparente scegliendo come target Android 15 o versioni successive oppure chiamando enableEdgeToEdge() con argomenti predefiniti per le versioni precedenti. Per la barra di navigazione con tre pulsanti, imposta Window.setNavigationBarContrastEnforced su false altrimenti verrà applicato uno scrim traslucido.

Creare barre di sistema traslucide

Per creare una barra di stato traslucida, crea un elemento componibile personalizzato che si sovrappone al contenuto principale e disegna una sfumatura nell'area coperta dagli inset.

class SystemBarProtectionSnippets : ComponentActivity() {

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

        // enableEdgeToEdge sets window.isNavigationBarContrastEnforced = true
        // which is used to add a translucent scrim to three-button navigation
        enableEdgeToEdge()

        setContent {
            MyTheme {
                // Main content
                MyContent()

                // After drawing main content, draw status bar protection
                StatusBarProtection()
            }
        }
    }
}

@Composable
private fun StatusBarProtection(
    color: Color = MaterialTheme.colorScheme.surfaceContainer,
) {
    Spacer(
        modifier = Modifier
            .fillMaxWidth()
            .height(
                with(LocalDensity.current) {
                    (WindowInsets.statusBars.getTop(this) * 1.2f).toDp()
                }
            )
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        color.copy(alpha = 1f),
                        color.copy(alpha = 0.8f),
                        Color.Transparent
                    )
                )
            )
    )
}
SystemBarProtectionSnippets.kt

Figura 1. Una barra di stato traslucida.

Per le app adattive, inserisci un elemento componibile personalizzato che corrisponda ai colori di ogni riquadro, come mostrato nella progettazione edge-to-edge. Per creare una barra di navigazione traslucida, imposta Window.setNavigationBarContrastEnforced su true.