Membangun Aplikasi Android Modern dengan Kotlin dan Jetpack Compose

Jetpack Compose mengubah cara kita membangun UI di Android. Alih-alih menulis XML layout yang verbose, kamu sekarang bisa menulis UI dengan syntax Kotlin yang elegan dan reactive — lebih cepat, lebih mudah di-debug, dan lebih natural.

Jika kamu masih terbiasa dengan approach tradisional (Activity + Fragment + XML), artikel ini akan membuka perspektif baru tentang apa itu UI programming di era Compose.

Apa Itu Jetpack Compose?

Jetpack Compose adalah modern toolkit untuk building Android UI. Alih-alih mendeskripsikan UI dalam XML, Compose menggunakan Kotlin functions yang declarative. Artinya, kamu menjelaskan "UI kamu harus terlihat seperti apa" bukan "bagaimana cara membuat UI itu" step by step.

Keuntungan utama:

• Less Code — Sebagian besar boilerplate hilang. Kamu bisa build UI kompleks dengan code yang jauh lebih ringkas dibanding XML.
• Reactive by Default — State berubah? UI otomatis ter-recompose. Tidak perlu manual update view seperti di era Fragment.
• Type-Safe — Semua logic ada di Kotlin, bukan XML. Compiler bisa menangkap error lebih awal.
• Preview di IDE — Kamu bisa melihat preview UI di Android Studio tanpa run app, menghemat waktu development.

Setup Project dan Dependency

Mulai dengan membuat project baru di Android Studio. Pastikan kamu pilih Compose template (bukan Empty Activity biasa).

Berikut dependency minimal yang kamu butuhkan di build.gradle.kts (module app):

dependencies {
    implementation("androidx.compose.ui:ui:1.5.0")
    implementation("androidx.compose.material3:material3:1.1.0")
    implementation("androidx.compose.ui:ui-tooling-preview:1.5.0")
    implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.6.1")
    implementation("androidx.activity:activity-compose:1.7.2")
}

Enable Compose di build.gradle dengan:

android {
    compileSdk = 33
    buildFeatures {
        compose = true
    }
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.0"
    }
}

Setelah sync, kamu siap mulai menulis Composable.

Konsep Dasar: Composable Functions

Composable adalah function Kotlin biasa, tapi di-annotate dengan @Composable. Function ini mendeskripsikan bagian dari UI.

Contoh composable paling sederhana:

@Composable
fun GreetingCard(name: String) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Hello, $name!",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold
        )
        Spacer(modifier = Modifier.height(8.dp))
        Text(
            text = "Welcome to Jetpack Compose",
            fontSize = 14.sp,
            color = Color.Gray
        )
    }
}

Penjelasan:

• @Composable — Annotation yang menandai function ini bisa render UI.
• Column — Layout container (vertikal). Alternatifnya Row (horizontal) dan Box (overlapping).
• modifier — Parameter untuk styling dan layout (padding, width, alignment, dll).
• Text, Button, Image — Basic UI components. Ada banyak di library.

State Management di Compose

Perbedaan besar Compose adalah UI otomatis re-render saat state berubah. Ini namanya "recomposition". Kamu manage state dengan remember dan mutableStateOf:

@Composable
fun CounterButton() {
    var count by remember { mutableStateOf(0) }
    
    Button(
        onClick = { count++ }
    ) {
        Text("Count: $count")
    }
}

Setiap kali count berubah, Compose otomatis re-render composable ini. UI sync dengan state.

Untuk state yang lebih kompleks atau shared antar composable, gunakan ViewModel:

class CounterViewModel : ViewModel() {
    private val _count = MutableLiveData(0)
    val count: LiveData<Int> = _count
    
    fun increment() {
        _count.value = (_count.value ?: 0) + 1
    }
}

@Composable
fun CounterScreen(viewModel: CounterViewModel = viewModel()) {
    val count = viewModel.count.observeAsState(0)
    
    Button(onClick = { viewModel.increment() }) {
        Text("Count: ${count.value}")
    }
}

Membuat Layout yang Responsive

Compose membuat responsive design jadi mudah. Gunakan Box, Column, dan Row dengan modifier yang fleksibel:

@Composable
fun ResponsiveCard(title: String, description: String) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(
                text = title,
                style = MaterialTheme.typography.headlineSmall
            )
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                text = description,
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

fillMaxWidth() membuat card mengisi lebar parent. padding() menambah spacing. Material3 theme otomatis handle warna dan typography yang konsisten.

Preview dan Testing

Salah satu keunggulan Compose adalah @Preview. Kamu bisa lihat UI di Android Studio tanpa run emulator:

@Preview(showBackground = true)
@Composable
fun GreetingCardPreview() {
    GreetingCard("Budi")
}

Klik "Run" di sebelah annotation, dan preview langsung muncul di Panel kanan. Sangat menghemat waktu development.

Kesimpulan

Jetpack Compose adalah lompatan besar dalam development Android. Dengan syntax Kotlin yang expressive, reactive state management, dan tooling yang powerful, kamu bisa build UI modern lebih cepat dan dengan confidence lebih tinggi dibanding era XML.

Mulai dari setup dependency, pahami Composable functions, kelola state dengan proper, dan manfaatkan Preview — itu fondasi yang cukup untuk membangun aplikasi production-ready. Semakin sering kamu praktik, semakin natural approach ini terasa dibanding cara lama.