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 membuatnya kompatibel dengan versi lama.

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 translusen.

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 yang lebih lama. Untuk menu navigasi tiga tombol, setel Window.setNavigationBarContrastEnforced ke false. Jika tidak, layar 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 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, sisipkan composable kustom yang cocok dengan warna setiap panel, seperti yang terlihat dalam Desain layar penuh. Untuk membuat panel navigasi transparan, tetapkan Window.setNavigationBarContrastEnforced ke benar (true).

Sebelumnya
Menggunakan inset di View dan Compose
Berikutnya
Tentang potongan