Membangun Modern Android Native UI Dengan Jetpack Compose

Setelah beberapa tahun membangun UI Android dengan XML. Saat ini ada cara modern untuk membangun UI Android dengan cepat dan kode lebih sedikit.

Apa itu Jetpack Compose

Jetpack Compose merupakan toolkit modern untuk membangun UI native di Android. Jetpack Compose di kembangkan oleh Google dan pertama kali diperkenalkan pada event I/O 2019. Dengan tujuan menyederhanakan dan mempercepat proses pengembangan UI sehingga proses slicing desain kedalam kode aplikasi menjadi lebih baik. Hal ini tentunya akan berefek pada waktu pengembangan aplikasi secara lebih cepat.

Jetpack Compose memanfaatkan bahasa Kotlin yang mana merupakan bahasa utama yang didukung Google dalam pengembangan Android native. Karena memanfaatkan Kotlin API, Jetpack Compose hanya bisa digunakan dengan bahasa Kotlin.

Jetpack Compose bisa dibilang sebagai bentuk usaha Google untuk masuk dalam trend declarative UI dalam pengembangan aplikasi seperti Flutter, React Native, dan SwiftUI.

Jetpack Compose Memberikan Penawaran

Dengan menggunakan Jetpack Compose untuk membangun UI native di Android. Berikut beberapa keuntungan yang akan didapatkan oleh developer aplikasi :

• Less Code, karena hanya menggunakan satu bahasa yaitu kotlin, membuat kode yang ditulis menjadi lebih sedikit ketimbang menggunakan Views dan XML terutama saat membuat Custom View.
• Intuitive, kita hanya perlu mendeskripsikan tampilan UI dan sisanya akan ditangani oleh Compose. Ketika ada perubahan state, Compose akan secara otomatis memperbarui UI yang telah dideskripsikan.
• Accelerate Development, Jetpack Compose memiliki kompatibilitas yang baik dengan library Jetpack lainnya yang telah lebih dulu hadir. Hal ini membuat Jetpack Compose dapat diadopsi secara bertahap tanpa perlu melakukan rewrite terhadap seluruh codebase sehingga tidak mengganggu aplikasi yang sudah ada. Dukungan penuh dari IDE Android Studio juga akan menyempurnakan implementasinya.
• Powerful, walaupun termasuk anggota baru dari keluarga Jetpack, Jetpack Compose termasuk powerful dengan akses langsung ke API dari platform Android. Jetpack Compose juga membawa dukungan untuk Material Design, Dark theme, animasi, dan lain-lain.

Paradigma Jetpack Compose

Setelah lebih dari 10 tahun aplikasi native Android dikembangkan dengan menuliskan UI dalam kode XML dan logic dalam bahasa pemrograman Kotlin atau Java. Dengan Jetpack Compose memungkinkan developer untuk membangun UI maupun kodę logic menggunakan satu bahasa, yaitu Kotlin.

Jetpack Compose adalah kerangka kerja declarative UI, Ketika menjelaskan tentang pemrograman declarative, umumnya ada satu kalimat yang sering diucapkan:

Pemrograman deklaratif lebih fokus pada apa (what) yang akan dibangun dibanding bagaimana (how) cara membangunnya.

Mengapa demikian, karena Jetpack Compose sudah menyiapkan semua komponen yang diperlukan untuk membangun UI Android. Developer hanya perlu memilikir kan apa yang akan dibangun kemudian menggunakan fuction yang diperlukan tanpa perlu memikirkan bagaimana cara developer untuk membangunnya.

Membangun Project Pertama dengan Jetpack Compose

Mari kita coba membangun aplikasi “Bootcamp Compose Android” dengan jetpack compose. Untuk membangun project baru, bisa dilakukan dengan langkah sebagai berikut :

• Membuat Project Baru

Buka Android Studio kemudian pilih new project. Maka akan muncul tampilan seperti dibawah. Untuk membuat project dengan UI Jetpack Compose pilih Empty Compose Activity lalu klik next.

Di project kali ini saya akan membuat nama project Bootcamp Compose Android dengan minimum SDK Android 5.1 (Lollipop). Nama project yang digunakan nantinya akan menjadi nama function untuk thema yang digenerate otomatis oleh Android Studio.

• Project automatis dibuat Android

Dengan memilih template, file gradle akan otomatis memiliki jetpack compose yang telah aktif, beserta dependenciesnya.

Saat artikel ini ditulis, latest stable version Jetpack Compose adalah 1.3.2. Anda dapat update version sesuai dengan latest version.

build.gradle(:app)

Selain gradle, ada beberapa file yang automatis dibuat oleh Android Studio, salah satunya adalah file MainActivity.kt

MainActivity.kt

Di dalam file MainActivity.kt terdapat beberapa fuction diataranya :

• setContent { … } , layout yang akan dijalankan pada MainActivity adalah layout yang berada di dalam setContent{}
• @Composable, digunakan untuk menentukan fuction yang berfungsi sebagai compose UI
• DefaultPreview(), berfungsi untuk menampilkan preview dari fuction composable yang sudah dibuat.
• Surface( … ){ … }, berfungsi untuk grouping child sesuai dengan shapenya, sebagai elevasi, border dan juga background.
• Text( … ), berfungsi untuk menampilkan text.

Menjalankan Project

Berikut hasil dari project ketika saat pertama kali dijalankan pada emulator: