Aplikasi Water Bottle

Pertemuan 8

Nama: Rayhan Almer Kusumah

NRP: 5025211115

Kelas: Pemrograman Perangkat Bergerak (A)

Tahun: 2025

Aplikasi Water Bottle

Dokumentasi

Source Code

GitHub: Go to code!

package com.example.water_bottle_android_app

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.animation.core.animateIntAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.drawscope.clipPath
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun WatterBottle(
    modifier: Modifier = Modifier,
    totalWaterAmount: Int,
    unit: String,
    usedWaterAmount: Int,
    waterWavesColor: Color = Color(0xff279EFF),
    bottleColor: Color = Color.White,
    capColor: Color = Color(0xFF0065B9)
) {

    val waterPercentage = animateFloatAsState(
        targetValue = (usedWaterAmount.toFloat() / totalWaterAmount.toFloat()),
        label = "Water Waves animation",
        animationSpec = tween(durationMillis = 1000)
    ).value

    val usedWaterAmountAnimation = animateIntAsState(
        targetValue = usedWaterAmount,
        label = "Used water amount animation",
        animationSpec = tween(durationMillis = 1000)
    ).value

    Box(
        modifier = modifier
            .width(200.dp)
            .height(600.dp)
    ) {

        Canvas(modifier = Modifier.fillMaxSize()) {
            val width = size.width
            val height = size.height

            val capWidth = size.width * 0.55f
            val capHeight = size.height * 0.13f

            //Draw the bottle body
            val bodyPath = Path().apply {
                moveTo(width * 0.3f, height * 0.1f)
                lineTo(width * 0.3f, height * 0.2f)
                quadraticBezierTo(
                    0f, height * 0.3f, // The pulling point
                    0f, height * 0.4f
                )
                lineTo(0f, height * 0.95f)
                quadraticBezierTo(
                    0f, height,
                    width * 0.05f, height
                )

                lineTo(width * 0.95f, height)
                quadraticBezierTo(
                    width, height,
                    width, height * 0.95f
                )
                lineTo(width, height * 0.4f)
                quadraticBezierTo(
                    width, height * 0.3f,
                    width * 0.7f, height * 0.2f
                )
                lineTo(width * 0.7f, height * 0.2f)
                lineTo(width * 0.7f, height * 0.1f)

                close()
            }
            clipPath(
                path = bodyPath
            ) {
                // Draw the color of the bottle
                drawRect(
                    color = bottleColor,
                    size = size,
                    topLeft = Offset(0f, 0f)
                )

                //Draw the water waves
                val waterWavesYPosition = (1 - waterPercentage) * size.height

                val wavesPath = Path().apply {
                    moveTo(
                        x = 0f,
                        y = waterWavesYPosition
                    )
                    lineTo(
                        x = size.width,
                        y = waterWavesYPosition
                    )
                    lineTo(
                        x = size.width,
                        y = size.height
                    )
                    lineTo(
                        x = 0f,
                        y = size.height
                    )
                    close()
                }
                drawPath(
                    path = wavesPath,
                    color = waterWavesColor,
                )
            }

            //Draw the bottle cap
            drawRoundRect(
                color = capColor,
                size = Size(capWidth, capHeight),
                topLeft = Offset(size.width / 2 - capWidth / 2f, 0f),
                cornerRadius = CornerRadius(45f, 45f)
            )


        }
        val text = buildAnnotatedString {
            withStyle(
                style = SpanStyle(
                    color = if (waterPercentage > 0.5f) bottleColor else waterWavesColor,
                    fontSize = 44.sp
                )
            ) {
                append(usedWaterAmountAnimation.toString())
            }
            withStyle(
                style = SpanStyle(
                    color = if (waterPercentage > 0.5f) bottleColor else waterWavesColor,
                    fontSize = 22.sp
                )
            ) {
                append(" ")
                append(unit)
            }
        }

        Box(
            modifier = Modifier
                .fillMaxSize()
                .fillMaxHeight(),
            contentAlignment = Alignment.Center
        ) {
            Text(text = text)
        }
    }
}


@Preview
@Composable
fun WaterBottlePreview() {
    WatterBottle(
        totalWaterAmount = 2500,
        unit = "ml",
        usedWaterAmount = 120
    )
}

Tujuan Komponen WatterBottle

Komponen WatterBottle dirancang untuk menampilkan ilustrasi botol air yang berfungsi sebagai indikator visual dari jumlah air yang telah diminum oleh pengguna. Visualisasi ini sangat berguna dalam aplikasi kesehatan, seperti pelacak hidrasi harian. Tampilan botol akan menyesuaikan tingkat air di dalamnya berdasarkan seberapa banyak air yang sudah dikonsumsi.

Parameter dan Konfigurasi

Fungsi ini menerima beberapa parameter penting, seperti kapasitas total air, jumlah air yang sudah diminum, dan satuan volume seperti mililiter atau liter. Selain itu, disediakan pula parameter opsional untuk menyesuaikan warna botol, air di dalamnya, dan tutup botol. Dengan demikian, komponen ini fleksibel untuk digunakan dalam berbagai konteks desain aplikasi.

Menggambar Botol dan Air

Bagian utama visualisasi dibuat menggunakan fitur Canvas. Bentuk botol dibuat secara manual dengan jalur vektor yang menciptakan siluet botol minum. Setelah bentuk dasar selesai, dilakukan pemotongan (clipping) agar isi air hanya tampil di dalam batas botol.

Air dalam botol divisualisasikan sebagai bidang berwarna yang tingginya menyesuaikan persentase air yang telah diminum. Ketika persentasenya tinggi, permukaan air terlihat naik. Sebaliknya, saat persentasenya rendah, permukaan air akan berada di bagian bawah botol.

Menampilkan Tutup Botol

Di bagian atas botol, digambar sebuah tutup dengan bentuk persegi panjang yang ujungnya melengkung. Warna tutup dapat disesuaikan, dan posisinya dihitung agar simetris di atas botol. Elemen ini menambahkan kesan realistis pada ilustrasi botol secara keseluruhan.

Kesimpulan

Komponen WatterBottle merupakan contoh yang baik dari penggunaan Jetpack Compose untuk membangun elemen UI yang bersifat visual dan informatif. Dengan memanfaatkan Canvas, Path, animasi, dan komposisi teks, komponen ini mampu menyampaikan data hidrasi secara menarik dan interaktif. Pendekatan seperti ini bisa meningkatkan keterlibatan pengguna dalam menggunakan aplikasi yang memantau kebiasaan sehat seperti minum air.