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) } }
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.