Dynamically replace Image in Lottie animation at runtime

Question

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 1

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..

Answer 2

Lottie has one XML attribute app:lottie_imageAssetsFolder, which can also be set at run-time: animationView.setImageAssetsFolder("images/");. with that set, one can reference images in the json. this is documented in-line; see the comments above line #599 and #630. this is also explained in the documentation (src/assets might not be an option, since it is not writable):

Sometimes, you don't have the images bundled with the device. You may do this to save space in your apk or if you downloaded the animation from the network. To handle this case, you can set an ImageAssetDelegate on your LottieAnimationView or LottieDrawable. The delegate will be called every time Lottie tries to render an image. It will pass the image name and ask you to return the bitmap. If you don't have it yet (if it's still downloading, for example) then just return null and Lottie will continue to ask on every frame until you return a non-null value.

animationView.setImageAssetDelegate(new ImageAssetDelegate() {
    @Override
    public Bitmap fetchBitmap(LottieImageAsset asset) {
        if (downloadedBitmap == null) {
            // We don't have it yet. Lottie will keep asking until we return a non-null bitmap.
           return null;
        }
        return downloadedBitmap;
    }
});