In this tutorial, we'll build a dynamic water bottle UI using Jetpack Compose. The UI will feature a bottle with a gradient color that visually represents the amount of water consumed. We'll animate the water level and display the consumed amount dynamically as the user interacts with the UI.
Prerequisites
Kotlin:
A basic understanding of Kotlin programming language.
Jetpack Compose:
Familiarity with Jetpack Compose for Android UI development.
Android Studio:
Installed and set up for Android development.
We'll create two composables:
WaterBottleUi:
The main UI where the user can interact with the bottle.
WaterBottle:
The composable that renders the water bottle with animations and gradient effects.
Step 1: Setting Up the Project
1. Create a New Android Project:
- Open Android Studio.
- Start a new Android Studio project.
- Choose "Empty Compose Activity" as the template.
- Set your project name WaterBottleApp.
Step 2: Building the Water Bottle UI:
Create WaterBottleUi Composable:
WaterBottleUi
Copy this code →
package com.codingbihar.jetpackcomposeskill
import ...
@Composable
fun WaterBottleUi() {
Box(Modifier.fillMaxSize().background(color = MaterialTheme.colorScheme.background)) {
var usedWaterAmount by remember {
mutableIntStateOf(0)
}
val totalWaterAmount = remember {
1000
}
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",
textAlign = TextAlign.Center
)
Button(
onClick = { if (usedWaterAmount < 1000) usedWaterAmount += 200 },
colors = ButtonDefaults.buttonColors(containerColor = Color.Gray)
) {
Text(text = "Drink")
}
}
}
}
@Composable
fun WatterBottle(
modifier: Modifier = Modifier,
totalWaterAmount: Int,
unit: String,
usedWaterAmount: Int,
waterWavesColor: Color = Color(0xFF673AB7),
bottleColor: List = listOf(Color.Magenta, Color.Green),
capColor: Color = Color(0xFFE91E63)
) {
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(
brush = Brush.linearGradient(
colors = bottleColor,
start = Offset(0f, 0f),
end = Offset(0f, height)
),
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) Color.White else waterWavesColor,
fontSize = 44.sp
)
) {
append(usedWaterAmountAnimation.toString())
}
withStyle(
style = SpanStyle(
color = if (waterPercentage > 0.5f) Color.White else waterWavesColor,
fontSize = 22.sp
)
) {
append(" ")
append(unit)
}
}
Box(
modifier = Modifier
.fillMaxSize()
.fillMaxHeight(),
contentAlignment = Alignment.Center
) {
Text(text = text)
}
}
} MainActivity
Copy this code →
package com.codingbihar.jetpackcomposeskill
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import com.codingbihar.jetpackcomposeskill.ui.theme.JetpackComposeSkillTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
JetpackComposeSkillTheme {
WaterBottleUi()
}
}
}
}OUTPUT:
