Botol Minum Ucul

Membuat Animasi Botol Lucu

    Pada blog ini kita akan membuat aplikasi animasi botol yang lucu. Aplikasi ini dibuat dengan jetpack compose. Aplikasi ini dibuat mengikuti referensi Youtube dengan melakukan beberapa modifikasi pada kode dan fitur yang ada. Yuk langsung kita mulai saja!

Membuat Projek Baru

    Buat projek baru dengan jenis Empty Activity, lalu beri nama yang sesuai, saya memberi nama MyWaterBottle. Untuk minimum SDK yang saya gunakan adalah API 26 Oreo Android 8.0. Setelah terbuat, tambahkan file kt pada folder com.example.mywaterbottle dan pilih tipe File dan beri nama WaterBottle.

Sumber Kode MainActivity.kt

variabel

Pada bagian ini kita mendefinisikan beberapa variabel yang diperlukan, totalWaterAmount menyimpan total ukuran maksimal botol, usedAmount merupakan isi air pada kondisi awal, incrementWaterAmount merupakan nilai increment untuk sekali minum, dan unitValue merupakan satuan yang digunakan pada botol (saya menggunakan ml)

Struktur

Struktur tampilan yang disusun berupa colom yang terdiri dari tampilan botol, keterangan ukuran botol, dan tombol dengan fungsi minum dan reset botol

Keterangan

Baris kode 1 merupakan pemanggilan fungsi WaterBottle yang akan kita definisikan pada WaterBottle.kt. Adapun, baris kode 3 digunakan untuk menunjukkan status ukuran botol dengan memanggil nilai dari variabel totalWaterAmount dan unitValue

Tombol

Terdapat 2 tombol yang kita buat, yakni untuk minum dan reset. tombol minum menambahkan nilai air yang diminum dengan nilai increment yang sudah ditentukan, sedangkan tombol reset merubah nilai air menjadi 0. Fitur ini diimplementasikan dengan mengatur tindakan onClick merubah nilai usedAmount, tetapi sebelum melakukan penambahan, akan dilakukan pengecekan terlebih dahulu apakah nilai usedAmount sudah melebihi nilai maksimal botol. Selain itu, dilakukan modifikasi warna tombol dengan warna pink hehe, agar lebih sesuai dengan warna botolnya.

Kode Lengkap

Sumber Kode WaterBottle.kt

Definisi Atribut

Pada bagian in]i kita mendefinisikan beberapa atribut yang diperlukan, yakni modifier, total ukuran botol, satuan, jumlah isi air, warna botol, air, dan penutup botol. Dalam menentukan nilai warna dapat ditentukan dengan String seperti White atau dengan nilai hexadesimal, yakni diawali dengan 0xff yang mendefinisikan nilai alpha dan dilanjutkan 6 digit hexadesimal warna. Anda dapat menentukan warna yang cocok dengan melihat color.hunt.

Definisi Variable

2 variabel utama yang diperlukan adalah waterPercentage, yakni persentase isi air terhadap total ukuran botol. definisi ini menggunakan animateFloatAsState dengan animasi tween durasi 1 detik. Sama dengan sebelumnya, kita definisikan variabel usedWaterAmountAnimation, tetapi menggunakan animateIntAsState agar nilainya menjadi bilangan bulat.

Membentuk Path Botol

Botol dibuat dengan membentuk path dari botol sendiri. diawali dengan moveTo untuk menentukan titik awal, lineTo untuk membentuk garis lurus, quadraticBezierTo untuk membentuk garis lengkung dengan parameter titik tumpu dan titik akhir, dan close untuk menutup path yang sudah dibentuk. Pembentukan path dapat dilihat pada gambar berikut:

Membentuk Animasi Terisi Air

Animasi pengisian air diimplementasi dengan membentuk path air dengan menghitung tinggi air dengan perhitungan yang sesuai berdasar persentase banyak air pada botol. Lalu disesuaika dengan warna air dan menggambar path air.

Membentuk Tutup Botol

Tutup botol dibuat menggunakan drawRoundRect sehingga bentuk tutup menjadi rounded.

Menuliskan Ukuran Air Sekarang

Penulisan ukuran air sekarang dapat disesuaikan dengan isi air, apabila air melebehi tinggi dari posisi air, maka warna tulisan akan diubah menjadi warna putih. sehingga, tampilannya menjadi lebih menarik.

Full Kode

Hasil