Tugas PPB 7

 Nama: Mohammad Firman Fardiansyah

NRP: 5025201109

Kelas: PPB I

Membuat Aplikasi Water Bottle

Dalam latihan ini, kita akan belajar tentang material design dengan aplikasi langsung membuat aplikasi water bottle. Tujuan dari pembuatan aplikasi ini melatih membuat sebuah aplikasi yang dapat langsung berinteraksi dengan pengguna, yaitu dengan cara ketika sebuah tombol dipencet maka akan terdapat sebuah animasi yang menampilkan botol semakin terisi hingga penuh.

Langkah pertama pembuatan aplikasi dengan membuat sebuah new project pada Android Studio dengan sebuah activity yang masih kosong. Level API yang dipilih kalau bisa yang terbaru dan minimal adalah Android Oreo pada kolom min SDK. Setelah itu kita akan membuat sebuah file baru untuk membuat antarmuka botol air yang dianimasikan tersebut


Pada file WaterBottle.kt tersebut dibuat variabel waterPercentage yang dihitung dengan membagi jumlah air yang digunakan (usedWaterAmount) dengan jumlah air total (totalWaterAmount). Hasil dari perhitungan ini dianimasikan menggunakan animateFloatAsState, sehingga perubahan dalam nilai ini terjadi secara bertahap selama 1000 milidetik. Selanjutnya pada variabel usedWaterAmountAnimation menggunakan animateIntAsState untuk menganimasikan perubahan jumlah air yang digunakan selama 1000 milidetik. Selanjutnya dibuat komponen berupa Canvas yang berguna untuk membuat sebuah botol air dengan memperhitungkan lebar dan tinggi kanvas dan menggunakan dimensi ini untuk menggambar dasar dari botol air menggunakan Path dengan serangkaian garis dan kurva bezier kuadratik untuk menciptakan bentuk yang diinginkan. Bagian dalam dasar botol air diwarnai dengan bottleColor. Kemudian, fungsi ini akan menggambar gelombang air di dalam botol berdasarkan persentase air yang digunakan (waterPercentage) dengan menggambar jalur baru dan mengisi area tersebut dengan waterWavesColor. Selanjutnya, dibuat juga gambar tutup botol dengan gradien warna (capGradient) dan menambahkan beberapa garis putih horizontal pada tutup botol untuk detail tambahan, detail warna telah didefinisikan di awal. Selanjutnya dibuat teks yang akan ditampilkan di tengah botol air menggunakan buildAnnotatedString. Teks ini terdiri dari jumlah air yang digunakan (usedWaterAmountAnimation) yang diikuti oleh satuan ukuran yaitu unit. Warna teks bergantung pada persentase air: jika lebih dari 50%, warna teks didefinisikan sebagai warna botol, jika tidak maka warna teks adalah warna gelombang air. Ukuran font juga disesuaikan dengan ukuran lebih besar untuk jumlah air dan ukuran lebih kecil untuk satuan ukuran. Teks ini kemudian ditempatkan dalam box yang diatur untuk mengisi ukuran penuh botol dan memastikan teks berada di tengah dengan menggunakan contentAlignment = Alignment.Center.

Selanjutnya pada file MainActivity.kt yang di dalamnya dibuat dua variabel yaitu usedWaterAmount dan totalWaterAmount. Variabel totalWaterAmount diatur ke 2200 dan usedWaterAmount diatur awalnya ke 0. Seluruh konten ditata dalam kolom yang diletakkan di tengah layar. Selanjutnya WaterBottle menampilkan botol air berdasarkan jumlah air yang telah diminum. Dibuat juga button Drink yang ketika di-klik akan menambahkan 200 ml air yang digunakan dan button Reset untuk mengatur ulang jumlah air yang digunakan ke 0. Interaksi dengan button ini mengubah nilai usedWaterAmount secara dinamis dan otomatis meng-update tampilan botol air sesuai dengan jumlah air yang digunakan.
 
Hasil akhir pembuatan aplikasi ini dapat dilihat pada gambar di bawah ini:





Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas PPB 2

Gambar
Nama: Mohammad Firman Fardiansyah NRP: 5025201109 Kelas: PPB I Apa itu Jetpack Compose? Jetpack Compose merupakan sebuah toolkit untuk membangun User Interface (UI) pada aplikasi Android yang dikembangkan oleh Google. Jetpack Compose dirancang untuk mempermudah dan mempercepat pembuatan UI sebuah aplikasi dengan menggunakan pendekatan deklaratif, dimana UI dideskripsikan dalam bentuk state Compose bertanggung jawab untuk mengelola rendering UI tersebut. Berbeda dengan pendekatan tradisional Android yang menggunakan XML untuk mendefinisikan layout dan Java/Kotlin untuk logika, Jetpack Compose akan mendefinisikan UI dan logika secara langsung dalam Kotlin. Hal ini akan membuat kode lebih simpel, mudah dibaca, dan memungkinkan hot reload, yang berarti perubahan pada kode dapat langsung dilihat pada aplikasi tanpa running ulang. Jetpack Compose mengintegrasikan fitur-fitur seperti state management, navigasi, animasi, dan banyak fitur lain, sehingga memungkinkan mengembangkan aplikasi yang ...
Baca selengkapnya

Tugas PPB 1

Gambar
 Tugas PPB 1 Sejarah Mobile Phone dan Perkembangan Teknologinya      Selamat datang semuanya! Hari ini, kita akan membahas suatu hal yang menarik tentang perangkat yang sering kita pakai sehari-hari, yaitu smartphone! Namun, disini kita tidak hanya membahas sejarahnya saja yaaa, tetapi kita akan membahas lebih dalam tentang perkembangan teknologi yang dinamis dalam pengembangan smartphone. Mari kita bahas satu per satu! Pengertian Smartphone      Smartphone adalah sebuah perangkat elektronik yang dapat melakukan berbagai hal dalam satu genggaman. Hal-hal yang dapat dilakukan oleh smartphone yaitu, melakukan panggilan suara, pengiriman pesan teks, memotret karena dilengkapi kamera digital, memutar musik, video, mengakses internet, dan dapat menginstal serta menjalankan berbagai aplikasi yang sangat banyak. Secara umum, smartphone dapat dianggap sebagai sebuah pusat komunikasi dan hiburan yang bersifat portabel. Smartphone juga memungkinkan penggunan...
Baca selengkapnya