À propos de la protection de la barre système

Une fois que votre application cible le SDK 35 ou une version ultérieure, l'affichage de bord à bord est appliqué. La barre d'état du système et les barres de navigation par gestes sont transparentes, mais la barre de navigation à trois boutons est translucide. Appelez enableEdgeToEdge pour assurer la rétrocompatibilité.

Toutefois, les paramètres système par défaut peuvent ne pas fonctionner pour tous les cas d'utilisation. Consultez les consignes de conception des barres système Android et les consignes de conception de l'affichage sans bordure pour savoir quand envisager d'utiliser des barres système transparentes ou translucides.

Créer des barres système transparentes

Créez une barre de navigation par gestes transparente en ciblant Android 15 ou version ultérieure, ou en appelant enableEdgeToEdge() avec les arguments par défaut pour les versions antérieures. Pour la barre de navigation à trois boutons, définissez Window.setNavigationBarContrastEnforced sur false. Sinon, un scrim translucide sera appliqué.

Créer des barres système translucides

Pour créer une barre d'état translucide, créez un composable personnalisé qui chevauche le contenu principal et dessine un dégradé dans la zone couverte par les encarts.

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

Figure 1. Une barre d'état translucide.

Pour les applications adaptatives, insérez un composable personnalisé qui correspond aux couleurs de chaque volet, comme indiqué dans la section Conception bord à bord. Pour créer une barre de navigation translucide, définissez Window.setNavigationBarContrastEnforced sur "true".