Informazioni sulla protezione della barra di sistema

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

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

Crea barre di sistema trasparenti

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

Crea barre di sistema traslucide

Per creare una barra di stato traslucida, crea un composable personalizzato che si sovrappone ai contenuti principali e disegna un gradiente 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 composable personalizzato che corrisponda ai colori di ogni riquadro, come mostrato in Design edge-to-edge. Per creare una barra di navigazione traslucida, imposta Window.setNavigationBarContrastEnforced su true.