Tugas 8 animasi botol air

 Nama : Mohammad Ahnaf Fauzan
NRP : 5025211170

ANIMASI  BOTOL AIR

Pada penugasan kali ini, diperintahkan untuk membuat animasi botol air. Pada animasi ini ketika kita mengclick tombol drink maka jumlah air didalam botol akan bertambah sebanyak jumlah total yang ada dibawah. Untuk tampilan yang sudah dibuat seperti dibawah:

Adapun untuk kode yang tdigunakan seperti ini:

package com.example.hydrateme

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.hydrateme.ui.theme.HydratemeTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HydratemeTheme {
                WaterBottleAnimation()
            }
        }
    }
}

@Composable
fun WaterBottleAnimation() {
    val totalAmount = 2400
    val drinkAmount = 600

    var currentAmount by remember { mutableStateOf(0) }

    val fillFraction by animateFloatAsState(
        targetValue = currentAmount.toFloat() / totalAmount,
    )

    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // Penutup botol
        Box(
            modifier = Modifier
                .width(80.dp)
                .height(40.dp)
                .clip(RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp, bottomStart = 8.dp, bottomEnd = 8.dp))
                .background(Color(0xFF004F9F)) // Warna biru tua seperti gambar
        )

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

        Box(
            modifier = Modifier
                .width(150.dp)
                .height(400.dp)
                .clip(RoundedCornerShape(20.dp))
                .background(Color.LightGray),
            contentAlignment = Alignment.BottomCenter
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(fillFraction)
                    .background(
                        Color(0xFF2E86DE),
                        shape = RoundedCornerShape(bottomStart = 20.dp, bottomEnd = 20.dp)
                    )
            )
            Text(
                text = "$currentAmount ml",
                modifier = Modifier.align(Alignment.Center),
                color = Color.Black,
                fontSize = 32.sp,
                textAlign = TextAlign.Center
            )
        }

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

        Text(text = "Total amount is : $${totalAmount}", style = MaterialTheme.typography.bodyMedium)

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

        Button(
            onClick = {
                if (currentAmount + drinkAmount <= totalAmount) {
                    currentAmount += drinkAmount
                }
            }
        ) {
            Text(text = "Drink")
        }
    }
}