Jetpack Compose

Gold - Chapter 8 - Topic 1

Selamat datang di Chapter 8 Topic 1 online course
Android Developer dari Binar Academy!
Pengantar
PM 101

Hi Binarian, welcome di Chapter 8!

Dalam membuat aplikasi Android, kita mengetahui bahwa
diperlukan UI atau layout yang menjadi bagian penting
dalam membuat aplikasi. Dengan kebutuhan layout ini, kita
dapat menggunakan XML.

Tapi tahu nggak sih? saat ini Google membuat sebuah toolkit
baru untuk membuat layout dengan nama Jetpack
Compose

Nah, pada topik Jetpack Compose kali ini, kita akan

mempelajari mengenai Jetpack Compose beserta cara
penggunaanya. Sekuyy~
Pengantar
PM 101

Detailnya, kita bakal bahas hal-hal

berikut ini:
Pengenalan Jetpack Compose

Jetpack Compose vs XML

Membuat Text UI dengan Jetpack Compose

Layouting dengan Jetpack Compose

Menyisipkan Unsur UI Umum

Preview UI dengan Jetpack Compose

Pengenalan Jetpack Compose

Perkembangan pesat Android, diikuti

keinginan menciptakan pengalaman
pengguna dengan cara terbaik pula.

Salah satunya, ialah menciptakan User

Interface melalui Jetpack Compose!
 Pengenalan
PM 101 Jetpack Compose

Apa sih Jet Compose itu?

Jetpack Compose merupakan toolkit modern Android untuk
membuat UI secara native (kotlin).

Jetpack Compose menyederhanakan dan mempercepat

pengembangan UI di Android.

Dengan hal itu, efeknya aplikasi kita menjadi lebih cepat

dengan kode yang lebih sedikit, fitur yang canggih, serta API
Kotlin yang intuitif.
 Pengenalan Jetpack Compose

Jetpack Compose adalah bagian dari

Android Jetpack
Android Jetpack merupakan package baru dari Google yang
disusun untuk membuat para developer Android terbantu dan
cepat dalam mengembangkan sebuah aplikasi yang
berkualitas dan tangguh.

Package dari Android Jetpack sangat banyak; mulai dari

library, tools dan panduan di dalamnya.

Salah satunya adalah Jetpack compose; yakni toolkit untuk

membangun native UI.
Pengenalan Jetpack Compose

Jetpack Compose banyak digunakan di Aplikasi Terkenal

Sebagai developer, belajar toolkit ini menjadi penting kalau kamu tertarik untuk kerja di aplikasi dibawah ini :
Pengenalan Jetpack ComposeAndroid Jetpack ~ Sejarah Jetpack

Jetpack Compose masih terus dikembangkan loh!

Toolkit ini masih aktif dikembangkan oleh Google. Dengan hal itu, apa yang dibahas di topik ini, masih lapisan luar-nya saja~

Kalau kamu penasaran, bisa buka disini nih :

Jetpack Compose | Android Developers

Jetpack Compose vs XML

Pada awal pembahasan, disebutin juga

tuh kalau kebutuhan layouting UI bisa
memanfaatkan XML.

Terus, bedanya Jetpack Compose sama

XML gimana?
 PM 101 Compose vs XML
Jetpack

Bedanya Jetpack Compose dengan

XML?
Jetpack Compose menggunakan pendekatan yang deklaratif.
Dimana kalau menggunakan XML, digunakan pendekatan
imperatif dalam membuat UI.

Konsep sistem UI pada Jetpack Compose adalah composable

atau komposisi, artinya setiap komponen UI dapat ditumpuk
menjadi parent dan child di dalamnya.
 PM 101 Compose vs XML
Jetpack

Apa maksudnya Komposisi?

Komposisi atau Compose terdiri dari fungsi composable yang

ditandai dengan @Composable.

Anotasi @Composable memberi tahu Compose untuk

menambahkan dukungan khusus ke fungsi dalam rangka
mengupdate dan mengelola UI dari waktu ke waktu.

Fungsi ini digunakan untuk memanggil fungsi composable

lainnya. Sehingga, kita hanya perlu menggunakan fungsi ini
untuk membuat komponen UI baru.
 PM 101 Compose vs XML
Jetpack

Terus, cara Compose bekerja, gimana nih?

Compose memungkinkan kita menyusun kode menjadi

potongan-potongan kecil. Inilah mengapa compose sering
disebut dengan “composable”.

Dengan membuat composable kecil yang dapat digunakan

kembali, kita dapat dengan mudah mem-build library elemen
UI yang digunakan di aplikasi.

Masing-masing bertanggung jawab atas satu bagian layar

dan dapat diedit secara terpisah.
 PM 101 Compose vs XML
Jetpack

Contohnya bisa cek gambar di samping!

Pada gambar di samping, kita melihat bahwa komponen UI

dapat ditumpuk satu sama lainnya.

Composable merepresentasikan setiap function yang

memiliki anotasi @Composable.

Kemudian dalam function tersebut, dilihat dapat memanggil

function @Composable lain di dalamnya.
Mengapa perlu Jetpack Compose

Jetpack Compose dapat memanggil

fungsi compose lain untuk memberi
dukungan khusus.

Walaupun begitu, fitur ini terbilang

baru dan masih dalam perkembangan.

Lalu, kenapa sih harus menggunakan

Jetpack Compose?
 Mengapa
PM 101 perlu Jetpack Compose

Mengapa Jetpack Compose?

Saat menggunakan fitur baru, tentu pertanyaan kita pertama
kali adalah, Kenapa kita harus menggunakan fitur tersebut?

Jawabannya, ada kegunaan Jetpack Compose yang tidak

dimiliki oleh toolkit lain.

Berikut ini kita bahas 4 poin yang membuat Jetpack

Compose sangat diminati~
 Mengapa
PM 101 perlu Jetpack Compose

Less Code

Menulis kode yang lebih sedikit akan mempengaruhi semua

tahap development.

Sebagai developer kita jadi bisa fokus pada masalah lain

dengan lebih sedikit pengujian dan debug, serta lebih sedikit
kemungkinan bug.

Sebagai developer, tentu saja kita memilih kode yang sedikit

tetapi berguna.
 Mengapa
PM 101 perlu Jetpack Compose

Kode yang ditulis dengan Compose cukup sederhana dan

mudah dipelihara apapun yang telah kita buat.

Sistem layout Compose secara konseptual lebih sederhana

sehingga lebih mudah untuk dipikirkan.

Dengan keunggulan tersebut, membaca kode untuk

komponen yang rumit menjadi lebih mudah.
 Mengapa
PM 101 perlu Jetpack Compose

Intuitive

Compose menggunakan API yang deklaratif, yang berarti kita

hanya perlu mendeskripsikan tampilan UI saja dan biarkan
Compose yang akan menangani sisanya.

Dengan Compose, kita membuat komponen kecil tanpa

status yang tidak terikat pada Activity atau Fragment
tertentu. Hal ini mempermudah penggunaan kembali dan
diuji.
 Mengapa
PM 101 perlu Jetpack Compose

Dalam Compose, state adalah eksplisit dan diteruskan ke

composable.

Dengan begitu, hanya ada satu sumber saja yang digunakan.

Bahkan, ketika ada perubahan state, Compose akan secara
otomatis memperbarui UI yang telah dideskripsikan.
 Mengapa
PM 101 perlu Jetpack Compose

Accelerate Development

Compose kompatibel dengan semua kode yang ada.

Misalnya, kita dapat memanggil kode Compose dari Views
dan memanggil Views dari Compose.

Beberapa library yang umum digunakan seperti

Navigation, ViewModel, dan Coroutine juga sudah
compatible dengan Compose.

Nggak cuma itu, dengan menggunakan dukungan penuh

dari Android Studio, fitur-fitur seperti live preview dapat
digunakan layaknya menggunakan XML.
Mengapa
PM 101 perlu Jetpack Compose

Powerful

Compose memungkinkan kita membuat aplikasi secantik

mungkin dengan akses langsung ke API platform Android.

Selain itu, Compose mendukung Material Design, Dark

Theme, Animations, dan lainnya.
 Mengapa
PM 101 perlu Jetpack ComposeJetpack Compose

Gimana Jetpack Compose? Keren

kan?
Dengan 4 poin tadi, Jetpack Compose diminati dan
digunakan pada berbagai aplikasi.

Selain, itu Jetpack Compose juga merupakan salah satu usaha

Google mengejar tren dalam pembuatan UI.

Tren apakah itu?

 Mengapa
PM 101 perlu Jetpack Compose

Usaha Google terjun ke tren

“Declarative UI”
Jetpack Compose merupakan sebuah usaha dari Google
untuk ikut terjun ke dalam tren Declarative UI dalam
pengembangan Android native.

Sebenarnya usaha ini cukup terlambat dari Google jika kita

bandingkan dengan perjalanan Flutter, ReactNative, dan
SwiftUI. Walaupun demikian, better late than never kan?

Agak balik ke paragraf pertama, kamu udah paham belum

maksudnya Declarative UI?
Mengapa
PM 101 perlu Jetpack Compose

Lalu, apa sih Declarative UI itu?

Declarative UI merupakan kode yang kita tulis untuk

mendeskripsikan UI yang ingin ditampilkan, bukan tentang
bagaimana berpindah antar state pada UI.

Kita tidak perlu memikirkan state sebelum UI, cukup

tentukan state saat ini. Jetpack Compose akan menangani
bagaimana perubahan state itu dilakukan.

Sehingga dari hal tersebut bisa disimpulkan bahwa

Declarative UI akan lebih berfokus pada APA ketimbang
BAGAIMANA.
Fungsi Composable

Nggak cuma itu, Jetpack Compose

memiliki Fungsi Composable dengan
beragam fitur yang membuat doi
makin unggul!
 PM 101 Composable
Fungsi

Apa itu fungsi @Composable?

Pada Jetpack Compose, fungsi Composable digunakan untuk
mendefinisikan semua UI aplikasi kita secara terprogram. Jadi
kita tidak perlu menggunakan file XML apapun lagi untuk
layouting.

Yang kita butuhkan untuk membuat fungsi composable

hanya dengan menggunakan anotasi @Composable pada
nama fungsi.

Sintaks dasar dari fungsi Composable bisa dilihat pada

gambar disamping.
 PM 101 Composable
Fungsi

Fungsi UI-nya ada banyak loh!

Untuk topik ini, kita akan belajar beberapa fungsi UI dalam
@Composable, yaitu:

● Mengatur Tampilan Text

● Membuat Berbagai Tampilan View UI

● Membuat Tampilan dari Material Design

● Memunculkan Preview UI

● Beberapa Fitur penting Android lainnya

Fungsi yang disebutkan diatas sekaligus jadi jembatan kita

masuk ke tahap implementasi. Yuk kita coba eksplor satu per
satu!
Jetpack Compose - Tampilan Text di UI

Sebagaimana urutan yang dipaparkan

tadi, Fungsi pertama yang akan
dipelajari adalah :

󰗔 Membuat Tampilan Text dalam UI

PM 101 Compose - Tampilan Text di UI
Jetpack

Membuat Text UI dengan Jetpack Compose

Sebelumnya, kita sudah banyak belajar cara mendisplay text dalam UI, terutama dengan XML.
Jetpack compose yang baru dikembangkan ini juga bisa loh untuk mengatur tampilan teks di UI kita!

Beberapa contoh pengaturannya akan kita bahas disini~

 PM 101 Compose - Tampilan Text di UI
Jetpack

Menampilkan Teks Sederhana

Untuk menampilkan teks, kita menggunakan Text

Composable dimana nanti di dalamnya kita memasukkan
String yang ingin kita tampilkan.

Sebagai Contoh, perhatikan syntax di samping.

Di sini, function SimpleText() adalah Composable Function

lalu di dalamnya kita menggunakan Text dan meneruskan
displayText ke dalamnya.
 PM 101 Compose - Tampilan Text di UI
Jetpack

Sekarang kita dapat memanggil function SimpleText() ini

dari blok setContent() yang ada di onCreate(), seperti
contoh di samping:

Di sini kita menggunakan Column yang digunakan untuk

menampilkan beberapa konten secara vertikal.

Untuk itu, kita memanggil function SimpleText

Composable.
PM 101 Compose - Tampilan Text di UI
Jetpack

Menerapkan Styling pada Text

Sama seperti saat kita menggunakan XML, pada Compose kita juga dapat menerapkan styling
seperti memperbesar font, mengubah warna, dll. Caranya dengan function SetTextStyling().

displayText adalah teks yang akan

ditampilkan, sedangkan style adalah
gaya/styling yang akan diterapkan.

Lalu maxLines adalah jumlah baris yang

diperbolehkan untuk text.

Jika text lebih dari maxLines, maka akhir

kalimat akan menampilkan ellipsis, atau
lambang titik-titik (...) di belakang teks.
 PM 101 Compose - Tampilan Text di UI
Jetpack

Function SetTextStyling()memiliki beberapa parameter

untuk kita mengatur styling teks. Beberapa diantaranya untuk
mengatur / mengubah :

● Ukuran font

● Ketebalan font, masukkan text-style

Mengatur ukuran font
● TextColor,

● Font-family,

● Menggarisbawahi teks,

● dll.

Sekalian belajar dokumentasi, selengkapnya bisa dilihat disini:

Text in Compose - Jetpack

Mengatur ketebalan font, berikan text-style
PM 101 Compose - Tampilan Text di UI
Jetpack

Menerapkan EditText dengan TextField

Sama seperti EditText, di Compose kita bisa

menggunakan TextField() dan BaseTextField().

BaseTextField() masih experimental dan dapat dihapus

atau ditambahkan secara permanen kapan saja.

Jadi, untuk menggunakan BaseTextField() kita perlu

menambahkan anotasi @ExperimentalFoundationAPI.

Disamping adalah contoh sederhana dari penerapan

BaseTextField.
 PM 101 Compose - Tampilan Text di UI
Jetpack

Pada function di samping, kita memiliki

BaseTextField() di dalam Surface(). Kita memiliki
callback beranama onValueChange.

Callback ini dipanggil ketika ada beberapa perubahan

dalam input ke BaseTextField() dan teks yang
diperbarui akan datang sebagai parameter dari callback.
 PM 101 Compose - Tampilan Text di UI
Jetpack

Material Design juga menyediakan satu Composable untuk

EditText dengan nama TextField().

TextField() mirip dengan BaseTextField(). Bedanya,

TextField() memiliki satu fitur lagi yaitu label. Label adalah
text yang ditampilkan dalam TextField() saat tidak ada teks
di dalamnya.

Implementasi sederhana dari TextField dapat kita lihat

seperti kode di samping.
PM 101 Compose - Tampilan Text di UI
Jetpack

BaseTextField() TextField()

Oiya, nggak cuma itu!

Kita juga dapat melakukan costumisasi BaseTextField()

dan TextField()dengan passing berbagai parameter ke
dalamnya.

Supaya mempermudah, kita lihat kode dalam bentuk

tabel ya!
PM 101 Compose - Tampilan Text di UI
Jetpack

Perintah Kode

Hanya menampilkan keyboard numerik

Ambil kata sandi sebagai input

menambahkan placeholder di TextField:

PM 101 Compose - Tampilan Text di UI
Jetpack

Masih ngomongin costumisasi BaseTextField() dan

TextField(), ada beberapa parameter lainnya yang bisa
kamu lakukan seperti:

● menambahkan icon,

● menampilkan error message di TextField,

● mengatur errorColor,

● Menentukan backgroundColor,

● Mengatur intractionState,

● Menentukan activeColor atau inactiveColor,

● dll.
Jetpack Compose - Tampilan View / Layouting UI

Sipp, cara nampilin Text sebagai

Composable Function udah selesai.

Kedua, kita lihat bagaimana Mengatur

Tampilan View UI.

Yuk lihat beberapa contohnya!

 PM 101 Compose - Tampilan View / Layouting UI
Jetpack

Tampilan View UI dengan Jetpack

Compose
Yep, kita sebenarnya sudah pernah belajar membuat
tampilan UI atau layouting via XML di Chapter sebelumnya.
Jetpack Compose akan lebih memudahkan kita untuk
membuat tampilan view ini.

Berikut kita akan belajar beberapa bentuk layouting dan

kebutuhan UI lain:

- Column
- Scrollable Column
- Box
-
 PM 101 Compose - Tampilan View / Layouting UI
Jetpack

Column

Column adalah composable layout yang digunakan untuk menempatkan semua children secara vertikal satu demi satu.
Jika kita bandingkan dengan penggunaan XML, ini sama seperti LinearLayout dengan orientasi vertikal.

Di bawah ini adalah contoh syntaxnya :

 PM 101 Compose - Tampilan View / Layouting UI
Jetpack

Scrollable Column

Bila kita menggunakan Column sederhana, maka kita akan

dibatasi dengan ketinggian layar ponsel saja. Oleh karena
itu, jika ada konten yang keluar dari layar, maka dapat
menggunakan ScrollableColumn.

ScrollableColumn sama saja seperti ScrollView jika kita

menggunakan XML. Contoh sintaksnya bisa cek di sini 󰗔
 PM 101 Compose - Tampilan View / Layouting UI
Jetpack

Box

Box adalah layout composable yang digunakan untuk menempatkan relative children terhadap tepinya.

Awalnya, Stack digunakan sebagai pengganti Box. Tetapi sekarang, Stack sudah tidak digunakan lagi dan digantikan oleh
Box.
 PM 101 Compose - Tampilan View / Layouting UI
Jetpack

Seperti namanya, children ditempatkan di dalam parent.

Children di dalam Box digambarkan dalam urutan yang

ditentukan. Apabila children lebih kecil dari parent, maka
mereka akan ditempatkan di dalam Kotak secara default
berdasarkan alignment.

Disamping adalah contoh sintaks dari Box.

PM 101 Compose - Tampilan View / Layouting UI
Jetpack

Card

Card adalah layout composable yang digunakan untuk

membuat CardView. Contoh sintaksnya bisa dilihat di
samping.
Jetpack Compose

Setelah belajar menampilkan teks dan

mengatur tampilan view UI,
selanjutnya kita Mengatur Tampilan
Material Design.

Gimana sih caranya?

 PM 101 Compose - Material Design UI
Jetpack

Material AppBar

Material AppBar digunakan untuk menampilkan

AppBar pada Android. Kita dapat menggunakan
TopAppBar atau BottomAppBar pada aplikasi kita.

Di sini, kita dapat memiliki judul (umumnya nama

aplikasi atau nama screen), beberapa icon navigasi,
dan beberapa action yang ada di AppBar.

Disamping ini adalah contoh penerapannya :

 PM 101 Compose - Material Design UI
Jetpack

Material BottomNavigation

Tentunya sudah familiar dengan BottomNavigation, sama

seperti di XML.

Material BottomNavigation digunakan untuk memiliki

beberapa action penting pada aplikasi di bagian bawah layar,
sehingga aplikasi mudah diakses oleh user.
PM 101 Compose - Material Design UI
Jetpack

Untuk menambahkan item ke BottomNavigation, kita perlu

menggunakan BottomNavigationItem composable seperti
berikut 󰗔

Untuk menggunakan BottomNavigation tanpa label, kita

dapat menggunakan ”`alwaysShowLabels = false“ pada
BottomNavigation.
 PM 101 Compose - Material Design UI
Jetpack

Material CheckBox

Checkbox digunakan ketika kita memiliki 2 opsi atau lebih,

dimana user dapat memilih atau membatalkan pilihan yang
ditawarkan. Berikut merupakan contoh penerapannya:

onCheckedChange merupakan callback yang digunakan untuk

mengidentifikasi perubahan pada checkbox.
 PM 101 Compose - Material Design UI
Jetpack

Material ProgressBar

ProgressBar digunakan untuk menunjukkan beberapa

kemajuan atau progress yang sedang terjadi saat ini pada
aplikasi. Misalnya, progress download atau loading data
pada server.

Kita bisa membuat Circular ProgressBar atau Linear

ProgresBar.
 PM 101 Compose - Material Design UI
Jetpack

Berikut adalah contoh sintaks untuk Circular ProgressBar.

Kita juga dapat mengatur kemajuan dari progress dengan

menggunakan progress = 0.4f. Tentunya kita juga dapat
menggunakan LinearProgressIndicator.
Jetpack Compose

Sipp deh!!

Fungsi yang terakhir, kita belajar cara

menyisipkan unsur UI umum.

Yuk kita lihat beberapa contohnya!

PM 101 Compose
Jetpack

Button

Sama seperti pada XML, Button digunakan untuk melakukan beberapa action saat user melakukan klik.

Function Text digunakan untuk

Function onClick digunakan untuk
meletakkan beberapa teks di atas
melakukan action pada Button.
Button.
 PM 101 Compose - Tampilan View / Layouting UI
Jetpack

Dengan melakukan passing berbagai parameter ke Button,

kita dapat costumize secara leluasa. Beberapa di antaranya
adalah:

● Membuat sudut membulat pada Button

● Membuat Button dengan border

● Menambah beberapa icon ke Button,

● menerapkan warna ke Button (cont.)

 PM 101 Compose - Tampilan View / Layouting UI
Jetpack

● menonaktifkan Button,

● membuat Button dengan outline,

● membuat IconButton,

● membuat FAB,

Contoh sintaks untuk beberapa parameter bisa cek gambar

disamping.
 PM 101 Compose
Jetpack

Clickable

Kita dapat membuat composable react untuk

pengguna dengan menggunakan Clickable.

Clickable mendukung one-time klik, double klik, dan

long press.

Selain itu, kita juga dapat membuat sebuah Card yang

dapat di klik.
PM 101 Compose
Jetpack

Image

Seperti namanya, Image adalah function yang digunakan

untuk menampilkan Image.
PM 101 Compose
Jetpack

Atau, kalau kita mau membuat Kita dapat membuat image

dengan sudut yang membulat (rounded) dengan
menggunakan kode di samping ini 󰗔
PM 101 Compose
Jetpack

AlertDialog

Seperti namanya, AlertDialog digunakan untuk

menampilkan beberapa pesan penting (yang mungkin
memiliki beberapa action) kepada user dalam bentuk
dialog.

Tentunya sudah familiar ya dengan penggunaan dialog

ketika kita menggunakan XML?

Pada AlertDialog, kita memiliki judul, teks, button

konfirmasi, dan button cancel.

Disamping ini merupakan contoh penerapannya.

Jetpack Compose

Manteup!! Fungsi ketiga udah rapung.

Selanjutnya, kita lihat bagaimana cara

Memunculkan Preview UI.

Ohiya.. kalau pakai Compose, akan

makin mudah cek Preview-nya loh~
PM 101 Compose
Jetpack

Preview dengan Jetpack Compose

Android Studio menyediakan fitur untuk melihat preview UI
component kita di Android Studio.

Fitur ini secara dinamis akan berubah. Sehingga kapanpun

kita ingin menguji beberapa UI component, kita cukup
melakukan preview di Android Studio dengan membuat
function Composable Function dan menambahkan anotasi
@Preview.

Untuk prakteknya, kita akan coba display text “Hi I am

learning Compose” dalam mode preview UI.
 PM 101 Compose
Jetpack

Sintaks yang akan di

Display dalam Preview

Sekarang, pada preview tab (sebelah kanan Android Studio),

kita dapat melihat preview function Composable di samping.

Kita dapat menggunakan preview sebanyak yang diinginkan

dengan lebar, dan tinggi yang berbeda.

Jika kita mengklik salah satu elemen UI di preview, maka

Android Studio akan membawa kita ke baris tempat UI
dibuat.

Display sintaks untuk di

preview
 PM 101 Compose
Jetpack

Kita juga dapat memasukkan beberapa nama ke Preview

dengan menggunakan parameter name.

Secara default, nama dari preview adalah nama function.

Untuk memberi nama preview, kita hanya perlu

menambahkan syntax di seperti disamping 󰗔
PM 101 Compose
Jetpack

Berikut adalah contoh fitur preview yang ada di Android Studio jika kita menggunakan Jetpack Compose.

Catatan: Kita dapat mem-passing parameter apapun ke function Preview Composable.

 PM 101 Compose
Jetpack

Preview Parameter

Ketika membuat aplikasi Android, pada sebagian besar kasus,

data biasanya berasal dari server yang membuat kita perlu
mengisi data tersebut di aplikasi kita.

Pertanyaannya adalah, bagaimana menampilkan UI yang

datanya berasal dari server? yakni data yang belum tersedia
ketika UI tersebut ditampilkan.

Untuk situasi ini, ada jawabannya. Kita dapat menggunakan

anotasi @PreviewParameter.
PM 101 Compose
Jetpack

Ide utamanya adalah membuat data dummy dan passing

data dummy tersebut ke Preview Composable Function.

Berhubung kita tidak bisa mem-passing parameter ke

Preview Composable Function, penggantinya adalah dengan
mem-passing parameter menggunakan anotasi
@PreviewParameter.
 PM 101 Compose
Jetpack

Untuk dapat melakukan hal tersebut, pertama-tama kita buat

kelas data dummy terlebih dahulu.

Buatlah kelas data bernama Blog.kt dan tambahkan kode di

samping ini ke dalamnya :
 PM 101 Compose
Jetpack

Setelah itu, buat kelas bernama DummyBlogProvider

yang akan mengimplementasikan interface
bernama PreviewParameterProvider.

Selanjutnya, kita sudah dapat menggunakan data

dummy ini preview kita. Contohnya cek sintaks
disamping.

Kita dapat melihat preview pada UI dengan data

dummy yang telah dibuat.
Jetpack Compose

Demikian materi kita mengenai

Jetpack Compose.

Last but not least, penggunaan Jetpack

Compose itu masih banyak dan luas.

Untuk pembelajaran lebih lanjut, kita

dapat lihat contoh project di sini.
GitHub - Mindorks Open Source /
Jetpack-Compose-Android-Examples
Tugas
PM 101

Biar Makin Paham, kita ikut

challenge ini dulu yuu~
Masih pegang project Challenge sebelumnya tentang
aplikasi pencatatan itu?

Coba kamu susun tampilan UI dari aplikasi pencatatan

tersebut hanya dengan menggunakan toolkit Jetpack
Compose.

Untuk fitur-fitur yang belum kita pelajari, bisa kamu

baca-baca dokumentasinya di link berikut:

Get started with Jetpack Compose | Android Developers

Bentuk viewnya bisa di kreasikan sesuai dengan preferensi

masing-masing yaa~
 Referensi
PM 101 dan bacaan lebih lanjut

Referensi dan bacaan lebih lanjut~

1. Jetpack Compose Tutorial - Step by Step Guide

2. Mengenal Jetpack Compose di Android

3. Jetpack Compose Tutorials

4. Jetpack Compose Tutorial

5. Jetpack Compose Tutorial for Android: Getting Started |

raywenderlich.com

6. Understanding Jetpack Compose — part 1 of 2 | Android

Developers

74
 Penutup

Nah, selesai sudah pembahasan kita di

Chapter 8 Topic 1 ini.

Selanjutnya, kita bakal bahas Deployment

Aplikasi ke Playstore.

Penasaran kayak gimana? Cus langsung

ke topik selanjutnya~