Tugas 7 PPB

TUGAS 7 PPB

ANIMATED WATER BOTTLE

Nama: Muhammad Lintang Panjerino

NRP: 5025201045

Kelas: PPB I

Tahun: 2024

Link Github: Tugas 7 - Animated Water Bottle

Pada Tugas 7 PPB kali ini, diberikan tugas untuk membuat proyek menggambar Animated Water Bottle pada canvas dengan menggunakan Jetpack Compose pada Android Studio. Secara garis besar, aplikasi Animated Water Bottle ini merupakan animasi pengisian botol air. Ketika suatu tombol ditekan, maka di dalam botol akan terisi air dengan efek animasi. Proyek ini bertujuan untuk mempelajari lebih dalam tentang konsep Box, Canvas, Path, Button, Text, dan Column pada Jetpack Compose. Selain itu, proyek ini juga mencakup implementasi tentang materi Modifier, Spacer, remember, animateFloatAsState, animateIntAsState, moveTo, lineTo, quadraticBezierTo, withStyle, size, width, height, dan clipPath.

Untuk memulai pengerjaan proyek, langkah awal yang dilakukan adalah membuat proyek baru. Pada Android Studio, pilih "New Project" > pilih "Phone and Tablet" > pilih "Empty Activity" > pilih "Next". Kemudian pada window Empty Activity isi nama aplikasi yang akan dibuat, contohnya pada proyek ini judul aplikasi adalah "Animated Water Bottle" dengan Minimum SDK berupa API 24 (Nougat).

Pada file MainActivity.kt, hapus fungsi Greeting, pemanggilan fungsi Greeting, dan preview fungsi Greeting sehingga hanya menyisakan fungsi onCreate dengan lambda setContent yang kosong. Selain itu, hapus juga komponen import yang tidak dibutuhkan. Kemudian, buat file baru bernama WaterBottle.kt yang masih satu folder dengan file MainActivity.kt. Di dalam file baru WaterBottle.kt, buat fungsi baru dengan nama WaterBottle yang diberi anotasi Composable. Isi parameter fungsi WaterBottle dengan modifier, totalWaterAmount (int), unit (string), usedWaterAmount (int), waterColor, bottleColor, capColor. Pada body function, isi dengan sebuah fungsi Box (dengan width 200 dp dan height 600 dp) dan dalam Box tersebut panggil fungsi Canvas (dengan modifier fillMaxSize).

Secara keseluruhan, aplikasi Animated Water Bottle ini terbagi menjadi 5 tahap, yaitu menggambar botol kosong, menggambar air/minuman di dalam botol, membuat tombol pengisi air, menggambar tutup botol, dan membuat indikator isi botol. Berikut adalah detail kelima tahap tersebut

Pada tahap pertama, di dalam fungsi Canvas, buat 2 variabel width dan height yang nilainya berturut-turut diambil dari size.width dan size.height. Selain itu, buat sebuah Path dengan nama bottleBodyPath yang nantinya akan digunakan untuk pola gambar botol minum. Untuk menggambar botol minum, digunakan beberapa fungsi: moveTo(x,y) digunakan sebagai titik awal di mana pola gambar akan dimulai, lineTo(x,y) digunakan untuk menggambar garis lurus berdasarkan koordinat (x,y), quadraticBezierTo(x1,y1,x2,y2) digunakan untuk menggambar garis yang berbentuk kurva (melengkung). Panggil fungsi clipPath() dengan isi path yaitu bottleBodyPath. Sedangkan di dalam fungsi tersebut panggil fungsi drawRect untuk menggambar pola gambar botol. Kemudian pada file MainActivity.kt, buat terlebih dahulu sebuah kolom dengan memanggil fungsi Column yang memiliki argumen horizontalAlignment = Alignment.CenterHorizontally dan verticalArrangement = Arrangement.Center supaya kolom berada di tengah. Di dalam kolom tersebut, panggil fungsi WaterBottle dengan isi argumen totalWaterAmount=0, unit = "", usedWaterAmount = 0, dan modifier = Modifier.width(250.dp). Hasil dari tahap 1 adalah berupa gambar botol putih kosong yang dapat dilihat pada gambar di bawah.

Pada tahap kedua, buat variabel baru dengan nama waterPercentage untuk menghitung persentase jumlah minuman di dalam botol. Variabel ini nanti akan digunakan untuk menggambar banyak air/minuman di dalam botol. Pada deklarasi variabel, panggil fungsi animateFloatAsState dengan nilai targetValue adalah usedWaterAmount.toFloat() / totalWaterAmount.toFloat() yang merupakan jumlah air dibagi dengan kapasitas botol yang dikonversi ke tipe data float. Langkah selanjutnya adalah menggambar air/minuman di dalam botol. Pertama, buat variabel waterWavesYPosition yang nilanya adalah (1 - waterPercentage) * size.height. Kemudian, buat variabel path dengan nama waterPath untuk membuat pola gambar air/minuman di dalam botol. Untuk menggambarnya, panggil fungsi drawPath dengan path waterPath dan warna waterColor. Hasil tahap kedua dapat dilihat pada gambar di bawah. Gambar menunjukkan bahwa botol sudah dapat terisi sebagian.

Pada tahap ketiga, di file MainActivity.kt, buat 2 variabel baru yaitu usedAmount yang merupakan nilai jumlah air/minuman di dalam botol dan totalWaterAmount yang merupakan kapasitas penuh botol. Kemudian di bawah pemanggilan fungsi WaterBottle, buat sedikit jarak spasi menggunakan fungsi Spacer dan buat teks dengan isi "Total amount is : $totalWaterAmount". Di bawahnya, buat tombol dengan isi teks "Drink". Fungsi onClick yang ada pada tombol diisi dengan penambahan nilai variabel usedAmount -> { usedAmount += 200 }. Hasil pada tahap ini dapat dilihat pada gambar di bawah. Gambar botol sebelah kiri menunjukkan isi botol di awal, sedangkan gambar botol sebelah kanan menunjukkan adanya penambahan jumlah air/minuman di dalam botol setelah tombol "Drink" diklik.

Pada tahap keempat, buat 2 variabel capWidth dan capHeight yang merupakan lebar dan tinggi dari tutup botol. Masih di dalam fungsi Canvas, di bawah fungsi clipPath, panggil fungsi drawRoundRect untuk menggambar tutup botol berbentuk persegi panjang dengan sudut bulat. Isi argumen color dan size dengan warna dan ukuran tutup botol. Kemudian isi argumen topLeft dengan nilai Offset(x = size.width/2 - capWidth / 2f, y = 0f) supaya tutup botol berada tepat di tengah botol. Hasil tahap keempat, yaitu botol dengan tutupnya dapat dilihat pada gambar di bawah.

Pada tahap kelima, buat variabel baru dengan nama usedWaterAmountAnimation untuk menghitung jumlah minuman di dalam botol dalam unit tertentu. Variabel ini nanti akan digunakan untuk menentukan warna tulisan indikator ketika botol diisi dengan air/minuman. Pada deklarasi variabel, panggil fungsi animateIntAsState dengan nilai targetValue adalah usedWaterAmount yang merupakan jumlah air/minuman di dalam botol dan nilai animationSpec adalah tween 1200 milidetik. Di bawah fungsi Canvas, tapi masih di dalam fungsi Box, buat variabel dengan nama textIndicator yang memanggil fungsi buildAnnotatedString. Di dalamnya buat tulisan indikator menggunakan spanStyle dengan warna yang berubah. Ketika isi air/minuman di dalam botol kurang dari setengah akan berwarna seperti warna air/minuman, sedangkan ketika isi lebih dari setengah teks indikator akan berwarna putih supaya teks tetap terlihat jelas. Hasil pada tahap terakhir ini dapat dilihat pada gambar berikut.

Sebagai inovasi, saya menambahkan satu fitur reset yang dapat me-reset jumlah air/minuman di dalam botol kembali menjadi 0 ml. Hal ini bermanfaat karena kita tidak perlu "Reload App" pada Android Studio untuk mengembalikan isi menjadi 0 ml. Hanya dengan satu kali klik tombol "Reset" maka air/minuman di dalam botol kembali menjadi 0 ml. Langkahnya adalah di file MainActivity.kt, buat sebuah baris dengan memanggil fungsi Row dan masukkan tombol "Drink" ke dalamnya. Di bawah tombol "Drink" buat Spacer dengan ukuran 20 dp. Kemudian, di bawahnya buat tombol lagi dengan memanggil fungsi Button dengan isi teks "Reset" dan isi fungsi onClick adalah { usedAmount = 0 }. Berikut merupakan hasil akhir dari aplikasi Animated Water Bottle.