Lottie Android for Kotlin: Complete Guide with Examples
1. What It Is and Why You Need It
Lottie is an open-source library by Airbnb that renders After Effects animations in real-time on mobile devices and the web. For Android, the official library com.airbnb.android:lottie fully supports Kotlin. Animations are exported from After Effects to JSON format (via the Bodymovin plugin) and then played in your app without quality loss and with minimal file size.
Why use Lottie? First, it dramatically simplifies the workflow between designers and developers: designers create complex animations in their familiar tool, and developers simply plug in a JSON file. Second, Lottie delivers high performance — animations are rendered on the GPU, achieving 60 FPS even on older devices. Third, the library supports interactivity: you can control playback, change speed, colors, sizes, and even animate individual layers programmatically.
Lottie Android is perfect for: splash screens, animated icons, screen transitions, reactions to user gestures, UI micro-animations, and much more. The library is actively maintained by the community and has thousands of free, ready-to-use animations on LottieFiles.
2. Installation
To install Lottie in your Android project with Kotlin, add the dependency to your module-level build.gradle file:
dependencies {
implementation 'com.airbnb.android:lottie:6.4.0'
}
If you're using Kotlin DSL (build.gradle.kts):
dependencies {
implementation("com.airbnb.android:lottie:6.4.0")
}
After syncing Gradle, the library is ready to use. The minimum Android SDK version is 21 (Android 5.0).
Note: pip, npm, or cargo commands are not used for this library, as it's a native Android library.
3. Quick Start — Minimal Working Example
Place your animation JSON file (e.g., animation.json) in the app/src/main/res/raw folder. Then add a LottieAnimationView to your layout file:
<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animationView"
android:layout_width="200dp"
android:layout_height="200dp"
app:lottie_rawRes="@raw/animation"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Kotlin code in your Activity (or Fragment):
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.airbnb.lottie.LottieAnimationView
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val animationView: LottieAnimationView = findViewById(R.id.animationView)
animationView.playAnimation()
}
}
This minimal example will play the animation from raw/animation.json in an infinite loop.