Membuat Aplikasi Draw Water Bottle

Pendahuluan

Pada pertemuan pada minggu ke-7 mata kuliah Pemrograman Perangkat Bergerak kali ini, kita telah belajar tentang Material Design. Material Design sendiri merupakan sebuah gaya desain terbaru dari Google yang memiliki prinsip desain itu harus menyerupai sebuah kertas pada kenyataannya. Setelah memahami tentang materi tersebut kita akan berlatih untuk membuat sebuah aplikasi Draw Water Bottle pada pertemuan kali ini.

Membuat Aplikasi Draw Water Bottle

Sekarang kita akan membuat aplikasi Draw Water Bottle dengan menggunakan template Empty Activity yang sudah disediakan di Android Studio. Kemudian hal pertama yang kita akan lakukan sama seperti pada proyek sebelumnya, yaitu melakukan pengaturan awal pada template yang sudah disediakan.

Membuka Android Studio dan memilih opsi "Empty Activity".

Memilih level API minimum untuk aplikasi, disini kita akan memilih API 26 (Oreo).

Setelah kode template berhasil dimuat kita akan mengubah struktur kode proyek seperti proyek membuat halaman login sebelumnya.

Seperti pada proyek sebelumnya, kita akan mengubah beberapa struktur kode yang sudah ada dan menyisakan bagian class MainActivity nya saja. Kita akan hapus juga isi dari setContent class MainActivity.

Membuat file kode kotlin baru dengan nama WaterBottle.kt untuk membuat tampilan dan animasi sederhana pada aplikasi ini.

Kemudian kita akan membuat sebuah file kode baru dengan nama WaterBottle.kt, disini kita akan menuliskan kode untuk membuat tampilan sekaligus membuat animasi sederhana dari aplikasi. Kemudian dalam file tersebut kita akan langsung membuat sebuah fungsi constructor dengan nama WaterBottle dengan beberapa parameter pendukung yang nanti akan digunakan seperti berikut.

Berikut adalah penjelasan singkat untuk tiap parameternya :

- modifier : parameter yang memungkinkan untuk menentukan modifikasi visual untuk objek

- totalWaterAmount : jumlah total air yang dapat ditampung oleh botol

- unit : string yang menyatakan unit untuk mengukur jumlah air dalam botol (misal "ml", "L", dll)

- useWaterAmount : jumlah air yang telah digunakan dari botol air

- waterColor : warna air dalam botol air dan secara default jika tidak disediakan akan berwarna biru

- bottleColor : warna botol air dan secara default jika tidak disediakan akan berwarna abu-abu muda

- capColor : warna tutup botol air dan secara default jika tidak disediakan akan berwarna biru tua

Menggambar tampilan botol pada aplikasi pada Canvas() dan menggunakan Path().

Setelah membuat file baru dan fungsi di dalamnya kita akan membuat tampilan botol air terlebih dahulu. Di sini kita akan menggunakan Box() dan membuat ukuran boxnya sebesar 200.dp untuk lebarnya dan 600.dp untuk tingginya. Kemudian kita akan membuat botol air dengan menggunakan Canvas() yang mengisi seluruh ruang yang ada pada box yang telah dibuat.

Lalu untuk membuat botol air disini, pertama kita akan membuat sebuah objek baru yaitu bottleBodyPath dengan menggunakan Path(). Kemudian untuk menggambarkan objek botol airnya disini kita akan menggunakan beberapa fungsi yang disediakan oleh Path(), yaitu moveTo(), lineTo(), dan quadraticBezierTo() berikut adalah penjelasan singkat dari fungsi tersebut.

- moveTo : fungsi ini digunakan untuk memindahkan "pena" atau titik awal pada koordinat tertentu tanpa menggambar garis.

- lineTo : fungsi ini digunakan untuk menggambar garis lurus dari posisi saat ini ke koordinat yang ditentukan

- quadraticBezierTo : fungsi ini digunakan untuk menggambar kurva bezier kuadratik (lengkungan) dari posisi saat in ke titik akhir, dengan titik kontrol yang ditentukan.

Untuk perhitungan koordinat dapat kalian lihat pada kode sumber dibawah.

Membuat animasi untuk persentase air dan jumlah air yang digunakan menggunakan fungsi AnimateIntAsState() dan AnimateFloatAsState().

Setelah tampilan botol air berhasil dibuat sekarang kita akan membuat animasi persentase air dan jumlah air yang digunakan dengan menggunakan fungsi animasi yang sudah disediakan. Kita akan membuat animasi waterPercentage dengan menggunakan AnimateFloatAsState() yang didalamnya terdapat beberapa parameter, yaitu targetValue, label, dan animationSpec. Selain animasi waterPercentage, kita juga akan membuat animasi usedWaterAmountAnimation() namun di sini kita akan menggunakan AnimationIntAsState() yang memiliki parameter yang sama. Berikut adalah penjelasan singkat untuk parameter tersebut.

- targetValue : nilai targert dari animasi

- label : label untuk animasi yang akan membantu dalam debug saat menggunakan Compose DevTools

- animationSpec : spesifikasi animasi yang menentukan bagaimana animasi akan berperilaku, di sini kita menggunakan "tween" untuk membuat animasi yang berlangsung selama 1000 milidetik (1 detik)

- .value : properti dari state yang dihasilkan oleh fungsi yang memberikan akses ke nilai animasi

Membuat tampilan air dengan menggunakan Path() yang di clip dengan menggunakan clipPath().

Sekarang kita akan membuat tampilan air yang nantinya berada dalam botol air. Di sini kita akan menggunakan cara yang sama dengan membuat tampilan botol air, namun disini kita akan menambahkan fungsi clipPath() untuk membuat air berada dalam botol air. Kita akan memberi nama untuk objek air dengan nama waterPath. Berikut adalah contoh tampilannya.

Menambahkan tombol interaksi dan logika sederhana untuk menambahkan jumlah air.

Kita akan membuat sebuah tombol pada file MainActivity untuk melakukan interaksi sederhana dimana ketika kita menekan tombol tersebut makan jumlah air di dalam botol akan bertambah sebanyak 400ml. Pertama kita akan membuat dua variabel, usedAmount dan totalWaterAmount. Kedua variabel tersebut akan digunakan untuk menyimpan jumlah air yang telah digunakan dan menyimpan jumlah total air yang dapat ditampung oleh botol air. Setelah itu kita juga akan menambahkan interaksi pada tombol dengan dengan menggunakan variabel usedAmount, berikut adalah contoh kodenya.

Membuat tampilan tutup botol dan logika untuk persentase jumlah air di dalam botol.

Kemudian yang terakhir kita akan membuat tampilan tutup botol dan logika persentase jumlah air dalam botol. Berbeda dengan tampilan botol air dan air, di sini untuk tampilan tutup botol air kita akan menggunakan drawRoundRect() untuk membuatnya. Berikut adalah contoh untuk pembuatan tutup botol air.

Kita perlu mendeklarasikan ntuk beberapa variabel pada parameter drawRoundRect() sebelumnya, disini kita hanya perlu mendeklarasikan variabel capWidth dan capHeight untuk lebar dan tinggi dari tutup botol air.

Berikut adalah hasil dari proyek Draw Water Bottle: