Tentang perlindungan kolom sistem

Setelah aplikasi Anda menargetkan SDK 35 atau yang lebih baru, tampilan layar penuh akan diterapkan. Status bar sistem dan menu navigasi gestur bersifat transparan, tetapi menu navigasi tiga tombol bersifat tembus cahaya. Panggil enableEdgeToEdge agar kompatibel dengan versi lama.

Namun, setelan default sistem mungkin tidak berfungsi untuk semua kasus penggunaan. Lihat panduan desain kolom sistem Android dan panduan desain tampilan layar penuh untuk ringkasan kapan harus mempertimbangkan penggunaan kolom sistem transparan atau semi-transparan.

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 transparan

Untuk membuat status bar transparan, buat composable kustom yang tumpang-tindih dengan konten utama dan menggambar gradien di area yang dicakup 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,
) {
    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
                    )
                )
            )
    )
}
SystemBarProtectionSnippets.kt

Gambar 1. Status bar transparan.

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