Box di Jetpack Compose: apa itu, properti composable dan cara kerjanya

Apa itu Box di Jetpack Compose

Box — adalah fungsi composable yang menempatkan elemen anak dalam satu area, menumpuknya satu sama lain. Elemen anak pertama digambar di bagian bawah, yang terakhir — di atas. Secara default, Box menyesuaikan dengan ukuran elemen anak terbesar.

Berbeda dengan Row dan Column, Box tidak menyusun elemen secara berurutan — semua elemen anak menempati area yang sama dan dapat saling tumpang tindih. Ini membuat Box sangat diperlukan untuk komposisi lapisan antarmuka.

Ukuran Box ditentukan oleh aturan: jika tidak ada elemen anak yang memiliki ukuran tetap, Box mengecil ke ukuran minimum. Jika setidaknya satu elemen anak memiliki Modifier.fillMaxSize, Box meluas ke ukuran maksimum.

Menurut Android Developers Blog, 2024, Box adalah kontainer paling efisien di Compose untuk kasus di mana elemen tidak memerlukan penataan berurutan. Box tidak melakukan pengukuran tambahan untuk penentuan posisi, tidak seperti Row dan Column.

Tanda tangan dasar Box

Box menerima parameter modifier, contentAlignment dan propagateMinConstraints. Semua elemen anak diteruskan dalam blok content, di mana masing-masing dapat memiliki modifier sendiri.

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier.size(200.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.fillMaxSize().background(Color.Blue)
        )
        Text(
            text = "Halo",
            color = Color.White
        )
    }
}

ContentAlignment dan Modifier.align di Box

contentAlignment — adalah parameter Box yang mengatur perataan default untuk semua elemen anak. Jika tidak ditentukan, Alignment.TopStart digunakan — elemen ditempatkan di sudut kiri atas kontainer.

Modifier.align memungkinkan mengubah perataan untuk elemen anak tertentu secara independen dari contentAlignment. Misalnya, Box dengan Alignment.Center dapat berisi elemen dengan Modifier.align(Alignment.BottomEnd) yang akan ditempatkan di sudut kanan bawah.

Menurut Material Design Guidelines, 2025, Modifier.align berguna untuk memposisikan lencana dan ikon di atas gambar latar. Ini memungkinkan pengaturan perataan umum untuk seluruh konten Box dan menimpanya untuk elemen individual.

Tabel nilai Alignment

Contoh dengan Modifier.align

Dalam contoh ini Box berisi gambar latar dan lencana di sudut kanan bawah. Modifier.align(BottomEnd) memposisikan lencana secara independen dari contentAlignment seluruh Box.

@Composable
fun BadgeExample() {
    Box(
        modifier = Modifier.size(120.dp),
        contentAlignment = Alignment.Center
    ) {
        Box(
            modifier = Modifier.size(100.dp).background(Color.Gray)
        )
        Box(
            modifier = Modifier
                .size(30.dp)
                .align(Alignment.BottomEnd)
                .background(Color.Red, CircleShape)
        )
    }
}

Mengelola lapisan dengan zIndex

Modifier.zIndex mengelola urutan gambar elemen di dalam Box. Secara default, elemen digambar sesuai urutan deklarasi — elemen pertama di bawah, terakhir di atas. zIndex mengubah urutan ini.

Elemen dengan zIndex 2.0f digambar di atas elemen dengan zIndex 1.0f, terlepas dari urutan mereka dalam kode. Nilai zIndex negatif menempatkan elemen lebih rendah dari yang lain. Menurut Android Developers, 2024, zIndex hanya mempengaruhi urutan gambar, bukan pemrosesan peristiwa sentuhan.

zIndex sangat berguna dalam animasi dan komponen draggable, di mana elemen harus sementara naik di atas yang lain. Misalnya, saat menyeret kartu, zIndex-nya ditingkatkan agar tidak tertutup oleh elemen tetangga.

@Composable
fun ZIndexExample() {
    Box(modifier = Modifier.size(150.dp)) {
        Box(modifier = Modifier.size(80.dp)
            .align(Alignment.TopStart)
            .zIndex(2.0f)
            .background(Color.Green))
        Box(modifier = Modifier.size(100.dp)
            .align(Alignment.Center)
            .zIndex(1.0f)
            .background(Color.Blue))
    }
}

Contoh praktis penggunaan Box

Box banyak digunakan untuk menumpuk teks pada gambar. Gambar latar ditempatkan pertama, kemudian teks dengan Modifier.align untuk penentuan posisi di atas latar.

@Composable
fun ImageWithOverlay() {
    Box(modifier = Modifier.fillMaxWidth().height(200.dp)) {
        Image(
            painter = painterResource(R.drawable.photo),
            contentDescription = "Photo",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.Crop
        )
        Box(
            modifier = Modifier.fillMaxSize()
                .background(Color.Black.copy(alpha = 0.4f))
        )
        Text(
            text = "Judul",
            color = Color.White,
            modifier = Modifier.align(Alignment.BottomStart)
                .padding(16.dp)
        )
    }
}

Contoh kedua — Box untuk membuat indikator pemuatan. Box menempati seluruh area layar, dan CircularProgressIndicator dipusatkan melalui contentAlignment.

@Composable
fun LoadingOverlay() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator(
            modifier = Modifier.size(48.dp)
        )
    }
}

Batasan ukuran Box

Box secara default menyesuaikan dengan ukuran konten. Jika elemen anak memiliki ukuran berbeda, Box mengambil ukuran elemen terbesar. Jika tidak ada elemen anak, Box mengecil ke ukuran minimum.

Modifier.clipToBounds membatasi penggambaran elemen anak ke batas Box. Tanpa modifier ini, elemen anak bisa keluar dari Box. Menurut Material Design Guidelines, 2025, clipToBounds wajib saat menggunakan Modifier.scale atau Modifier.graphicsLayer di dalam Box.

propagateMinConstraints — adalah parameter Box yang meneruskan batasan ukuran minimum ke elemen anak. Jika diatur ke true, elemen anak tidak boleh lebih kecil dari ukuran minimum Box. Perilaku ini penting saat membuat kontainer kustom dengan ukuran minimum tetap.

• Box — kontainer minimum jika tidak ada ukuran yang ditentukan dan tidak ada elemen anak dengan fillMaxSize
• Modifier.clipToBounds mencegah konten keluar dari batas Box
• propagateMinConstraints meneruskan batasan minimum ke elemen anak