Selama lebih dari sepuluh tahun, layar Android dibangun dari layout XML dan View yang diperbarui manual lewat Kotlin atau Java. Jetpack Compose menggantinya dengan UI yang ditulis sebagai fungsi Kotlin, yang menggambarkan tampilan layar untuk state tertentu. Google merekomendasikan Compose untuk UI Android yang baru, dan sebagian besar library serta contoh kode baru sudah mengasumsikan Compose. Bagi tim yang sudah punya aplikasi, pertanyaan sebenarnya adalah cara pindah tanpa menghentikan pengerjaan fitur. Berikut apa saja yang berubah dan cara migrasi yang aman.
Apa yang Berubah dengan Compose
| Topik | XML View | Jetpack Compose |
|---|---|---|
| Mendefinisikan UI | File layout XML yang di-inflate menjadi objek View | Fungsi Kotlin dengan anotasi @Composable |
| Memperbarui UI | Cari view-nya lalu panggil setText, setVisibility, dan method sejenis | Ubah state-nya, lalu Compose menggambar ulang bagian yang terdampak |
| Daftar | RecyclerView dengan adapter dan ViewHolder | LazyColumn dan LazyRow dengan beberapa baris kode |
| Tema | Style dan theme di resource XML | MaterialTheme berisi warna, tipografi, dan bentuk di Kotlin |
| Preview | Layout editor, terbatas untuk konten yang dinamis | Fungsi @Preview dengan data contoh, beberapa state sekaligus berdampingan |
Perubahan terbesarnya ada di cara berpikir. Di sistem View, UI diubah langkah demi langkah. Di Compose, Anda cukup menggambarkan UI untuk state saat ini, dan satu kelompok bug ikut hilang, misalnya loading spinner yang tetap tampil karena salah satu alur kode lupa menyembunyikannya.
Perlukah Migrasi?
- Layar baru paling mudah. Membangunnya dengan Compose tidak menambah biaya, dan tim belajar sambil mengerjakan pekerjaan nyata.
- Layar yang sering berubah, dengan daftar yang rumit atau banyak state, paling diuntungkan kalau ditulis ulang.
- Layar stabil yang tidak pernah disentuh boleh tetap memakai XML dalam waktu lama. Interop keduanya didukung dengan baik.
- Custom View dengan kode drawing yang berat dipindahkan paling akhir, dan sementara itu bisa dibungkus AndroidView di dalam Compose.
Migrasi Layar demi Layar
- 1Tambahkan dependency Compose lewat Compose BOM yang menjaga versi library tetap kompatibel, lalu aktifkan plugin Compose compiler yang sudah ikut di Kotlin 2.0 ke atas.
- 2Buat MaterialTheme yang sama dengan warna dan font aplikasi saat ini, supaya layar Compose terlihat sama dengan layar XML.
- 3Bangun komponen yang bisa dipakai ulang lebih dulu, seperti tombol, text field, dan item daftar, sebagai design system kecil.
- 4Tulis layar baru dengan Compose. Tampilkan lewat ComposeView di dalam Fragment yang sudah ada, atau dengan setContent di Activity.
- 5Pindahkan layar yang memakai ViewModel dengan mempertahankan ViewModel-nya dan hanya mengganti layout, lalu baca StateFlow-nya dengan collectAsStateWithLifecycle.
- 6Setelah sebagian besar layar pindah, pertimbangkan Navigation Compose untuk menggantikan navigasi berbasis Fragment.
Kelola State ala Compose
Simpan state layar di ViewModel yang mengeluarkan satu objek UI state lewat StateFlow, lalu kirim data biasa dan callback event ke composable di bawahnya. Pola ini disebut state hoisting. Composable yang menerima data lewat parameter mudah di-preview dengan data contoh dan mudah dites. Pakai remember untuk detail UI kecil seperti menu sedang terbuka atau tidak, dan rememberSaveable untuk nilai yang harus bertahan saat layar diputar, seperti teks yang sedang diketik.
Kebiasaan untuk Performa
- Nilai performa hanya dari build release. Build debug Compose jauh lebih lambat dan memberi gambaran yang keliru.
- Tambahkan Baseline Profile supaya jalur kode penting sudah dikompilasi lebih awal, sehingga startup dan scrolling lebih lancar.
- Beri key yang stabil untuk item di LazyColumn supaya Compose bisa memakai ulang item dengan benar saat daftar berubah.
- Hindari pekerjaan berat langsung di dalam composable. Hitung di ViewModel, atau bungkus dengan remember beserta key yang tepat.
- Pakai Layout Inspector untuk melihat jumlah recomposition dan menemukan composable yang terlalu sering digambar ulang.
Testing
UI test Compose memakai semantics, informasi yang sama dengan yang dibaca layanan aksesibilitas. Dengan createComposeRule Anda bisa memasang konten, mencari node berdasarkan teks atau test tag, melakukan klik, dan memeriksa apa yang tampil. Karena composable menerima state lewat parameter, banyak test cukup merender satu layar di setiap state tanpa menjalankan seluruh aplikasi. Screenshot test berbasis preview juga berguna untuk menangkap perubahan tampilan yang tidak disengaja.
Migrasi paling aman adalah migrasi yang tidak pernah menghentikan pengerjaan fitur. Bangun hal baru dengan Compose, dan pindahkan layar lama saat memang sedang dikerjakan.
Pelatihan Android Kotlin kami mengajarkan Compose sejak awal, termasuk interop dengan layar XML yang sudah ada, supaya tim dengan aplikasi lama bisa langsung menerapkannya di codebase sendiri pada minggu pertama.
Poin penting
- Compose menggambarkan UI sebagai fungsi dari state, sehingga banyak bug akibat memperbarui View secara manual ikut hilang.
- Mulai dari layar baru dan layar yang sering berubah, dan biarkan layar stabil tetap di XML sampai ada alasan untuk memindahkannya.
- Siapkan Compose BOM, MaterialTheme bersama, dan komponen yang bisa dipakai ulang sebelum memindahkan layar.
- Angkat state ke ViewModel lalu kirim data dan callback ke composable.
- Ukur performa di build release, tambahkan Baseline Profile, dan beri key yang stabil untuk item daftar.
