Tugas 8 Water Bottle
Nama : Muhmad Faiz Fernanda
Kelas : PPB-A
NRP : 5025211186
Aplikasi Botol Air
Aplikasi ini meningkatkan jumlah mililiter air yang telah diminum hingga mencapai 5000 ml setiap kali tombol Drink ditekan. Untuk mencapai hal tersebut, berikut penjabaran dari struktur dan kode pembangun aplikasi:
1. Kelas MainActivity
Pada kelas MainActivity, tampilan aplikasi dibangun menggunakan fungsi setContent yang menerapkan tema khusus bernama WaterbottleTheme. Seluruh antarmuka dibungkus dalam sebuah Surface yang mengisi seluruh layar dengan latar belakang sesuai tema.
Di dalam setContent, terdapat variabel state:
-
usedWaterAmount: Menyimpan nilai jumlah air yang telah diminum (nilai awal 100) dan akan bertambah setiap kali tombol Drink ditekan.
-
totalWaterAmount: Menetapkan kapasitas total botol sebesar 2500 ml, yang nilainya bersifat tetap.
Seluruh komponen UI disusun secara vertikal dengan menggunakan Column yang menempatkan elemen-elemen seperti tampilan visual botol air (melalui komponen kustom WatterBottle), teks yang menampilkan kapasitas total air, dan tombol Drink. Saat tombol ditekan, nilai usedWaterAmount bertambah 200 ml, dan konsep reaktif Jetpack Compose memastikan bahwa seluruh tampilan yang bergantung pada nilai ini otomatis terupdate.
2. Komponen Kustom: Fungsi WatterBottle
Fungsi WatterBottle merupakan komponen khusus yang dibuat dengan Jetpack Compose untuk menggambarkan visualisasi botol air lengkap dengan animasi isi air. Fungsi ini menerima parameter seperti:
-
totalWaterAmount: Kapasitas total air.
-
usedWaterAmount: Jumlah air yang sudah diminum.
-
unit: Satuan ukuran (misalnya ml).
-
Warna untuk berbagai bagian botol, seperti air, tubuh botol, dan tutup botol.
Di dalam fungsi ini, terdapat dua animasi:
-
waterPercentage: Menghitung persentase air yang sudah diminum dibandingkan dengan kapasitas total. Animasi ini memberikan efek transisi yang halus pada tampilan isi botol.
-
usedWaterAmountAnimation: Menampilkan angka jumlah air yang telah diminum dengan animasi transisi agar perubahan angka terlihat dinamis.
Gambar botol air dibuat dengan menggunakan Canvas. Di sini, suatu Path digunakan untuk membentuk tubuh botol dengan lekukan khas. Setelah itu, bagian isi air digambarkan sebagai area warna yang naik turun sesuai dengan nilai waterPercentage—efek ini menyerupai gelombang air di dalam botol. Selain itu, bagian tutup botol juga digambar menggunakan fungsi drawRoundRect dengan radius sudut agar terlihat membulat.
Di tengah botol, terdapat teks yang menampilkan angka air yang telah diminum beserta satuannya. Warna teks disesuaikan agar kontras dengan kondisi warna air: jika persentase air cukup tinggi, maka warna teks akan berubah agar tetap mudah dibaca.
Kesimpulan
Dengan memanfaatkan Jetpack Compose, aplikasi ini berhasil mengimplementasikan antarmuka yang deklaratif dan reaktif. Pemisahan antara logika UI dan elemen animasi memungkinkan perubahan data, seperti penambahan jumlah air ketika tombol Drink ditekan, langsung tercermin pada tampilan secara otomatis tanpa perlu intervensi manual. Pendekatan ini tidak hanya membuat kode menjadi lebih terstruktur dan mudah dipelihara, tetapi juga meningkatkan interaksi pengguna melalui efek visual yang dinamis dan responsif.
Komentar
Posting Komentar