Información acerca de la 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 pantalla completa para obtener una descripción general de cuándo considerar tener barras del sistema transparentes o traslúcidas.

Cómo crear barras del sistema transparentes

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

Cómo crear barras del sistema traslúcidas

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

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

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