Membuat Aplikasi Water Bottle Sederhana
PPB I - Tugas 7
Membuat Aplikasi Water Bottle Sederhana
Pada kesempatan kali ini, kita akan membahas tentang Material Design, sebuah panduan desain aplikasi perangkat lunak yang dibuat oleh Google, dengan fokus pada pembuatan aplikasi Water Bottle sederhana. Aplikasi ini memungkinkan pengguna untuk berinteraksi dengan minum melalui tombol Drink, dan total air yang diminum akan terlihat dalam botol dengan animasi yang menarik. Dalam pengembangan aplikasi ini, beberapa komponen komposabel digunakan, seperti Text, Button, dan Canvas, sesuai dengan prinsip-prinsip desain yang ditetapkan oleh Material Design.
Langkah pertama dalam proses ini adalah membuat proyek menggunakan activity kosong. Setelah membuat proyek, langkah selanjutnya adalah mengisi kolom Name dengan BottleWater, memilih level API minimum 26 (Oreo) di kolom Minimum SDK, dan kemudian mengklik tombol Finish untuk menyelesaikan proses pembuatan proyek. Selanjutnya, dibutuhkan pembuatan file WaterBottle.kt untuk menuliskan kode composable terkait antarmuka dan fungsionalitas botol air sesuai dengan spesifikasi yang diberikan.
Komponen WaterBottle menerima beberapa parameter yang penting untuk menentukan tampilan dan fungsionalitasnya. Parameter-parameter tersebut meliputi totalWaterAmount yang menunjukkan jumlah total air dalam botol, unit yang menentukan satuan untuk total air tersebut, dan usedWaterAmount yang mencatat jumlah air yang telah diminum. Selain itu, terdapat juga parameter opsional seperti waterColor yang mengatur warna air dalam botol, bottleColor yang menentukan warna botol, dan capColor yang mengatur warna penutup botol.
Di dalam komponen, kita menggunakan Canvas untuk menggambar botol air, sebuah elemen kunci dalam menciptakan tampilan visual yang akurat dan menarik. Selain itu, animasi juga dimasukkan ke dalam desain dengan mengatur efek animasi pada tingkat air yang berubah. Fungsi animateFloatAsState dan animateIntAsState digunakan untuk mengontrol animasi tersebut. Dalam proses penggambaran botol air, Path digunakan untuk menentukan bentuk dari botol air tersebut, sedangkan drawPath berfungsi untuk mengisi botol dengan air sesuai dengan jumlah yang telah ditentukan, dengan warna yang disesuaikan berdasarkan parameter waterColor yang telah diatur sebelumnya.
Selain menampilkan botol air dan mengatur animasi perubahannya, komponen juga menyertakan teks yang menampilkan jumlah air yang telah diminum. Pengaturan warna teks dan animasi perubahan jumlah air disesuaikan dengan tingkat air yang ada dalam botol. Dengan demikian, pengguna dapat dengan mudah melihat dan memantau seberapa banyak air yang telah diminum secara visual melalui tampilan komponen ini. Integrasi antara elemen-elemen ini memberikan pengalaman pengguna yang lebih menyeluruh dan menarik dalam menggunakan aplikasi Water Bottle.
Langkah berikutnya adalah memodifikasi file MainActivity.kt sebagai berikut.
Column digunakan untuk menempatkan konten secara vertikal di tengah layar dengan presisi menggunakan alignment dan arrangement yang ditawarkan oleh Compose. Di dalam Column, terdapat komponen WaterBottle yang bertanggung jawab untuk menampilkan botol air dengan jumlah air yang sudah diminum. Data mengenai jumlah air yang sudah diminum dan total air dalam botol diingat (remember) menggunakan mutableIntStateOf dan remember untuk memastikan kekonsistenan tampilan antarmuka pengguna. Selanjutnya, di bawah WaterBottle, disisipkan sebuah teks yang menampilkan total air dalam botol. Dan akhirnya, terdapat sebuah tombol yang saat diklik akan menambah jumlah air yang sudah diminum sebanyak 200 ml, memberikan interaksi langsung kepada pengguna untuk mengelola asupan air mereka. Dengan demikian, struktur Column ini memberikan tata letak yang teratur dan intuitif bagi pengguna dalam menggunakan aplikasi Water Bottle.
Berikut tampilan WaterBottleApp yang telah dijalankan.
Komentar
Posting Komentar