Dynamically replace Image in Lottie animation at runtime

mavesonzini picture mavesonzini · Feb 4, 2019 · Viewed 9.2k times · Source

I have an After Effects animation, super simple, of a square moving around (AE shape). I export the animation as a .json using Bodymovin, and add the json file using Lottie in my project. So far, so good.

The problem starts here --> during runtime, replace that "square" with an image I have in my project as well. Because this image may change, I can't add it statically to my AE animation, so need to dynamically add it during runtime. There's almost no information on how to do this in Android?

Answer

W0rmH0le picture W0rmH0le · Feb 5, 2019

LottieAnimationView extends an ImageView. In other words, the LottieAnimationView is also an ImageView.

So, you can set a image on LottieAnimationView the same way you set a image to a ImageView

For example:

if (isAnimated) {
    mLottieView.setAnimation("<json file name from asset folder>");
} else {
    mLottieView.setImageResource(R.drawable.square_image);
}

This is just an example about how you can use the same view to play an animation (json file) or image like any ImageView..