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 e le barre di navigazione tramite gesti del sistema sono trasparenti, ma la barra di navigazione con tre pulsanti è traslucida. Chiama enableEdgeToEdge per rendere la funzionalità compatibile con le versioni precedenti.

Tuttavia, i valori predefiniti del sistema potrebbero non funzionare per tutti i casi d'uso. Consulta le linee guida per la progettazione delle barre di sistema di Android e le linee guida per la progettazione edge-to-edge per una panoramica dei casi in cui è consigliabile avere barre di sistema trasparenti o traslucide.

Creare barre di sistema trasparenti

Crea una barra di navigazione con gesti trasparente scegliendo come target Android 15 o versioni successive o chiamando enableEdgeToEdge() con gli 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 composable personalizzato che si sovrapponga ai contenuti principali e disegna un gradiente nell'area coperta dagli inserti.

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,
    heightProvider: () -> Float = calculateGradientHeight(),
) {

    Canvas(Modifier.fillMaxSize()) {
        val calculatedHeight = heightProvider()
        val gradient = Brush.verticalGradient(
            colors = listOf(
                color.copy(alpha = 1f),
                color.copy(alpha = .8f),
                Color.Transparent
            ),
            startY = 0f,
            endY = calculatedHeight
        )
        drawRect(
            brush = gradient,
            size = Size(size.width, calculatedHeight),
        )
    }
}

@Composable
fun calculateGradientHeight(): () -> Float {
    val statusBars = WindowInsets.statusBars
    val density = LocalDensity.current
    return { statusBars.getTop(density).times(1.2f) }
}
SystemBarProtectionSnippets.kt

Figura 1. Una barra di stato traslucida.

Per le app adattabili, inserisci un composable personalizzato che corrisponda ai colori di ogni riquadro, come mostrato nel design da bordo a bordo. Per creare una barra di navigazione traslucida, imposta Window.setNavigationBarContrastEnforced su true.