Proteção da barra do sistema

Quando o app é direcionado ao SDK 35 ou mais recente, o preenchimento de tela é aplicado. A barra de status do sistema e as barras de navegação por gestos são transparentes, mas a barra de navegação com três botões é translúcida. Chame enableEdgeToEdge para tornar essa compatibilidade compatível com versões anteriores.

No entanto, os padrões do sistema podem não funcionar para todos os casos de uso. Consulte as orientações de design de barras do sistema Android e as orientações de design de tela cheia para ter uma visão geral de quando considerar barras do sistema transparentes ou translúcidas.

Criar barras de sistema transparentes

Crie uma barra de navegação por gestos transparente segmentando o Android 15 ou versões mais recentes ou chamando enableEdgeToEdge() com argumentos padrão para versões anteriores. Para a barra de navegação com três botões, defina Window.setNavigationBarContrastEnforced como false. Caso contrário, uma tela translúcida será aplicada.

Criar barras de sistema translúcidas

Para criar uma barra de status translúcida, crie um elemento combinável personalizado que se sobreponha ao conteúdo principal e desenhe um gradiente na área coberta por insetos.

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. Uma barra de status translúcida.

Para apps adaptáveis, insira um elemento combinável personalizado que corresponda às cores de cada painel, como mostrado no design de uma borda à outra. Para criar uma barra de navegação translúcida, defina Window.setNavigationBarContrastEnforced como verdadeiro.