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 transparan, tetapi menu navigasi tiga tombol transparan. Panggil enableEdgeToEdge untuk membuat kompatibilitas mundur ini.

Namun, setelan default sistem mungkin tidak berfungsi untuk semua kasus penggunaan. Lihat panduan desain kolom sistem Android dan panduan desain layar penuh untuk mengetahui ringkasan kapan harus mempertimbangkan kolom sistem transparan atau 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, akan ada scrim transparan yang diterapkan.

Membuat kolom sistem transparan

Untuk membuat status bar transparan, buat composable kustom yang tumpang-tindih dengan konten utama dan gambar 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,
) {
    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
                    )
                )
            )
    )
}

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 benar (true).

Sebelumnya
Menggunakan inset di View dan Compose
Berikutnya
Tentang potongan