Schutz der Systemleiste

Sobald Ihre App auf SDK 35 oder höher ausgerichtet ist, wird Edge-to-Edge erzwungen. Die Statusleiste des Systems und die Navigationsleisten für Gesten sind transparent, die Navigationsleiste mit drei Schaltflächen ist jedoch durchscheinend. Rufen Sie enableEdgeToEdge auf, um die Abwärtskompatibilität zu gewährleisten.

Die Systemstandardeinstellungen funktionieren jedoch möglicherweise nicht für alle Anwendungsfälle. In den Designrichtlinien für Android-Systemleisten und den Designrichtlinien für randlose Displays finden Sie eine Übersicht dazu, wann Sie transparente oder halbtransparente Systemleisten verwenden sollten.

Transparente Systemleisten erstellen

Wenn Sie eine transparente Navigationsleiste für Touch-Gesten erstellen möchten, richten Sie Ihre App auf Android 15 oder höher aus oder rufen Sie enableEdgeToEdge() mit Standardargumenten für ältere Versionen auf. Legen Sie für die Navigationsleiste mit drei Schaltflächen Window.setNavigationBarContrastEnforced auf false fest, da sonst ein halbtransparenter Schleier angewendet wird.

Transluzente Systemleisten erstellen

Wenn Sie eine halbtransparente Statusleiste erstellen möchten, erstellen Sie ein benutzerdefiniertes Composeable, das den Hauptinhalt überlappt und einen Farbverlauf im Bereich der Einzüge zeichnet.

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

Abbildung 1. Eine durchsichtige Statusleiste.

Fügen Sie für adaptive Apps ein benutzerdefiniertes Composeable ein, das den Farben der einzelnen Bereiche entspricht, wie im Edge-to-Edge-Design zu sehen. Wenn Sie eine halbtransparente Navigationsleiste erstellen möchten, setzen Sie Window.setNavigationBarContrastEnforced auf „wahr“.