Sistem çubuğu koruması

Uygulamanız SDK 35 veya sonraki sürümleri hedeflediğinde uçtan uca görüntüleme zorunlu kılınacaktır. Sistem durum çubuğu ve hareketle gezinme çubukları şeffaftır ancak üç düğmeli gezinme çubuğu yarı saydamdır. Bu işlemi geriye dönük uyumlu hale getirmek için enableEdgeToEdge numaralı telefonu arayın.

Ancak sistem varsayılanları tüm kullanım alanları için uygun olmayabilir. Şeffaf veya yarı saydam sistem çubuklarının ne zaman kullanılacağına dair genel bilgi için Android sistem çubukları tasarım kılavuzu ve kenardan kenara tasarım kılavuzu başlıklı makalelere göz atın.

Şeffaf sistem çubukları oluşturma

Android 15 veya sonraki sürümleri hedefleyerek veya önceki sürümler için varsayılan bağımsız değişkenlerle enableEdgeToEdge() çağrılayarak şeffaf bir hareketle gezinme çubuğu oluşturun. Üç düğmeli gezinme çubuğu için Window.setNavigationBarContrastEnforced değerini false olarak ayarlayın. Aksi takdirde yarı saydam bir ekran uygulanır.

Saydam sistem çubukları oluşturma

Saydam bir durum çubuğu oluşturmak için ana içerikle örtüşen ve içe yerleştirilen öğelerin kapladığı alanda degrade çizen özel bir kompozisyon oluşturun.

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

Şekil 1. Saydam bir durum çubuğu.

Uyarlanabilir uygulamalar için Kenardan kenara tasarım bölümünde gösterildiği gibi her bölmenin renkleriyle eşleşen özel bir kompozisyon ekleyin. Saydam bir gezinme çubuğu oluşturmak için Window.setNavigationBarContrastEnforced değerini true olarak ayarlayın.