A library to render After Effects animations natively on Android and other platforms.
Quick Demo
Add to build.gradle.kts: implementation("com.airbnb.android:lottie:latest-version")<com.airbnb.lottie.LottieAnimationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:lottie_rawRes="@raw/sample_animation" />The animation will play automatically in the preview or on device, showing a smooth vector-based motion.
animationView.addAnimatorUpdateListener { valueAnimator ->
// Update UI based on animation progress
}Quick Start
com.airbnb.android:lottieSetup Steps
- Add the Lottie dependency to your app's build.gradle file.
- Include LottieAnimationView in your layout XML or use LottieComposable in Jetpack Compose.
- Load your animation JSON file from assets or network.
Overview
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile and the web. It allows designers to create animations in After Effects and developers to easily integrate them into apps without manual animation coding.
Features
Use Cases
When Not to Use
Usage Examples
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_rawRes="@raw/hello_world" />Add LottieAnimationView in XML and set animation from raw resources.
LottieAnimationView animationView = findViewById(R.id.animation_view);
animationView.setAnimation("hello_world.json");
animationView.playAnimation();Programmatically load and play an animation from assets.
Common Pitfalls
- Large animation files can significantly increase app size
- Not all After Effects features are supported; check the documentation
- Performance may degrade with very complex animations on low-end devices
- Ensure animations are optimized for mobile to avoid jank
Integration
Works well with
- Lottie can be used with both traditional Views and Jetpack Compose.
- For network-loaded animations, consider caching strategies.
Alternatives
AnimatedVectorDrawable
Native Android solution for vector animations, but less feature-rich than Lottie.
Spine
A runtime for 2D skeletal animations, useful for game-like animations.
Facebook Keyframes
Another library for exporting After Effects animations, but less popular than Lottie.
FAQ
What is Lottie?
Lottie is an open-source animation library that allows you to render After Effects animations natively on Android, iOS, and the web.
How do I add Lottie to my Android project?
Add the dependency in your build.gradle file, include LottieAnimationView in your layout, and load the animation JSON.
Can I use Lottie with Jetpack Compose?
Yes, Lottie provides LottieComposable for use with Jetpack Compose.
What animation formats does Lottie support?
Lottie supports animations exported from After Effects as JSON files using the bodymovin plugin.
Is Lottie free to use?
Yes, Lottie is open-source and free to use under the Apache License 2.0.
How can I optimize Lottie animations for performance?
Reduce the complexity of animations, use appropriate image formats, and preload animations if necessary.