Sobre a proteção da barra de sistema

Quando o app segmentar o SDK 35 ou versões mais recentes, o modo de ponta a ponta será 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 isso 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 das barras de sistema do Android e as orientações de design de ponta a ponta para ter uma visão geral de quando considerar barras de 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 máscara 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 encartes.

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 visto no design de ponta a ponta. Para criar uma barra de navegação translúcida, defina Window.setNavigationBarContrastEnforced como "true".

Anterior
Usar insets em visualizações e no Compose
Avançar
Sobre os cortes