Une fois que votre application cible le SDK 35 ou une version ultérieure, l'affichage 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 valeurs par défaut du système 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 d'une interface bord à bord pour savoir quand utiliser des barres système transparentes ou transparentes.
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 des arguments par défaut pour les versions antérieures. Pour la barre de navigation à trois boutons, définissez Window.setNavigationBarContrastEnforced
sur false
, sinon un écran transparent sera appliqué.
Créer des barres système transparentes
Pour créer une barre d'état transparente, 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, 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) } }
Pour les applications adaptatives, insérez un composable personnalisé qui correspond aux couleurs de chaque volet, comme illustré dans la conception bord à bord. Pour créer une barre de navigation transparente, définissez Window.setNavigationBarContrastEnforced
sur "true".