Lottie Animations in Jetpack Compose for Android
Lottie is a great library of GUI animations that make every mobile UI shine. Animation of User Interface adds interactivity and help guide users through digital product while creating an immersive and enjoyable user experience. Keep reading to learn how to implement Lottie Animations in Jetpack Compose application for Android!
We’re going to build a Splash screen for an app featuring a simple loading animation from Lottie. Let’s get hands dirty!
Add the required dependencies in your Gradle files
First, let’s add Lottie Compose library into dependencies list in the app module level Gradle file.
At the moment of writing this post, the version 4.0.0 contains all necessary things to enable LottieAnimations for your mobile project. We stick on this version for purpose of the tutorial. Dear reader, please let me know if it’s got outdated!
Believe me, I’ve tried all available tutorials on this topic from the first page of Google and I going to say that most of them recommend outdated libraries. Bad for them! At the end of this post I collected the typical problems and how to resolve them.
Choose and import the animation from LottieFiles
For the preloader animation I scrolled across LottieFiles website and found the original yet simple concept of the animation that fits our exceptionally stylish example application. Let’s save it and import into our Android Studio project!
Once you downloaded Lottie animation, import it into your Android Studio project as a raw resource.
First, create “raw” folder under res/. Then put the downloaded JSON into this folder and give it describing name, i.e. “animation_preloader.json”
Make a Composable function for Animated preloader component
It is a good practice to keep code well-organized. Basically, it cuts down the hassle when the codebase get growing and it makes easier to onboard newcomers to the software project.
When it comes to UI components, Jetpack Compose does incredible. “Every thing UI” could be wrapped into a declaratively written function called Composable. The Composable annotation provides a context for UI components and their state-management stuff keeping UI logic pretty well separated from data and business logic of the application. As a change we have more flexible, reusable and testable UI components.
Lottie Compose library provides LottieAnimation class for adding animations in Composable functions. Take a look at the usage below.
@Composable
fun AnimatedPreloader(modifier: Modifier = Modifier) {
val preloaderLottieComposition by rememberLottieComposition(
LottieCompositionSpec.RawRes(
R.raw.animation_preloader
)
)
val preloaderProgress by animateLottieCompositionAsState(
preloaderLottieComposition,
iterations = LottieConstants.IterateForever,
isPlaying = true
)
LottieAnimation(
composition = preloaderLottieComposition,
progress = preloaderProgress,
modifier = modifier
)
}LottieAnimation has a state and a configuration. Configuration is called LottieComposition. Configuration provides a resource containing animation in Lottie JSON format.
LottieAnimation state does under the hood the keeping of animation progress status, timing and other stuff. For the purpose of the tutorial we just ask Lottie Compose that we need infinitely looped animation (IterateForever) and that it should play since the component appeared in a UI components tree of the app.
Now, let’s wire up things together and include our newly created UI component into example MainActivity.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
LottieAnimationsTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Box {
AnimatedPreloader(modifier = Modifier.size(200.dp).align(Alignment.Center))
}
}
}
}
}
}Notice that I wrapped AnimatedPreloader into Box. The Box here is serving the single purpose: to put our AnimatedPreloader into the center of the screen. To achieve that we provide an AnimatedPreloader a Modifier with “align” property. This property appears here from the context of the Box. It tells the Box to align the child component (AnimatedPreloader in this case) at the center of himself at both dimensions.
Dear reader, thank you for reading this tutorial! I hope you have a great time and I saved a hour of googling and playing around with broken tutorials. Please share your thoughts and ideas on using Lottie animations in Jetpack Compose in comments!
Clap this post and check out the complete Android Studio project I shared on the GitHub: https://github.com/vladignatyev/lottie-animations-jetpack-compose-example
I need your support
Thank you. ❤️
TL;DR
- Add the proper dependency into your Gradle file:
implementation("com.airbnb.android:lottie-compose:4.0.0")2. Download, rename and import Lottie JSON animation file into /res/raw folder of your Android Studio project.
3. Write the composable fun using LottieAnimation class from the library.
4. Compile and run!
5. Clap on this post if you like it and check out the GitHub: https://github.com/vladignatyev/lottie-animations-jetpack-compose-example
Bonus: typical problems when getting started with Lottie in your Android app
Cannot access class ‘com.airbnb.lottie.ImageAssetDelegate’
This issue appeared to be resolved. To fix it, update the version of Lottie Compose. Check out the guide above for further assistance.
Compose crash: No virtual method setImageAssetManager
Change the version of dependency to “4.0.0” or newer. This issue is already resolved.
Acknowledgements
Special thanks to Muhammad Danish and Tobias Wissmueller for writing first guides those helped me progress and inspired on writing this post. The links below are sorted in order of relevancy. They are all used to write this post.
