Nama: Aaliyah Farah Adibah
NRP: 5025201070
Kelas: PPB I
Membuat Aplikasi Water Bottle
Pada kali ini diminta untuk membuat sebuah aplikasi water bottle menggunakan tutorial berikut . Aplikasi ini membuat satu page berisi gambar botol dan animasi airnya. Pada tugas ini saya memodifikasi beberapa hal berikut:
1. Memodifikasi botol seperti warna dan bentuknya. Perubahan ini dilakukan pada file WaterBottle.kt sehingga bentuk botol seperti di bawah ini.
2. Mengondisikan logic waterWavesYPosition agar lebih presisi
3. Memodifikasi Button agar saat botol sudah penuh, tidak dapat dipencet lagi
Berikut Demo dari aplikasi tersebut:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package com.aaliyah.waterbottle | |
| import android.os.Bundle | |
| import androidx.activity.ComponentActivity | |
| import androidx.activity.compose.setContent | |
| import androidx.compose.foundation.layout.Arrangement | |
| import androidx.compose.foundation.layout.Column | |
| import androidx.compose.foundation.layout.Spacer | |
| import androidx.compose.foundation.layout.fillMaxSize | |
| import androidx.compose.foundation.layout.height | |
| import androidx.compose.foundation.layout.width | |
| import androidx.compose.material3.Button | |
| import androidx.compose.material3.ButtonDefaults | |
| import androidx.compose.material3.MaterialTheme | |
| import androidx.compose.material3.Surface | |
| import androidx.compose.material3.Text | |
| import androidx.compose.runtime.getValue | |
| import androidx.compose.runtime.mutableStateOf | |
| import androidx.compose.runtime.remember | |
| import androidx.compose.runtime.setValue | |
| import androidx.compose.ui.Alignment | |
| import androidx.compose.ui.Modifier | |
| import androidx.compose.ui.graphics.Color | |
| import androidx.compose.ui.text.TextStyle | |
| import androidx.compose.ui.text.style.TextAlign | |
| import androidx.compose.ui.unit.dp | |
| import androidx.compose.ui.unit.sp | |
| import com.aaliyah.waterbottle.ui.theme.WaterBottleTheme | |
| class MainActivity : ComponentActivity() { | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| setContent { | |
| WaterBottleTheme { | |
| // A surface container using the 'background' color from the theme | |
| Surface( | |
| modifier = Modifier.fillMaxSize(), | |
| color = MaterialTheme.colorScheme.background | |
| ) { | |
| var usedWaterAmount by remember { | |
| mutableStateOf(0) | |
| } | |
| val totalWaterAmount = remember { | |
| 2500 | |
| } | |
| var buttonText = if (usedWaterAmount >= totalWaterAmount) "The bottle is empty" else "Drink" | |
| var buttonClickable = usedWaterAmount < totalWaterAmount | |
| 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 = "Bottle size: $totalWaterAmount", | |
| textAlign = TextAlign.Center | |
| ) | |
| Spacer(modifier = Modifier.height(20.dp)) | |
| Button( | |
| modifier = Modifier.width(300.dp).height(50.dp), | |
| onClick = { | |
| if (usedWaterAmount < totalWaterAmount) { | |
| usedWaterAmount += 250 | |
| if (usedWaterAmount >= totalWaterAmount) { | |
| buttonClickable = false | |
| } | |
| } | |
| }, | |
| enabled = buttonClickable, | |
| colors = ButtonDefaults.buttonColors( | |
| containerColor = if (buttonClickable) Color(0xff279EFF) else Color.Gray, | |
| contentColor = Color.White | |
| ) | |
| ) { | |
| Text( | |
| text = buttonText, | |
| style = TextStyle(fontSize = 20.sp) | |
| ) | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package com.aaliyah.waterbottle | |
| 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(0xFFD3D3D3), | |
| capColor: Color = Color(0xFF3F51B5) | |
| ) { | |
| 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(150.dp) | |
| .height(500.dp) | |
| ) { | |
| Canvas(modifier = Modifier.fillMaxSize()) { | |
| val width = size.width | |
| val height = size.height | |
| val capWidth = size.width * 0.55f | |
| val capHeight = size.height * 0.08f | |
| //Draw the bottle body | |
| val bodyPath = Path().apply { | |
| moveTo(width * 0.3f, height * 0.1f) | |
| lineTo(width * 0.3f, height * 0.15f) | |
| 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.15f | |
| ) | |
| lineTo(width * 0.7f, height * 0.15f) | |
| 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) + 100 | |
| 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, 50f), | |
| 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 | |
| ) | |
| } |
Komentar
Posting Komentar