CODEWITHSUNDEEP
androidlottie
Nour abo elsoud
Nour abo elsoud

Reputation: 1016

How do I change the a single image in the lottie json file

I have made an animation by adobe after effects and exported JSON file with images and it works, as I have put photos from the assets folder.

I want to change one of the images which are in the JSON file

"assets": [
 {
  "id": "image_0",
  "w": 960,
  "h": 540,
  "u": "images/",
  "p": "img_0.png"
}

This is the piece of the JSON file that has the id I don't know how to change it or to change the name or to set images programmatically

In other words I want to change a specific image that I choose from my java code and put another image for example change the shirt image.

Upvotes: 3

Views: 11407

Answers (5)

Dastin
Dastin

Reputation: 4527

After doing much research, I've found there are 2 ways to change images in animation Lotte json.

  1. As @Nour Ahmed mentioned, updateBitmap() is the correct way. However, there is a subtle reminder, you have to make sure the LottieAnimationView was completely inflated and visible. Mostly case you update the image in onCreate(), it doesn't work. Thus, make a trick of delaying a few milliseconds:

    // Bug Lottie @@.
lavChest.postDelayed(new Runnable() {
    @Override
    public void run() {

      // UPDATE 2020 AUG 07.
      // Some devices require you to set image Assets folder again.
      lavChest.setImageAssetsFolder("aep/reward/images");

      lavChest.updateBitmap("image_6", bmReward);
      lavChest.updateBitmap("image_2", bmNo);
      lavChest.updateBitmap("image_4", bmCategory);

      lavChest.playAnimation();
   }
}, 500);

  2. The second way is using setImageAssetDelegate(), it only works once, though.

    lavChest.setImageAssetDelegate(new ImageAssetDelegate() {
         @Nullable
         @Override
         public Bitmap fetchBitmap(LottieImageAsset asset) {

             switch (asset.getId()) {
                 case "image_6":
                     return bmReward;

                 case "image_2":
                     return bmNo;

                 case "image_4":
                     return bmCategory;

                 default:
                     AssetManager am = activity.getAssets();
                     try {
                         return BitmapFactory.decodeStream(am.open("aep/" + asset.getDirName() + asset.getFileName()));
                     } catch (IOException e) {
                         e.printStackTrace();
                         return null;
                     }
             }
         }
     });

lavChest.playAnimation();

Despite closing the screen containing your LottieAnimationView, the images are still kept in Lottie cache. There is no proper way to interfere with this cache unless you close the app.

Conclusion:

  • Use setImageAssetDelegate() to update images the first time.
  • Use updateBitmap() to update images next times. Notice, the LottieAnimationView needs completely visible.

Upvotes: 3

zfq
zfq

Reputation: 1

updateBitmap should execute after setComposition。because setComposition method will execute setImageDrawable(null)。this will recycle bitmaps

Upvotes: 0

Soccot
Soccot

Reputation: 11

@Nguyen Tan Dat the Answer solve my doubt, Thanks 

   lavChest.postDelayed(new Runnable() {
    @Override
    public void run() {
        lavChest.updateBitmap("image_6", bmReward);
        lavChest.updateBitmap("image_2", bmNo);
        lavChest.updateBitmap("image_4", bmCategory);

        lavChest.playAnimation();
    }
}, 500);

Upvotes: 1

Nour abo elsoud
Nour abo elsoud

Reputation: 1016

found the Answer after some research simply use this function 

lottieAnimationView.updateBitmap("the id of the image which is found in the json file",thebitmap);

Upvotes: 4

Akash Khatri
Akash Khatri

Reputation: 87

You can parse the json file, make your changes and put those changes in your json file again. Though you will not be able to do any write/update in your json file if it's stored in assets folder.

Upvotes: 0

Related Questions