Tugas 5 PPB - Material Design
Nama : I Gusti Ngurah Ervan Juli Ardana NRP : 5025211205 Kelas : Pemrograman Perangkat Bergerak B Tahun : 2024
Pada pertemuan kelas Pemrograman Perangkat Bergerak B kali ini, kami diperkenalkan dengan pengenalan material design pada android studio. Pada pertemuan ini, saya akan akan membuat sebuah halaman aplikasi animasi botol minum. Aplikasi ini memiliki 1 button, ketika button tersebut di klik maka botol minum tersebut akan perlahan terisi.
Material Design
Water Bottle Application
Berikut merupakan hasil dokumentasi aplikasi Water Bottle yang telah saya buat:
Gambar 1. Tampilan Awal Botol
Gambar 2. Tampilan Botol Ketika Hampir terisi penuh
Gambar 3. Tampilan Botol ketika botol terisi penuh
Dokumentasi tersebut saya buat dengan mengimplementasi beberapa fungsi sebagai berikut
@Composable
fun WaterBottle(
modifier: Modifier = Modifier,
totalWaterAmount: Int,
unit: String,
usedWaterAmount: Int,
waterWavesColor: Color = Color(0xff279EFF),
bottleColor: Color = Color(0xff36454F),
capColor: Color = Color.Red
) {
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() {
WaterBottle(
totalWaterAmount = 2500,
unit = "ml",
usedWaterAmount = 120
)
}
Link Repository : https://github.com/NgurahErvan/Water-Bottle---Android
Komentar
Posting Komentar