Histori Belajar Jetpack Compose: Bentuk Grafik — Part 2

Akbar Hamonangan Lubis
3 min readNov 29, 2022

--

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

Jadi ini merupakan lanjutan dari artikel sebelumnya, yang membahas tentang apa itu Jetpack Compose.

Pada kesempatan kali ini kita akan mencoba membuat bentuk grafik seperti Lingkaran, Oval, Garis, dan Kubus. Bagaimana langkah-langkah pembuatan dan kegunaannya akan dipelajari pada chapter kali ini.

Sebelum memulai pembuatan, siapkan sebuah fungsi dengan nama CanvasKu menggunakan library Canvas sebagai wadah untuk membuat shape atau bentuk.

Lalu tambahkan panggil variabel fungsi tersebut di setcontent theme dan compose preview dengan nama PreviewKu

Menambahkan di Setcontent | Sumber: Dokumentasi Pribadi
Gambar 6: Menambahkan di PreviewKu | Sumber: Dokumentasi Pribadi

Maka setelah di build hasilnya akan seperti ini:

Bentuk Lingkaran

Untuk membuat bentuk lingkaran, tambahkan 2 variabel baru, yaitu canvasWidth dan canvasHeight yang bertujuan untuk memudahkan dalam proses pengkodingan.

lalu setelah itu buat variabel shape dengan nama drawCircle yang dengan isinya seperti ini

setelah di run maka hasilnya seperti ini:

Bentuk Oval

Untuk membuat oval, buat variabel shape dengan nama “drawOval” lalu isi color, style, dan topLeft seperti pada codingan dibawah ini

jika sudah lakukan preview, maka hasilnya seperti ini pada canvas:

Bentuk Garis

Untuk membuat garis, buat variabel shape baru dengan nama drawLine lalu isi start, end color dan strokeWidth seperti pada gambar dibawah ini:

jika sudah berhasil terisi tanpa ada error, maka hasilnya akan seperti ini

Bentuk Kubus

Untuk membuat kubus, buat variabel shape dengan nama drawRect lalu isi color, size dan topLeft seperti dibawah ini

maka akan menambahkan shape kotak seperti berikut

kemudian untuk membuat bentuk bertumpuk seolah-olah seperti kubus, dengan menambahkan 3 shape lagi dengan isinya seperti pada gambar dibawah ini

maka setelah di build and run, hasilnya akan seperti dibawah ini:

Terima kasih telah membaca, semoga harimu menyenangkan!

--

--