As mobile developers, we constantly strive to create engaging and delightful user experiences. One way to achieve this is by adding animations to our applications. In this blog post, I will guide you through the process of implementing a confetti splash animation in a Jetpack Compose app using Material 3 and Lottie animations.
Introduction
Imagine a user completing a challenging quiz and being greeted with a joyful confetti splash upon passing. This small addition can significantly enhance the user experience, making it more memorable and enjoyable. Here, we will create a quiz result screen that displays different messages and actions based on the user’s performance and adds a confetti animation for those who pass the quiz.
Step 1: Setting Up the Project
First, ensure you have a Jetpack Compose project set up. If not, create a new one by following the official Jetpack Compose setup guide.
Next, add the necessary dependency for Lottie animations in your build.gradle
file:
dependencies {
implementation "com.airbnb.android:lottie-compose:5.0.3"
}
Step 2: Create the Quiz Result Screen
Let’s start by designing the quiz result screen using Jetpack Compose and Material 3. This screen will show different content based on whether the user passed or failed the quiz.
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun QuizResultScreen(passed: Boolean, score: Int, onRetakeQuiz: () -> Unit, onGoToDashboard: () -> Unit) {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
val image: Painter
val message: String
val buttonText: String
val buttonAction: () -> Unit
if (passed) {
image = painterResource(id = R.drawable.ic_success) // replace with your success image resource
message = "Congratulations! You passed the quiz with a score of $score."
buttonText = "Go to Dashboard"
buttonAction = onGoToDashboard
} else {
image = painterResource(id = R.drawable.ic_failure) // replace with your failure image resource
message = "Sorry, you did not pass the quiz. Your score is $score."
buttonText = "Retake Quiz"
buttonAction = onRetakeQuiz
}
Image(
painter = image,
contentDescription = null,
modifier = Modifier
.size(120.dp)
.padding(bottom = 16.dp)
)
Text(
text = message,
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
color = MaterialTheme.colorScheme.onBackground,
textAlign = TextAlign.Center,
modifier = Modifier.padding(bottom = 16.dp)
)
Button(
onClick = buttonAction,
modifier = Modifier
.fillMaxWidth()
.height(48.dp),
shape = RoundedCornerShape(8.dp)
) {
Text(text = buttonText, fontSize = 16.sp)
}
}
}
}
Step 3: Adding the Confetti Animation
To make the passing experience more delightful, let’s add a confetti animation using Lottie. Ensure you have a Lottie JSON file for the confetti effect, which you can download from LottieFiles.
Place the downloaded JSON file in your res/raw
directory.
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import com.airbnb.lottie.compose.*
import com.example.yourappname.R
@Composable
fun ConfettiAnimation() {
val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.confetti))
val progress by animateLottieCompositionAsState(
composition = composition,
iterations = LottieConstants.IterateForever
)
LottieAnimation(
composition = composition,
progress = { progress },
modifier = Modifier.fillMaxSize()
)
}
Now, integrate the confetti animation into the quiz result screen for users who pass the quiz:
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun QuizResultScreen(passed: Boolean, score: Int, onRetakeQuiz: () -> Unit, onGoToDashboard: () -> Unit) {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Box(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
contentAlignment = Alignment.Center
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
val image: Painter
val message: String
val buttonText: String
val buttonAction: () -> Unit
if (passed) {
image = painterResource(id = R.drawable.ic_success) // replace with your success image resource
message = "Congratulations! You passed the quiz with a score of $score."
buttonText = "Go to Dashboard"
buttonAction = onGoToDashboard
// Confetti animation
ConfettiAnimation()
} else {
image = painterResource(id = R.drawable.ic_failure) // replace with your failure image resource
message = "Sorry, you did not pass the quiz. Your score is $score."
buttonText = "Retake Quiz"
buttonAction = onRetakeQuiz
}
Image(
painter = image,
contentDescription = null,
modifier = Modifier
.size(120.dp)
.padding(bottom = 16.dp)
)
Text(
text = message,
fontSize = 20.sp,
fontWeight = FontWeight.Bold,
color = MaterialTheme.colorScheme.onBackground,
textAlign = TextAlign.Center,
modifier = Modifier.padding(bottom = 16.dp)
)
Button(
onClick = buttonAction,
modifier = Modifier
.fillMaxWidth()
.height(48.dp),
shape = RoundedCornerShape(8.dp)
) {
Text(text = buttonText, fontSize = 16.sp)
}
}
}
}
}
// Preview function to see the design in Android Studio preview
@Preview(showBackground = true)
@Composable
fun QuizResultScreenPreview() {
QuizResultScreen(
passed = true,
score = 85,
onRetakeQuiz = {},
onGoToDashboard = {}
)
}
Conclusion
Hopefully you followed the steps correctly. If you did, you’ve created a visually engaging quiz result screen with a confetti animation for successful attempts. This small addition can significantly enhance the user experience, making it more delightful and memorable.
Feel free to customize the screen further to fit your design requirements and share your experiences or any improvements you make. Happy coding!