Pertemuan 10 - Water Bottle

Nama : Aditya Rizki Muhammad

NRP : 5025221272

Github : https://github.com/arizki787/pertemuan_10_ppb

Terdapat dua file utama dalam membuat aplikasi Water Bottle: 

MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainScreen() // <- add this line
        }
    }
}

Fungsi MainScreen() pada MainActivity.kt bertindak sebagai antarmuka pengguna utama yang menampilkan botol air (WaterBottle), jumlah air yang telah diminum (usedWaterAmount), dan tombol untuk menambahkan atau mereset air yang diminum. Nilai usedWaterAmount disimpan dalam state yang dapat berubah menggunakan remember { mutableStateOf(0) }, sehingga setiap kali nilainya berubah, UI akan diperbarui secara otomatis. Total kapasitas air ditentukan sebesar 2400 ml.

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(Color(0xFF111111)),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center
) {
    WaterBottle(
        totalWaterAmount = totalWaterAmount,
        unit = "ml",
        usedWaterAmount = usedWaterAmount
    )

    Spacer(modifier = Modifier.height(24.dp))

    Text(
        text = "Total amount is: $totalWaterAmount",
        color = Color.White
    )

    Spacer(modifier = Modifier.height(8.dp))

    if (usedWaterAmount >= totalWaterAmount) {
        Button(
            onClick = { usedWaterAmount = 0 },
            colors = ButtonDefaults.buttonColors(containerColor = Color.Red)
        ) {
            Text(text = "Reset", color = Color.White)
        }
    } else {
        Button(
            onClick = {
                usedWaterAmount += 200
                if (usedWaterAmount > totalWaterAmount) usedWaterAmount = totalWaterAmount
            },
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF6C4AB6))
        ) {
            Text(text = "Drink", color = Color.White)
        }
    }

UI dibangun menggunakan komponen Column agar semua elemen tersusun secara vertikal dan berada di tengah layar, dengan latar belakang gelap. Di dalamnya, ditampilkan botol air yang menunjukkan level air berdasarkan jumlah yang diminum. Jika air yang diminum sudah mencapai kapasitas maksimum, maka tombol yang ditampilkan adalah tombol "Reset" berwarna merah yang mengatur ulang jumlah air ke nol. Jika belum penuh, maka tombol "Drink" berwarna ungu muncul untuk menambah air sebanyak 200 ml setiap kali ditekan. Logika ini mencegah nilai air melebihi kapasitas maksimum. Aktivitas utama aplikasi (MainActivity) menggunakan setContent untuk menampilkan MainScreen() saat aplikasi dijalankan. Dengan pendekatan ini, pengguna dapat melihat botol yang terisi secara visual dan berinteraksi secara langsung dengan tombol minum atau reset.

WaterBottle.kt

@Composable
fun WaterBottle(
    modifier: Modifier = Modifier,
    totalWaterAmount: Int,
    unit: String,
    usedWaterAmount: Int,
    waterColor: Color = Color(0xff279eff),
    bottleColor: Color = Color.White,
    capColor: Color = Color(0xff0065b9)
)

...

fungsi @Composable bernama WaterBottle bertugas menggambar ilustrasi visual dari sebuah botol air menggunakan Jetpack Compose. Fungsi ini menerima beberapa parameter seperti kapasitas total air (totalWaterAmount), air yang telah digunakan (usedWaterAmount), satuan volume (unit), serta warna-warna untuk air, botol, dan tutup botol.

Di awal fungsi, dua animasi digunakan: animateFloatAsState untuk mengatur persentase air yang mengisi botol secara halus (dari 0 sampai 1), dan animateIntAsState untuk menganimasikan angka air yang digunakan agar transisinya halus. Selanjutnya, komponen Box digunakan sebagai wadah utama dengan ukuran 200dp x 600dp dan latar belakang gelap.

Di dalam Canvas, bentuk botol digambar menggunakan Path dan kurva Bézier untuk menciptakan kontur menyerupai botol. Botol diisi dengan warna putih (bottleColor), dan kemudian dilakukan pemotongan bentuk (clipPath) untuk mengisi bagian dalamnya dengan warna air (waterColor) hingga level tertentu berdasarkan persentase air yang digunakan. Di atasnya, bagian tutup botol digambar menggunakan drawRoundRect berbentuk persegi panjang dengan sudut melengkung.

Terakhir, teks jumlah air yang telah digunakan ditampilkan di tengah botol menggunakan Text dengan gaya warna yang berubah tergantung apakah botol lebih dari setengah penuh atau tidak, agar kontras tetap terjaga. Ini memberikan tampilan visual yang menarik sekaligus informatif kepada pengguna tentang seberapa banyak air yang telah mereka konsumsi.