Schutz der Systemleiste

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

Die Standardeinstellungen des Systems sind jedoch möglicherweise nicht für alle Anwendungsfälle geeignet. In den Designrichtlinien für Android-Systemleisten und den Designrichtlinien für randlose Inhalte finden Sie eine Übersicht darüber, wann transparente oder halbtransparente Systemleisten in Betracht gezogen werden sollten.

Transparente Systemleisten erstellen

Erstelle eine transparente Navigationsleiste für die Bedienung über Gesten, indem du Android 15 oder höher als Ziel festlegst oder enableEdgeToEdge() mit Standardargumenten für frühere Versionen aufrufst. Für die Navigationsleiste mit drei Schaltflächen legen Sie Window.setNavigationBarContrastEnforced auf false fest. Andernfalls wird ein durchscheinender Scrim angewendet.

Durchscheinende Systemleisten erstellen

Wenn du eine transparente Statusleiste erstellen möchtest, erstelle eine benutzerdefinierte zusammensetzbare Funktion, die den Hauptinhalt überlappt und einen Farbverlauf in dem Bereich zeichnet, der von den Insets abgedeckt wird.

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

Abbildung 1. Eine halbtransparente Statusleiste.

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