[Bagian 2] Jetpack Compose — Persiapan Migrasi Existing Layout to Compose
Bagian 1: Jetpack Compose — Pengenalan
Bagian 2: Jetpack Compose — Persiapan Migrasi Existing Layout to Compose
Bagian 3: Jetpack Compose — Migrasi Komponen View (Input Text) pada Existing Layout
Bagian 4: Jetpack Compose — Mengimplementasi Compose View dalam ViewGroup
Halo Folks! Pada artikel sebelumnya saya telah membahas mengenai pengantar teknologi Jetpack Compose. Pada artikel ini saya akan membahas mengenai langkah dalam melakukan migrasi existing layout code menjadi compose.
Sejak compose mencapai versi stabil dan siap untuk app level production banyak developer yang mencoba untuk membangun sebuah layout aplikasi dengan menerapkan compose. Namun apakah memungkinkan untuk membangun layout dengan compose pada aplikasi yang sudah rilis dengan legacy code layout lama yaitu XML dan View ? Jawabannya adalah memungkinkan, karena compose memiliki kemampuan dalam beradaptasi dan berdampingan dengan XML dan View sistem (Interoperability) dengan kata lain kita bisa mengkombinasikan layout yang dibangun dengan XML dengan Compose.
Terdapat dua cara untuk melakukan migrasi existing layout ke compose. Yang pertama yaitu meletakkan compose didalam sebuah view, dan yang kedua adalah meletakkan view didalam compose. Perlu dipahami bahwa view disini merupakan komponen yang dideklarasikan dalam sebuah xml file.
Mari kita bahas satu persatu proses migrasi menggunakan 2 method diatas.
- Compose di dalam View, jika menggunakan method ini kita harus memasukkan komponen compose didalam sebuah view. Komponen view memiliki layout yang dibangun pada file XML dan diinisialisasikan pada kelas Activity. Pendekatan compose pada XML file dan kelas activity tentu berbeda. Untuk memasukkan compose pada file XML diperlukan sebuah komponen yang di sebut ComposeView. Sedangkan untuk memasukkan compose pada kelas Activity diperlukan sebuah komponen setContent.
- View di dalam Compose, jika menggunakan method ini kita dapat menggunakan komponen AndroidView.
Untuk melakukan migrasi ke compose pada existing projek pastikan bahwa project sudah support untuk mengimplementasikan compose. Saya sudah menyiapkan project sederhana untuk mengikuti langkah — langkah migrasi pada artikel ini. Project source code dapat diakses pada link berikut. Selanjutnya clone project dan gunakan branch before-migrate.
- Buka file build.gradle(module: app) tambahkan beberapa line code untuk mengaktifkan fitur compose.
Jika project yang sedang anda migrasi menggunakan modularization atau multi modul anda dapat menambahkan file build.gradle pada root modul/common modul.
2. Tambahkan library compose sesuai dengan kebutuhan pada dependency file, hal ini masih dilakukan pada file build.gradle (module:app)
3. Jika diperhatikan library tersebut memanggil sebuah variable versi. Tambahkan compose versioning pada file build.gradle (project:app).
4. Selanjutnya lakukan sync project, tunggu hingga proses load selesai.
Jika proses build gradle sudah selesai dan tidak terdapat error maka project sudah siap untuk di migrasi.
Sampai jumpa di artikel selanjutnya. :)
