Informazioni sulla protezione della barra di sistema

Una volta che la tua 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 è traslucida. 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 di Android e le linee guida per la 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 con i 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 a tre pulsanti, imposta Window.setNavigationBarContrastEnforced su false, altrimenti verrà applicato un velo traslucido.

Creare 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,
    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 adattive, inserisci un composable 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.

Indietro
Utilizzare gli inserti in Visualizzazioni e Scrivi
Avanti
Informazioni sui ritagli