Android Lottie Animation (Simple Guide)

Lottie loads animation file created using Adobe After Effects with Bodymovin plugin.

Dependencies

Lottie supports API 16 and above.

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

Load Lottie File

Create res/raw.

Copy of of the Sample lottie files into the res/raw directory, such as lottie_jojo_the_bird.json.

NOTE: You can find more lottie files at https://lottiefiles.com/

Xml

Using /res/raw.

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_rawRes="@raw/lottie_jojo_the_bird"
    app:lottie_loop="true"
    app:lottie_autoPlay="true" />

Using url

<com.airbnb.lottie.LottieAnimationView
    ...

    app:lottie_url="https://raw.githubusercontent.com/airbnb/lottie-android/master/LottieSample/src/main/assets/lottiefiles/jojo_the_bird.json"
    />

Programatically

Load Animation from Resource

lottieView.setAnimation(R.raw.lottie_jojo_the_bird)lottieView.playAnimation()

Load Animation from Url

val url = "https://raw.githubusercontent.com/airbnb/lottie-android/master/LottieSample/src/main/assets/lottiefiles/jojo_the_bird.json"lottieView.setAnimationFromUrl(url)

Click to play animation

lottieView.setOnClickListener {    lottieView.playAnimation()}

Add a listener to perform an action when animation is done

lottieView.addAnimatorListener(object : Animator.AnimatorListener {    override fun onAnimationStart(anim: Animator?) {    }    override fun onAnimationEnd(anim: Animator?) {        lottieView.isVisible = false        // load another animation        /*        lottieView.removeAllAnimatorListeners()        lottieView.setAnimation(R.raw.lottie_another_animation)        lottieView.repeatCount = LottieDrawable.INFINITE        lottieView.playAnimation()         */    }    override fun onAnimationRepeat(anim: Animator?) {    }    override fun onAnimationCancel(anim: Animator?) {    }})

References

http://airbnb.io/lottie/