Tugas 8: Aplikasi Water Bottle menggunakan Material Design

     

Aplikasi Water Bottle menggunakan Material Design 

Langkah 1: Membuat Proyek Baru di Android Studio

1. Buka Android Studio setelah instalasi selesai.
2. Klik "Start a new Android Studio project".
3. Pada layar pemilihan template, pilih "Empty Compose Activity" lalu klik Next.
4. Masukkan nama aplikasi (misalnya, "My Water Bottle").
5. Tentukan lokasi penyimpanan proyek di sistem Anda.
6. Pilih Language sebagai Kotlin.
7. Pastikan Use AndroidX artifacts dicentang.
8. Klik Finish.
9. Pada halaman "Select a minimum SDK", pilih API Level 24: Android 7.0 (Nougat) sebagai Minimum SDK.
10. Android Studio akan mulai membangun proyek Anda. Tunggu hingga proses ini selesai.

Langkah 2: Mengedit File Komponen dan Main

• Setelah proyek selesai dibangun, buat file komponen WaterBottle.kt Sesuaikan kode seperti berikut:

@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
            .size(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()
            }
            
            // Implementasi lainnya...
        }
        
        // Text untuk menampilkan jumlah air
        val text = buildAnnotatedString {
            // Implementasi annotated string...
        }
        
        Box(
            modifier = Modifier
                .fillMaxSize()
                .fillMaxHeight(),
            contentAlignment = Alignment.Center
        ) {
            Text(text = text)
        }
    }
}

• Implementasi Layout utama pada MainActivity.kt seperti kode seperti berikut:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WaterBottleTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    var usedWaterAmount by remember {
                        mutableIntStateOf(0)
                    }
                    val totalWaterAmount = remember {
                        2400
                    }
                    Column(
                        modifier = Modifier.fillMaxSize(),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center
                    ) {
                        WatterBottle(
                            totalWaterAmount = totalWaterAmount,
                            unit = "ml",
                            usedWaterAmount = usedWaterAmount
                        )
                        Spacer(modifier = Modifier.height(20.dp))
                        Text(
                            text = "Total Amount is : $totalWaterAmount ml",
                            textAlign = TextAlign.Center
                        )
                        
                        Spacer(modifier = Modifier.height(20.dp))
                        
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.SpaceEvenly
                        ) {
                            Button(
                                onClick = { 
                                    if (usedWaterAmount + 200 <= totalWaterAmount) {
                                        usedWaterAmount += 200
                                    } else {
                                        usedWaterAmount = totalWaterAmount
                                    }
                                },
                                colors = ButtonDefaults.buttonColors(containerColor = Color(0xff279EFF))
                            ) {
                                Text(text = "Drink")
                            }
                            
                            Button(
                                onClick = { usedWaterAmount = 0 },
                                colors = ButtonDefaults.buttonColors(containerColor = Color.Red)
                            ) {
                                Text(text = "Reset")
                            }
                        }
                    }
                }
            }
        }
    }
}

• Implementasi Canvas dan Path

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()
}

• Animasi Level Air

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

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,
)

• Validasi Input dan Interaktivitas

Button(
    onClick = { 
        if (usedWaterAmount + 200 <= totalWaterAmount) {
            usedWaterAmount += 200
        } else {
            usedWaterAmount = totalWaterAmount
        }
    },
    colors = ButtonDefaults.buttonColors(containerColor = Color(0xff279EFF))
) {
    Text(text = "Drink")
}

Langkah 3: Menjalankan Aplikasi

1. Klik "Run" (ikon hijau di toolbar) untuk menjalankan aplikasi.
2. Pilih Emulator yang sudah Anda siapkan atau sambungkan perangkat fisik Android Anda.
3. Android Studio akan membangun dan menjalankan aplikasi.
4. Klik tombol "Drink" saat minum untuk mengurangi air dan tombol "reset" untuk mengatur ulang.

Dokumentasi