Información acerca de la protección de la barra del sistema

Una vez que tu app se oriente al SDK 35 o una versión posterior, se aplicará el diseño de borde a borde. Las barras de estado del sistema y de navegación por gestos son transparentes, pero la barra de navegación de 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 las 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.

Crea barras del sistema transparentes

Crea una barra de navegación por gestos transparente segmentando para Android 15 o versiones posteriores, o llamando a enableEdgeToEdge() con argumentos predeterminados para versiones anteriores. Para la barra de navegación con tres botones, establece Window.setNavigationBarContrastEnforced en false; de lo contrario, se aplicará un scrim translúcido.

Crea barras del sistema translúcidas

Para crear una barra de estado translúcida, crea un elemento componible personalizado que se superponga al contenido principal y dibuje un gradiente en el área que cubren las inserciones.

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,
) {
    Spacer(
        modifier = Modifier
            .fillMaxWidth()
            .height(
                with(LocalDensity.current) {
                    (WindowInsets.statusBars.getTop(this) * 1.2f).toDp()
                }
            )
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        color.copy(alpha = 1f),
                        color.copy(alpha = 0.8f),
                        Color.Transparent
                    )
                )
            )
    )
}
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 borde a borde. Para crear una barra de navegación translúcida, establece Window.setNavigationBarContrastEnforced como verdadero.