Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tutosrive/lottie-kt-test/llms.txt

Use this file to discover all available pages before exploring further.

In this quickstart you will clone the lottie-kt-test repository, open it in Android Studio, and deploy it to a device or emulator — all in under five minutes. Once the app is running you will see a looping Lottie animation fill the screen, and a single tap of the Change button will swap it for a second animation, giving you a hands-on feel for how runtime animation switching works with the Airbnb Lottie Android library.
Prerequisites — make sure you have the following before you begin:
  • Android Studio Hedgehog (2023.1.1) or later — earlier versions may not support all Gradle features used in this project.
  • Android SDK API 24 or higher — the app sets minSdk = 24, so your SDK Manager must have at least API 24 installed.
  • A physical Android device or an AVD emulator — any device or emulator running Android 7.0 (Nougat) or above will work.

​
Steps

1

Clone the Repository

Open a terminal and clone the project from GitHub:
git clone https://github.com/tutosrive/lottie-kt-test.git
This creates a lottie-kt-test directory containing the full Android project, including the wh.json and logo2.json Lottie animation files pre-placed in app/src/main/assets/.
2

Open in Android Studio

Launch Android Studio, then choose File → Open from the menu bar. Navigate to the lottie-kt-test folder you just cloned and click OK.Gradle will sync the project automatically. Wait for the sync to complete — the status bar at the bottom of Android Studio will show “Gradle sync finished” when it is done. If prompted to update the Gradle plugin, you can safely dismiss the notification for this demo.
3

Run the App

Select your connected device or running emulator in the toolbar target dropdown, then click the Run ▶ button (or press Shift + F10).Android Studio will build and install the app with the application ID com.srm.lottiee. After a few seconds the app will launch and you will see the first Lottie animation (wh.json) playing in a loop against the dark #1A1A1A background.
4

Toggle Between Animations

Tap the Change button at the top of the screen. The app immediately resets the animation frame to 0, loads logo2.json, and starts playing it. Tap Change again to switch back to wh.json. You can toggle as many times as you like — the switch is instantaneous and requires no restart.

​
Key Code

​
Kotlin — Loading, Playing, and Switching Animations

The heart of the demo lives in MainActivity.kt. After binding the views, the code loads the first animation, sets its playback speed, attaches an ImageAssetDelegate, and wires the button to perform the toggle:
MainActivity.kt
btnChange = findViewById<Button>(R.id.btnChange)
lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
var anim = "wh.json"
lottieView.setAnimation(anim)
lottieView.playAnimation()
lottieView.speed = 2.0f
lottieView.setImageAssetDelegate { image ->
    val drawableId: Int = R.drawable.logo

    BitmapFactory.decodeResource(
        resources,
        drawableId
    )
}

btnChange.setOnClickListener { viewModelStore ->
    anim = when (anim) {
        "wh.json" -> "logo2.json"
        "logo2.json" -> "wh.json"
        else -> "wh.json"
    }
    lottieView.setAnimation(anim)
    lottieView.frame = 0
    lottieView.playAnimation()
}
Key points to note:
  • setAnimation("wh.json") — resolves the file name against the assets folder automatically.
  • speed = 2.0f — doubles the playback rate of the animation.
  • setImageAssetDelegate — intercepts every image layer and returns a custom Bitmap; here it substitutes R.drawable.logo for whatever bitmap was bundled in the JSON.
  • frame = 0 — resets playback to the first frame before calling playAnimation() so the new animation always starts from the beginning.

​
XML — Declaring LottieAnimationView in the Layout

The LottieAnimationView is declared in activity_main.xml inside a LinearLayout. The Lottie-specific XML attributes configure looping and auto-play entirely at the layout level:
activity_main.xml
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"
    app:lottie_repeatMode="restart" />
  • lottie_autoPlay="true" — starts playback as soon as the view is laid out, before any Kotlin code runs.
  • lottie_loop="true" — keeps the animation looping indefinitely.
  • lottie_repeatMode="restart" — jumps back to frame 0 at the end of each cycle rather than reversing.
Ready to integrate Lottie into your own project from scratch? Head over to the Implementation Guide for a step-by-step walkthrough — from adding the Gradle dependency and structuring your assets folder, all the way through to advanced ImageAssetDelegate patterns.

Build docs developers (and LLMs) love

Get started for freeTalk to us