Perlindungan kolom sistem

Setelah aplikasi Anda menargetkan SDK 35 atau yang lebih baru, edge-to-edge akan diterapkan. Status bar sistem dan menu navigasi gestur transparan, tetapi menu navigasi tiga tombol transparan. Panggil enableEdgeToEdge untuk membuatnya kompatibel dengan versi sebelumnya.

Namun, setelan default sistem mungkin tidak berfungsi untuk semua kasus penggunaan. Lihat panduan desain panel sistem Android dan panduan desain dari tepi ke tepi untuk mengetahui ringkasan kapan harus mempertimbangkan untuk memiliki panel sistem transparan atau buram.

Membuat kolom sistem transparan

Buat menu navigasi gestur transparan dengan menargetkan Android 15 atau yang lebih baru atau dengan memanggil enableEdgeToEdge() dengan argumen default untuk versi sebelumnya. Untuk menu navigasi tiga tombol, tetapkan Window.setNavigationBarContrastEnforced ke false. Jika tidak, scrim transparan akan diterapkan.

Membuat kolom sistem yang buram

Untuk membuat status bar transparan, buat composable kustom yang tumpang-tindih dengan konten utama dan menggambar gradien di area yang tercakup oleh inset.

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

Gambar 1. Status bar transparan.

Untuk aplikasi adaptif, masukkan composable kustom yang cocok dengan warna setiap panel, seperti yang terlihat di Desain layar penuh. Untuk membuat menu navigasi transparan, tetapkan Window.setNavigationBarContrastEnforced ke true.