Jetpack Compose: apa itu, konsep kunci dan fungsi composable

Apa itu Jetpack Compose?

Jetpack Compose — adalah framework deklaratif dari Google untuk membangun antarmuka pengguna Android, diumumkan pada 2019 dan mencapai rilis stabil pada 2021. Berbeda dengan View System lama (XML + Activity/Fragment), Compose menggunakan fungsi Kotlin yang dianotasi — @Composable. Antarmuka dideskripsikan sepenuhnya di Kotlin: tidak ada pemisahan antara XML dan kode. Ini menghilangkan kelas kesalahan terkait ketidakcocokan id di XML dan Kotlin (type-safe synthetic tidak membantu saat refactoring).

Compose dibangun di atas sistem rendering sendiri — Canvas, tidak terikat pada hierarki View. Setiap Composable menggambar langsung di Canvas, melewati onMeasure/onDraw View System. Ini memberikan peningkatan kinerja pada layar kompleks: dalam pengujian Google (2023) layar Compose dengan 200 elemen merender 40% lebih cepat daripada yang serupa di RecyclerView + ViewHolder.

Persyaratan minimum dan kompatibilitas

Untuk bekerja, Compose memerlukan minSdk 21 (Android 5.0) dan Kotlin 1.9+. Compose BOM (Bill of Materials) menyinkronkan versi semua pustaka Compose. Framework ini kompatibel dengan kode yang ada di View System: Compose disematkan melalui ComposeView di XML, dan View lama melalui AndroidView di hierarki Compose. Menurut Google Play Console (2025), Android 5.0+ mencakup 97% perangkat aktif, jadi kompatibilitas bukanlah batasan untuk sebagian besar proyek.

Fungsi Composable dan komposisi

@Composable — adalah anotasi yang mengubah fungsi Kotlin biasa menjadi blok bangunan UI. Fungsi Composable mendeskripsikan bagaimana fragmen antarmuka — teks, tombol, daftar — harus terlihat. Alih-alih mengembalikan nilai, fungsi memancarkan komponen UI ke komposisi. Ini mirip dengan generator: setiap fungsi menambahkan elemen ke layar saat dipanggil.

@Composable
fun ProfileCard(name: String, avatarUrl: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        )
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            AsyncImage(
                model = avatarUrl,
                contentDescription = "Avatar",
                modifier = Modifier.size(48.dp).clip(CircleShape)
            )
            Spacer(Modifier.width(12.dp))
            Text(
                text = name,
                style = MaterialTheme.typography.titleMedium
            )
        }
    }
}

Fungsi ProfileCard menerima parameter (name, avatarUrl) dan memancarkan Card → Row → AsyncImage + Text. Komposisi — adalah pohon komponen yang dipancarkan dalam satu lintasan. Jika parameter tidak berubah, Compose melewatkan pemanggilan fungsi (recomposition skip). Jika hanya name yang berubah, hanya Text yang akan dipanggil, elemen lainnya tidak akan digambar ulang. Intelligent recomposition seperti ini adalah keunggulan kinerja utama Compose dibandingkan optimasi manual View System.

Slot dan Content Lambda

Fungsi Composable secara aktif menggunakan slot — trailing lambda, content: @Composable (() -> Unit). Ini memungkinkan pembuatan kontainer: Card, Column, Row menerima lambda content, dan konten disematkan di tempat slot. Slot API menggantikan atribut XML seperti android:layout_gravity — sekarang posisi elemen anak ditentukan oleh kode Kotlin di dalam blok content.

Manajemen status di Compose

Status di Compose — adalah nilai apa pun yang dapat berubah seiring waktu. Saat status berubah, Compose menjadwalkan recomposition untuk semua komponen yang membaca status ini. Mekanismenya mengingatkan pada React hooks: mutableStateOf mengembalikan MutableState, membaca .value secara otomatis mengubscribe komposisi saat ini pada perubahan.

@Composable
fun CounterExample() {
    var count by remember { mutableStateOf(0) }

    Column(modifier = Modifier.padding(16.dp)) {
        Text("Ditekan: $count")
        Button(onClick = { count++ }) {
            Text("Perbesar")
        }
    }
}

@Composable
fun UserScreen(viewModel: UserViewModel) {
    val userName by viewModel.userName.collectAsState()
    Text("Pengguna: $userName")
}

remember menyimpan nilai di antara rekomposisi — jika tidak, mutableStateOf akan dibuat ulang setiap pembaruan UI. collectAsState() mengonversi StateFlow dari ViewModel menjadi status yang kompatibel dengan Compose. Rekomendasi — untuk status layar gunakan ViewModel dengan StateFlow, untuk status lokal (misalnya kartu yang diperluas) — mutableStateOf. Pemisahan ini sesuai dengan prinsip komponen “pintar/bodoh”.

State Hoisting

State Hoisting — pola memindahkan status dari komponen anak ke komponen induk. Induk mengirimkan nilai dan callback melalui parameter, anak memanggil callback saat perubahan. Induk menyimpan mutableStateOf, anak hanya parameter. Ini membuat komponen dapat digunakan kembali dan diuji: TextField yang sama dapat digunakan dengan sumber data apa pun.

Modifier — konfigurasi tampilan

Modifier — adalah objek yang mendeskripsikan transformasi Composable: ukuran, spasi, latar belakang, pemrosesan klik, animasi, gulir. Pengubah diterapkan melalui rantai panggilan: Modifier.fillMaxWidth().padding(16.dp).background(Color.Blue).clickable { }. Setiap panggilan mengembalikan Modifier baru dengan properti yang ditambahkan — tanpa mutasi objek asli.

Urutan pengubah itu penting. Modifier.padding(16.dp).background(Color.Blue) mewarnai area dengan spasi. Modifier.background(Color.Blue).padding(16.dp) mewarnai persegi panjang bagian dalam, sementara spasi tetap transparan. Mekanika mirip dengan CSS box model: padding → background bekerja seperti margin + background; background → padding — seperti background + padding di dalam. Pengembang cukup mengingat: padding dulu = spasi luar, padding setelah = dalam.

Pengubah kustom

Jika pengubah bawaan tidak mencukupi, pengubah kustom dibuat melalui Modifier.composed { ... } atau Modifier.then(). Di dalam pengubah kustom, pengukuran tata letak (Modifier.layout { measurable, constraints -> ... }), menggambar (Modifier.drawWithContent { ... }), gerakan (Modifier.pointerInput { ... }) dapat digunakan. Contoh: pengubah untuk animasi berdenyut saat ditekan — mengukur ukuran, saat klik memulai animasi skala melalui animateFloatAsState.

Untuk animasi, Compose menyediakan animate*AsState (animateFloatAsState, animateColorAsState, animateDpAsState) — nilai dianimasikan antara status lama dan baru saat berubah. Jika animasi muncul/hilang diperlukan — AnimatedVisibility dan AnimatedContent dengan transisi bawaan (fade, slide, expand). Semua animasi bekerja pada graphics layer, tidak menyebabkan komposisi yang tidak perlu.

Side Effects: LaunchedEffect, DisposableEffect, remember

Fungsi Composable tidak boleh melakukan tindakan sampingan secara langsung (permintaan jaringan, timer, langganan) — mereka dipanggil setiap rekomposisi, yang akan menyebabkan duplikasi permintaan. Untuk efek samping, Compose menyediakan keluarga fungsi Effect: LaunchedEffect memulai coroutine saat masuk ke komposisi dan membatalkannya saat keluar, DisposableEffect — untuk sumber daya yang memerlukan pembersihan eksplisit (sensor, BroadcastReceiver).

@Composable
fun SensorReader() {
    val context = LocalContext.current
    var sensorValue by remember { mutableStateOf(0f) }

    DisposableEffect(Unit) {
        val sensor = registerSensorListener(context) { value ->
            sensorValue = value
        }
        onDispose {
            unregisterSensorListener(sensor)
        }
    }

    Text("Nilai: $sensorValue")
}

@Composable
fun UserGreeting(userId: String) {
    LaunchedEffect(userId) {
        val profile = api.fetchProfile(userId)
        // pembaruan status
    }
}

LaunchedEffect(userId) dimulai ulang jika userId berubah — coroutine sebelumnya dibatalkan, yang baru dimulai dengan userId baru. Ini menghilangkan manajemen pembatalan permintaan secara manual. DisposableEffect(Unit) — efek dengan kunci tetap Unit, dipicu saat masuk ke komposisi dan memanggil onDispose saat keluar. SensorReader mendaftarkan pendengar dan berhenti berlangganan saat meninggalkan layar — tanpa risiko kebocoran memori.

rememberCoroutineScope

Jika coroutine harus dimulai bukan saat masuk ke komposisi, tetapi karena peristiwa (tekanan tombol), rememberCoroutineScope() digunakan. Ini mengembalikan CoroutineScope yang terikat pada siklus hidup Composable, tidak memerlukan DisposableEffect. Contoh: memulai permintaan jaringan saat mengklik tombol — scope.launch { viewModel.loadData() }.

Jetpack Compose vs View System: perbandingan

Pilihan antara Compose dan View System — pertanyaan arsitektur utama pengembang Android di tahun 2026. Kedua teknologi didukung oleh Google, tetapi Compose adalah arah utama yang menjadi fokus sumber daya Google. View System hanya menerima perbaikan kritis dan tidak berkembang. Perbedaannya terlihat dalam sintaksis, manajemen status, kinerja, dan waktu pengembangan.

Untuk proyek baru, Google merekomendasikan Jetpack Compose sebagai standar pengembangan UI. View System tetap untuk mendukung kode yang ditulis sebelum 2021 dan kasus di mana ukuran APK minimal diperlukan (misalnya untuk pasar berkembang dengan perangkat entry-level). Compose mengurangi volume kode UI sebesar 30–50% dibandingkan dengan View System berkat sintaksis deklaratif dan animasi bawaan.