free geoip
46

Kotlin Lottie Animation Not Playing in Android

If you’re using Kotlin and Lottie animations in your Android app but the animation isn’t playing as expected, don’t worry…

If you’re using Kotlin and Lottie animations in your Android app but the animation isn’t playing as expected, don’t worry you’re not alone. This is a common issue faced by many developers working with Lottie, especially when integrating animations using .json files in Android Studio. In this guide, we’ll troubleshoot the problem step by step, understand common causes, and provide code examples to ensure your animations play smoothly.

Kotlin Lottie Animation Not Playing

What is Lottie?

Lottie is an open-source animation library developed by Airbnb. It renders After Effects animations exported as JSON with Bodymovin and plays them natively on mobile and web platforms.

Common Issue: Lottie Animation Not Playing

You may encounter a situation where your Lottie animation does not play at all when you run your Kotlin-based Android application. Instead of seeing the intended animation, the screen is either blank, shows a still frame, or behaves unexpectedly.

Possible Causes

Here are the most common reasons your Lottie animation may not play in Android:

IssueExplanation
JSON file is invalidThe animation JSON may be corrupted or not exported properly
Wrong path to assetThe file path is incorrect or the JSON file is not in the correct directory
AutoPlay is falseYou need to manually trigger the animation
Loop is not enabledThe animation stops after the first play
View is not visibleThe LottieAnimationView is hidden or constrained improperly
Activity lifecycle issueThe animation doesn’t resume after onResume()
File not supportedSome After Effects features are not supported by Lottie

Sample Working Code

Here is a full Kotlin example that plays a Lottie animation:

// MainActivity.kt
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.airbnb.lottie.LottieAnimationView
import com.example.lottieexample.R

class MainActivity : AppCompatActivity() {

    private lateinit var lottieView: LottieAnimationView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        lottieView = findViewById(R.id.lottieView)

        // Optional settings
        lottieView.setAnimation("loading_animation.json") // Ensure file is in assets folder
        lottieView.loop(true)
        lottieView.playAnimation()
    }

    override fun onResume() {
        super.onResume()
        if (!lottieView.isAnimating) {
            lottieView.playAnimation()
        }
    }
}

XML Layout (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/lottieView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:lottie_fileName="loading_animation.json"
        app:lottie_autoPlay="true"
        app:lottie_loop="true" />
</RelativeLayout>

Ensure Your JSON File is Correct

  1. Your animation file (e.g., loading_animation.json) must be placed in the assets folder, not in res/raw.
  2. If you don’t have an assets folder, create one under src/main.
  3. Do not compress .json in Proguard or build settings.

Dependencies in build.gradle

Make sure you include the correct Lottie dependency:

dependencies {
    implementation 'com.airbnb.android:lottie:6.1.0'
}

Tips for Debugging

  • Test your animation file on https://lottiefiles.com/preview.
  • Ensure your LottieAnimationView is visible in the layout (not covered or hidden).
  • Use .playAnimation() in onResume() to resume animations after pause.
  • If loading from URL, ensure you are using .setAnimationFromUrl() with network permissions enabled.

Playing from URL Example

lottieView.setAnimationFromUrl("https://assets5.lottiefiles.com/packages/lf20_u4yrau.json")
lottieView.playAnimation()

Don’t forget to add Internet permission in AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET"/>

Conclusion

Lottie is a powerful tool to bring delightful animations into your Android app. If your Lottie animation is not playing in Kotlin, it’s often due to small misconfigurations — incorrect file paths, missing permissions, or incorrect view setup. With the right setup and validation, you can fix it quickly.

By following this guide and using the provided working example, you should be able to integrate and troubleshoot Lottie animations in your Kotlin-based Android apps with confidence.

rysasahrial

Leave a Reply

Your email address will not be published. Required fields are marked *