Tugas 7: Latihan Material Design Android dengan Aplikasi Water Bottle

Nama     : Helsa Nesta Dhaifullah

NRP       : 5025201005
Kelas      : PPB I - 2024
Github   : Link repository

Haloo gaiss!!! Kembali lagi di Blog Catatan Ruang Kuliah. Pada kesempatan kali ini kita akan membahas mengenai  tutorial implementasi matri "Material Design Android" pada aplikasi Water Bottle dengan jetpack compose.  Aplikasi tersebut akan menampilkan gambar botol berisikan air yang akan terus meningkat volumenya ketika button bertuliskan "Drink" ditekan oleh pengguna. Volume air tidak akan melebihi batas maksimum tinggi botol / tutup botol. 

Berikut adalah hasil demo aplikasi Water Bottle yang akan kita buat kali ini. 

Tampilan Antarmuka Aplikasi Water Bottle

TUTORIAL

1. Membuat Project Baru
   
   Langkah pertama yang harus dilakukan saat akan membuat aplikasi Android menggunakan Android Studio adalah membuat project baru. Buka Android Studio kalian kemudian pilih untuk buat project baru dengan template empty activity. Beri nama aplikasi yang akan dibuat sesuai keinginan kalian, namun sesuai dengan aplikasi yang akan dibuat, misalnya disini saya menetapkan nama aplikasinya adalah WaterBottleApplication.
   
   

   

   Buat project baru dengan template Empty Activity

   
   

   

   Beri nama project baru
   

2. Hapus Fungsi Greeting
   
   Setelah gradle Android Studio selesai proses build, kalian akan melihat adanya fungsi Greeting() di MainActivity.kt sebagai default ketika membuat project baru. Kita tidak membutuhkan fungsi Greeting() karena kita akan membuat fungsi composable sendiri untuk membentuk UI dari aplikasi Water Bottle di langkah selanjutnya.
   

   

   Menghapus fungsi Greeting() di MainActivity.kt
   
   

   

   Buat File Kotlin untuk membangun fungsi Composable UI aplikasi

   
   
3. Buat Box untuk Konten Aplikasi Water Bottle
   Dalam fungsi Composable WaterBottle, bentuk Box dengan ukuran 200 * 600 dp untuk isi konten aplikasi, yaitu gambar botol dan tombolnya. Yang dilakukan pertama kali setelah membentuk Box adalah membuat gambar botol dengan API Canvas.
   

   

   Fungsi Box untuk Konten Aplikasi WaterBottle

   
   
4. Gambar Bagian Body Botol dengan API Canvas
   
   API Canvas menyediakan berbagai fungsi yang dapat digunakan untuk membentuk bangun datar maupun bangun kustom. Untuk mulai menggambar, tuliskan fungsi Path().apply{...} dalam sebuah variabel, dimana didalam apply adalah bentuk bangun yang akan digambarkan. Beberapa fungsi yang digunakan untuk menggambar bentuk botol adalah:
   
   
   📌 Fungsi moveTo untuk memindahkan titik koordinat X dan Y saat ini (posisi titik untuk mulai menggambar).
   📌Fungsi lineTo untuk membentuk garis lurus dari posisi X ke posisi Y.
   📌 Fungsi quadraticBezierTo untuk membentuk kurva di canvas, X1 dan Y1 merupakan pulling point dimana kurva akan dibentuk dan X2 serta Y2 merupakan titik akhir kurva dibentuk.
   
   
   Fungsi moveTo pertama hingga baris quadraticBezierTo pertama pada kode dibawah digunakan untuk membentuk area ini.
   
   

   

   Area Kurva Sebelah Kiri Atas Botol

   
   

   

   Kode untuk menggambar botol dengan Canvas

   
   
   Ulangi fungsi fungsi tersebut hingga membentuk gambar botol sesuai dengan contoh demo aplikasi. Selanjutnya gunakan fungsi clipPath() untuk menetapkan area terbatas tempat gambar dapat digambar. Gambar botol di dalam area tersebut diwakili oleh drawRect(), yang mengisi area dengan warna bottleColor.

   

   Kode fungsi clipPath untuk memunculkan gambar botol

   
   
5. Gambar Gelombang Air dan Tutup Botol
   
   Selanjutnya, bentuk gambar air di dalam botol dengan cara yang sama seperti saat menggambar bentuk botol dengan Path().apply{...}. Pertama, posisi vertikal untuk memulai menggambar gelombang air dihitung berdasarkan persentase air dalam botol. Kemudian, sebuah objek Path() dibuat untuk merepresentasikan bentuk gelombang air dengan memulai dari posisi yang dihitung sebelumnya, mengikuti lebar botol, dan kemudian kembali ke titik awal. Akhirnya, jalur yang telah dibuat diisi dengan warna gelombang air yang ditentukan, menciptakan efek visual gelombang air di bawah botol. 
   
   

   

   Kode untuk membentuk gambar gelombang air di dalam gambar botol

   
   
   Berikutnya menggambar bentuk tutup botol. Potongan kode pada gambar di bawah ini menggunakan fungsi drawRoundRect() untuk menggambar persegi panjang dengan sudut yang dibulatkan. Ini menciptakan tampilan penutup botol yang lebih estetik. Parameter color menentukan warna penutup, size menentukan ukuran penutup (lebar dan tinggi), topLeft menentukan posisi pojok kiri atas penutup relatif terhadap lebar dan tinggi botol, dan cornerRadius menentukan radius sudut yang dibulatkan.
   
   

   

   Kode untuk membentuk gambar tutup botol di atas gambar botol

   
   
6. Tambahkan tulisan volume air secara real time di dalam botol 
   
   Potongan kode ini digunakan untuk membuat teks yang akan ditampilkan di dalam sebuah kotak (Box). Box tersebut masih dalam lingkup yang sama dengan Canvas Botol.  Teks ini dibuat menggunakan buildAnnotatedString, yang memungkinkan penambahan gaya teks dengan withStyle(). Teks pertama (usedWaterAmountAnimation.toString()) memiliki gaya teks yang ditentukan oleh SpanStyle(), di mana warna dan ukuran fontnya bergantung pada nilai waterPercentage. Teks kedua (unit) ditambahkan setelah teks pertama dengan gaya yang sama. Setelah teks dibuat, itu disatukan dalam sebuah Box dengan ukuran maksimal (fillMaxSize) dan konten yang terpusat (contentAlignment). Kemudian teks ditampilkan menggunakan komponen Text dengan properti text yang telah ditentukan sebelumnya.
   
   

   

   Kode untuk menambahkan teks volume air saat ini di dalam botol

   
   
7. Menambahkan Button dan mengatur halaman UI aplikasi
   
   Potongan kode di MainActivity.kt ini menggambarkan tata letak UI sederhana yang menampilkan botol air dengan jumlah air yang digunakan, total jumlah air yang tersedia, dan tombol untuk menambah jumlah air yang digunakan. Variabel usedWaterAmount diinisialisasi sebagai mutableIntStateOf(100) sebagai inisialisasi total volume air dalam botol yang memungkinkan perubahan nilai sepanjang waktu. totalWaterAmount diinisialisasi sebagai nilai konstan maksimum volume air yaitu 2500.
   
   
   Komponen Column() digunakan untuk mengatur tata letak vertikal, dengan komponen WaterBottle() sebagai komponen anak pertama, diikuti oleh spasi vertikal dan teks yang menampilkan total jumlah air yang tersedia. Di bawahnya, terdapat tombol "Drink" yang saat diklik akan menambahkan volume air sebesar 200 ke variabel usedWaterAmount. Ini akan menyebabkan perubahan pada UI karena nilai tersebut digunakan dalam komponen WaterBottle untuk menampilkan jumlah air yang digunakan.
   
   

   

   Kode untuk mengatur tata letak UI aplikasi Water Bottle

   
   

KODE SOLUSI