Membuat Layout Menggunakan Android Jetpack Compose

Android’s modern toolkit for building native UI

Photo by https://developer.android.com/jetpack

Halo Gaes kali ini bakalan share mengenai Jetpack Compose.

Beberapa bulan yang lalu rame mengenai jetpack compose setelah Event Android Dev Summit ’19, yaitu membahas tentang What’s New in Jetpack Compose, Jetpack Compose pun Belum Release untuk versi Stable , saat ini masih dalam tahap Development.

Android’s modern toolkit for building native UI

Jetpack Compose simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.

Oke intinya jetpack compose sendiri dibuat untuk menyederhanakan proses Development UI di Android supaya lebih cepat, code lebih sederhana dan powerfull.

Tetapi tidak hanya itu ada beberapa tujuan lain dibuatnya Jetpack Compose yaitu untuk Android View yang sekarang yaitu XML itu banyak sekali line of codenya dan menurut para developer android ada beberapa yg kurang sesuai,

Banyak dari teman saya bertanya “ Kenapa kok mesti di buat Jetpack Compose ? , padahal udah nyaman pake XML ”. coba liat di bawah ini

Contoh:

Bisa dilihat untuk Class View sendiri ada 29240 Line Of Code , hampir 30000 Baris . memang semuanya terhandle dengan baik oleh Google .

sebenernya masih banyak kesalahan dalam view yang lain salah satunya seperti diatas .

Nah dari problem di atas Google mencoba membuatnya lebih baik, dengan hadirnya Jetpack Compose.

Source : https://developer.android.com/jetpack/compose

• Less Code : yang di maksudkan disini adalah Code lebih ringkas dan mudah untuk di maintenance , ada beberapa problem ketika kita membuat sebuah Custom View , itu akan sangat banyak Code , dengan menggunakan Jetpack Compose di harapkan bisa mempersingkat dalam membuat Custom View
• Intuitive : Dengan hadirkan jetpack compose sekarang android bisa Declarative UI seperti iOS yang sudah punya Swift UI & Flutter yg dari awal kehadirannya sudah Declarative UI,
• Accelerate Development: Lebih cepat dalam proses development UI, saya pernah buktikan sendiri yaitu dengan Flutter(menggukan flutter yang dimana itu akan sama dengan jetpack compose Everyting is Widget) Declarative UI jauh lebih cepat dari biasanya ditambah lagi dengan fitur Hot Reload , Jetpack Compose sendiri punya Live Preview (kita tunggu saja di Google IO 2020) *kode xml yang sebelumnya masih tetap compatible kok dengan Jetpack Compose hal ini membuat proses migrate akan lebih cepat.
• Powerfull : powerfull disini adalah akan support full Material Desain jadi sudah pasti kita membuat UI dengan mudah tapi hasilnya bagus karena fully support material desain dari google.

TL;DR

Langung ke contoh project

kharisazhar/JetpackNews

So, let’s discuss about how we can use the jetpack compose

Kalian Perlu download Android Studio versi Preview, yaitu Android Studio Cannary 4.0 (mungkin dapat berubah). Karena ini masih versi preview jadi belum bisa di gunakan untuk Production.

Source: https://developer.android.com/studio/preview

Setup Project

Start New Project

Isi seperti Biasa, Untuk Minimum SDK Hanya Support minimal API 21

Perlu di Perhatiakan :
Android Studio sudah menyiapkan template Jetpack Compose , Langsung pilih Empty Compose Activity

(Bagi yang pilih Empty Compose Activity, bisa langsung skip config di bawah ini)

Jika kalian setup manual atau tidak menggunakan template android Studio , maka confignya seperti ini :

1. Setup build.grade (app):

2. Tambahkan Experimental Kotlin-Gradle Plugin

Jetpack Compose sekarang masih membutuhkan versi experimental kotlin gradle plugin , jadi kita perlu menambahkan terlebih dahulu

3. tambahkan Jetpack Compose Dependency

Setelah Buat New Project maka tampilan akan seperti ini :

Source: Kharis Azhar

Jetpack Basic Compose

1. Composable functions

Jetpack Compose di buat di dalam function yang beranotasi
@Composable

Seperti kode di atas berarti Function HelloWorld sudah bisa kita implement jetpack compose karena telah memilki anotasi @Composable , yang berarti kita dapat membuat UI Secara programmatically.

2. Text Element

membuat Text dengan Jetpack Compose sangat simple

Text(text = " Your Text ")

Setelah membuat Function masukan ke setContent :

3. Preview your Function

fitur yang menurut saya penting untuk development UI yaitu Preview, semoga Preview di Jetpack Compose bisa live preview seperti XML dulu, jadi sekarang untuk Melihat Preview kalian perlu Build terlebih dahulu :D ya emang si agak gimana wkwk tapi kemungkinan bakal Live Seperti XML (tunggu saja Google IO 2020 tahun ini).

Tampilan Preview Default akan seperti ini , klik Build & Refresh setiap kali ada perubahan UI.

Buat Function baru untuk menampung Preview, dan tambahkan Anotasi @Preview di atas @Composable, kemudian masukan function yang HelloWorld tadi ke dalam MaterialTheme { }

Kemudian Build & Refresh , sipp sampai sini function yang di buat sudah muncul di Preview

Kode lengkap Seperti ini :

4. Layout

Jetpack Compose terdapat Column dan Row , ini di gunakan untuk mengatur layout.

• Coloumn : Fungsi ini digunakan untuk mengatur element secara Vertical, seperti Linear Layout dengan orientation = “vertical”
• Row : Mengatur element secara Horizontal, seperti Linear Layout dengan orientation = “horizontal”

Jika tanpa Column atau Row , makan layout akan menumpuk seperti ini

Untuk itu kita tambahkan Column

Layout akan seperti ini

Nice , Coba kita pakai Row

Layout akan menjadi Horizontal

Berikut Contoh dan Penjelasan mengenai penggunaan Main Axis dan Cross Axis Pada Column:

1. Penggunaan Main Axis

Gambar di bawah ini cukup memudahkan kalian dalam mengatur Layout

• Note : Dalam Jetpack Composse MainAxis & Cross Axis = Arrangement

Jadi Arrangment ini berfungsi untuk mengatur posisi Child di dalam Row/Column itu sendiri

1. Column

• Arrangement.Begin (Default value)

• Arrangement.End

• Arrangement.Center

• Arrangement.SpaceAround

• Arrangement.SpaceBetween

• Arrangement.SpaceEvenly

2. Row

• Arrangement.Begin

• Arrangement.End

• Arrangement.Center

• Arrangement.SpaceAround

• Arrangement.SpaceEvenly

• Arrangement.SpaceBetween

5. Image

Component selanjutnya yaitu Image , untuk menambahkan image di Jetpack Compose kita menggunakan Resource Manager

Image bisa di download di sini

Seperti biasa masukan imagenya ke folder Drawable

Langkah pertama buat variable image , untuk menampung Resource

ImageUntuk DrawImage kita bungkus dengan Widget Column

kemudian panggil DrawImage() dan masukan variable image ke Parameternya : DrawImage(image)

Gambar diatas blm kita atur sizenya, its okay kita akan perbaikinya

Tambahkan Container untuk mengatur size image , tambahkan modifer Height : untuk mengatur tinggi

Expanded : mengatur bahwa ukuran container harus sesuai dengan ukuran childnya , secara default Expanded = false , maka dari itu kita jadikan True supaya Ukuran container sesuai dengan ukuran childnya

wraps : digunakan supaya dapat multipe modifer yaitu Height & Expanded

Material Design

Jetpack Compose support material design.

Style Text

Shape

Dari gambar di atas ada 2 Shape yang di gunakan :

1. Rounded Button ‘See options’

bisa dilihat button ‘See options’ sedikit rounded , karena saya implement shape RoundedCornerShape

2. Rounded Image

Untuk membuat Rounded Image , kita butuh membungkusnya lagi dengan Clip() kemudian tambahkan shape RoundedCornerShape

Tips : Create Reusable Widget

Maksud dari create reusable widget adalah membuat widget(Component UI) yang akan di gunakan berulang kali. karena ada beberapa Style yang sama jadi kita buat Custom Widget sendiri

1. Title

• Settings
• My Newsletter

Buat Composable Function , Kita beri nama JetpackNewsTitle

2. Button

• Button ‘See options’
• Button ‘Show Catalogue’

Buat Composable Function , Kita beri nama JetpackNewsButton

Done, tinggal panggil JetpackNewsTitle jika perlu Title dengan style yang sama, dan panggil JetpackNewsButton jika perlu Style Button yang sama.

Sangat simple untuk membuat widget sendiri yang sesuai dengan Style yang dibutuhkan.

Dari penglaman saya membuat Custom Widget sendiri sangat efisien dalam Slicing UI, membuat development menjadi lebih cepat & dari segi UI juga rapih, konsisten.

All done

Great work! You’ve learned the basics of Compose.

• Basic Composable Function
• Basic Layouting with Jetpack Compose
• Preview Function
• Material Design
• Create your Custom Widget

Source Code final JetpackNews:

https://github.com/kharisazhar/JetpackNews

Thanks udah mampir, Sekutt

Keep in touch :

• Email : kharisazhar13@gmail.com
• Github : https://github.com/kharisazhar/
• Linkedin : https://www.linkedin.com/in/kharisazhar/
• Instagram : https://www.instagram.com/kharis_azhar/
• Facebook : https://www.facebook.com/kharis.azhar.13/