Histori Belajar Jetpack Compose: Apa itu Jetpack Compose — Part 1

Perkenalan

Segala puji dan syukur saya panjatkan ke hadirat Allah SWT, karena atas limpahan rahmat-nya saya dapat membagikan sedikit ilmu melalui tutorial singkat dari hasil belajar Jetpack Compose selama semester pendek pada mata kuliah Pemrograman Mobile 2 kepada teman-teman pembaca sekalian.

Salam Hangat, sehangat coklat panas di pagi hari
- Akbar Hamonangan Lubis

Apa itu Jetpack Compose?

Jadi pertama-tama, kita akan membahas. Apa itu Jetpack Compose?

Ilustrasi Kode Jetpack Compose | Sumber: developer.android.com

Pada dasarnya Jetpack Compose merupakan Toolkit UI buatan Google yang dibuat untuk memudahkan Developer atau Pengembang aplikasi, khususnya Android Kotlin sesuai dengan standar pengembangan UI modern masa kini.

“Compose something (formal) to combine together to form a whole” — Kamus Besar Oxford

Library pada Jetpack Compose?

Library pada Jetpack Compose merupakan bagian esensial dalam pengembangan aplikasi dengan menggunakan Jetpack Compose, dibawah ini sedikit contoh kecil dari library beserta fungsinya yang selanjutnya akan diberikan contohnya:

1. activity. Memiliki fungsi untuk mengakses API yang dapat dikomposisi dibuat dari activity
2. compose. Memiliki fungsi untuk menentukan UI yang dibuat secara terprogram dengan fungsi yang dapat dikomposisi yang mendeskripsikan bentuk dan dependensi datanya.

Pada android studio, penerapan library diatas akan seperti ini di kodenya:

Mengimpor Library | Sumber: Dokumentasi Pribadi

Ciri dari Jetpack Compose?

1. Simpel: dibandingkan dengan XML, struktur penulisan kode untuk membuat tampilan UI menjadi lebih singkat dan sedikit serta intuitif.
2. Penulisan kode: agar Jetpack Compose dapat berjalan dengan semestinya, perlu menuliskan @Composable agar terdeteksi sebagai Jetpack Compose

Menulis Kode dengan Compose | Sumber: Dokumentasi Pribadi

Menampilkan preview: untuk menampilkan preview dari UI yang sebelumnya telah dibuat dengan kode, sebelum @Composable berikan @Preview

Menampilkan Preview | Sumber: Dokumentasi Pribadi

lalu hasilnya akan seperti ini

Hasil preview | Sumber: Dokumentasi Pribadi

Tampilan Bertumpuk

Dalam pembuatan UI dengan Jetpack Compose, ada suatu kondisi dimana saat suatu komponen dibuat, maka posisinya jadi bertumpuk.

Sebelumnya seperti ini:

Jadi seperti ini:

Ketika hal seperti ini terjadi, bukan berarti programnya bermasalah, namun tujuannya memang begitu.

Pertama hal tersebut dapat diakali dengan Column dan Row seperti pada contoh berikut:

Menggunakan Column | Sumber: Dokumentasi Pribadi

Maka hasilnya akan seperti ini:

Hasil Preview kodingan Column | Sumber: Dokumentasi Pribadi

Selain itu alasan dibuat seperti itu juga karena dapat memudahkan pembuatan UI seperti pada contoh dibawah ini:

Contoh penggunaan Column pada desain UI secara nyata | Sumber: Dribbble

“Pada tampilan welcome screen diatas ada desain yang tampak bertumpuk, hal ini yang disebut mempermudah selama pembuatan UI” — Akbar

Terima kasih telah membaca, semoga harimu menyenangkan!