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 modo de borde a borde. 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 la configuración predeterminada del sistema no funcione 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 el uso de barras del sistema transparentes o traslúcidas.

Cómo crear barras del sistema transparentes

Crea una barra de navegación por gestos transparente llamando a enableEdgeToEdge() con argumentos predeterminados para versiones anteriores o segmentando Android 15 o versiones posteriores. En el caso de la barra de navegación con 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 traslúcida, crea un elemento componible personalizado que se superponga al contenido principal y dibuje un gradiente en el área cubierta por 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,
    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 traslúcida.

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

Anterior
Usa inserciones en Views y Compose
Siguiente
Información acerca de los cortes