Tugas 5 PPB - B

Nama : Tsabita Putri Ramadhany

NRP : 5025211130

Kelas : PPB - B

Tugas 5

Material Design

Tugas : Menggunakan Jetpack Compose untuk material design

Petunjuk Tugas : https://kuliahppb.blogspot.com/2024/04/material-design.html

Membuat Aplikasi Draw Water Bottle di Android Studio

Memulai Proyek di Android Studio

1. Langkah Awal:
   • Buka Android Studio dan pilih opsi "Empty Activity".
   • Beri nama proyek sebagai "DrawWaterBottle" dan pilih level API minimum, dalam hal ini API 26 (Oreo).
   • Setelah template berhasil dimuat, kita akan melanjutkan untuk menyesuaikan struktur kode default proyek ini.

Mengubah Struktur Kode Default

2. Modifikasi Kode:
   • Seperti proyek sebelumnya, kita akan mengubah struktur kode default. Hapus semua fungsi dengan anotasi @Composable dan isi dari setContent pada class MainActivity. Ini akan memberi ruang untuk menambahkan kode khusus yang diperlukan untuk proyek ini.

Membuat File Kotlin Baru

3. Menambahkan File WaterBottle.kt:

   • Buat file baru bernama WaterBottle.kt yang akan digunakan untuk menuliskan kode tampilan dan animasi sederhana.
   • Dalam file ini, buat fungsi constructor bernama WaterBottle dengan beberapa parameter seperti modifier, totalWaterAmount, unit, useWaterAmount, waterColor, bottleColor, dan capColor.

4. Penjelasan Parameter:

   • modifier: Untuk menentukan modifikasi visual untuk objek.
   • totalWaterAmount: Jumlah total air yang dapat ditampung oleh botol.
   • unit: Unit untuk mengukur jumlah air dalam botol (misal "ml", "L").
   • useWaterAmount: Jumlah air yang telah digunakan dari botol.
   • waterColor: Warna air dalam botol, defaultnya biru.
   • bottleColor: Warna botol air, defaultnya abu-abu muda.
   • capColor: Warna tutup botol air, defaultnya biru tua.

Menggambar Tampilan Botol

5. Menggambar Botol:

   • Gunakan Box() dengan ukuran 200.dp untuk lebar dan 600.dp untuk tinggi untuk menampung gambar botol.
   • Menggunakan Canvas() yang mengisi seluruh ruang yang ada pada Box untuk menggambar botol air.
   • Buat objek bottleBodyPath menggunakan Path(). Gunakan fungsi moveTo(), lineTo(), dan quadraticBezierTo() untuk menggambar botol air.

6. Penjelasan Fungsi:

   • moveTo: Memindahkan titik awal pada koordinat tertentu tanpa menggambar garis.
   • lineTo: Menggambar garis lurus dari posisi saat ini ke koordinat yang ditentukan.
   • quadraticBezierTo: Menggambar kurva bezier kuadratik dari posisi saat ini ke titik akhir, dengan titik kontrol yang ditentukan.

Membuat Animasi untuk Persentase Air

7. Animasi Air:
   • Gunakan fungsi AnimateFloatAsState() untuk animasi waterPercentage dengan parameter targetValue, label, dan animationSpec.
   • Buat animasi usedWaterAmountAnimation menggunakan AnimateIntAsState() dengan parameter yang sama.
   • targetValue: Nilai target dari animasi.
   • label: Label untuk animasi, berguna untuk debugging.
   • animationSpec: Spesifikasi animasi, menggunakan "tween" untuk durasi 1000 milidetik.

Membuat Tampilan Air

8. Menggambar Air:
   • Gunakan Path() untuk membuat tampilan air, dan clipPath() untuk memastikan air berada di dalam botol.
   • Beri nama objek air sebagai waterPath dan gambar air menggunakan koordinat yang sesuai.

Menambahkan Tombol Interaksi

9. Tombol Interaksi:
   • Buat tombol di MainActivity untuk menambah jumlah air dalam botol sebesar 400ml ketika ditekan.
   • Buat dua variabel, usedAmount dan totalWaterAmount untuk menyimpan jumlah air yang telah digunakan dan jumlah total air yang dapat ditampung oleh botol.
   • Tambahkan logika interaksi pada tombol menggunakan variabel usedAmount.

Membuat Tampilan Tutup Botol

10. Tutup Botol:
    • Gunakan drawRoundRect() untuk menggambar tutup botol dengan variabel capWidth dan capHeight untuk lebar dan tinggi tutup botol.
    • Tambahkan logika untuk menghitung persentase jumlah air dalam botol.

Langkah-langkah Detail:

1. Mengatur Proyek di Android Studio:

   • Buka Android Studio, pilih "Empty Activity", beri nama proyek sebagai "DrawWaterBottle", dan pilih API level minimum 26 (Oreo).

2. Modifikasi Template Proyek:

   • Hapus semua fungsi dengan anotasi @Composable dan isi dari setContent di MainActivity. Ini memberi kita ruang untuk menambahkan kode yang diperlukan untuk proyek ini.

3. Membuat File Kotlin Baru:

   • Tambahkan file baru bernama WaterBottle.kt. Dalam file ini, kita akan membuat tampilan dan animasi untuk botol air.
   • Buat fungsi constructor bernama WaterBottle dengan parameter seperti modifier, totalWaterAmount, unit, useWaterAmount, waterColor, bottleColor, dan capColor.

4. Menjelaskan Parameter:

   • modifier: Digunakan untuk menentukan modifikasi visual untuk objek.
   • totalWaterAmount: Jumlah total air yang dapat ditampung oleh botol.
   • unit: Unit untuk mengukur jumlah air dalam botol, misalnya "ml" atau "L".
   • useWaterAmount: Jumlah air yang telah digunakan dari botol.
   • waterColor: Warna air dalam botol, defaultnya biru.
   • bottleColor: Warna botol air, defaultnya abu-abu muda.
   • capColor: Warna tutup botol air, defaultnya biru tua.

5. Menggambar Tampilan Botol:

   • Gunakan Box() dengan ukuran 200.dp x 600.dp untuk menampung gambar botol.
   • Gunakan Canvas() untuk menggambar botol air di dalam Box.
   • Buat objek bottleBodyPath menggunakan Path(), dan gunakan fungsi moveTo(), lineTo(), dan quadraticBezierTo() untuk menggambar botol air.

6. Fungsi-Fungsi Utama:

   • moveTo: Memindahkan titik awal tanpa menggambar garis.
   • lineTo: Menggambar garis lurus ke koordinat yang ditentukan.
   • quadraticBezierTo: Menggambar kurva bezier kuadratik dengan titik kontrol dan titik akhir.

7. Membuat Animasi:

   • Gunakan AnimateFloatAsState() untuk animasi waterPercentage dengan parameter targetValue, label, dan animationSpec.
   • Gunakan AnimateIntAsState() untuk animasi usedWaterAmountAnimation dengan parameter yang sama.

8. Menggambar Tampilan Air:

   • Gunakan Path() untuk membuat tampilan air, dan clipPath() untuk memastikan air berada dalam botol.
   • Beri nama objek air sebagai waterPath dan gunakan koordinat yang sesuai untuk menggambarnya.

9. Menambahkan Tombol Interaksi:

   • Buat tombol di MainActivity untuk menambah jumlah air dalam botol sebesar 400ml ketika ditekan.
   • Buat variabel usedAmount dan totalWaterAmount untuk menyimpan jumlah air yang telah digunakan dan total air yang dapat ditampung oleh botol.
   • Tambahkan logika interaksi pada tombol menggunakan variabel usedAmount.

10. Menggambar Tutup Botol:

    • Gunakan drawRoundRect() untuk menggambar tutup botol.
    • Tambahkan logika untuk menghitung persentase jumlah air dalam botol.

Hasil Proyek Draw Water Bottle

11. Hasil Akhir:
    • Tampilan aplikasi mencakup botol air dengan gambar dan animasi sederhana yang menunjukkan persentase air dan jumlah air yang digunakan.
    • Tombol interaksi untuk menambah jumlah air dan tampilan tutup botol yang menggunakan drawRoundRect().
    • Implementasi logika sederhana untuk menyimpan Credential pengguna ke dalam Log, memungkinkan kita menangkap dan menyimpan data login yang diinput pengguna.

Hasil Aplikasi:

Source code : Github

Dokumentasi Saat mengerjakan :