Protección de la barra del sistema

Una vez que tu app se oriente al SDK 35 o versiones posteriores, se aplicará el diseño de pantalla completa. La barra de estado del sistema y las barras de navegación por gestos son transparentes, pero la barra de navegación con tres botones es traslúcida. Llama a enableEdgeToEdge para que sea retrocompatible.

Sin embargo, es posible que los valores predeterminados del sistema no funcionen para todos los casos de uso. Consulta la guía de diseño de barras del sistema de Android y la guía de diseño de borde a borde para obtener una descripción general de cuándo considerar tener barras del sistema transparentes o translúcidas.

Cómo crear barras del sistema transparentes

Para crear una barra de navegación de gestos transparente, segmenta tu app para Android 15 o versiones posteriores, o llama a enableEdgeToEdge() con argumentos predeterminados para versiones anteriores. Para la barra de navegación de tres botones, establece Window.setNavigationBarContrastEnforced en false. De lo contrario, se aplicará una pantalla traslúcida.

Cómo crear barras del sistema translúcidas

Para crear una barra de estado translúcida, crea un elemento componible personalizado que se superponga con el contenido principal y dibuje un gradiente en el área cubierta por los elementos intercalados.

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 de estado translúcida.

En el caso de las apps adaptables, inserta un elemento componible personalizado que coincida con los colores de cada panel, como se ve en el diseño de pantalla completa. Para crear una barra de navegación translúcida, establece Window.setNavigationBarContrastEnforced en verdadero.