Lottie animation padding

Question

I have a question for the ones of you who have experience using lottie json files. I am not so experienced using lottie so I thought maybe I am missing some obvious knowledge. When I render my animation into a view, the animation object are placed in the center of the view like that

 _____________________________________________
|                                             |
|        [animated object]                    |
|_____________________________________________|

Is there a way I can modify the json file to make the animated objects fit the whole view like that:

     _____________________________________________
    |                                             |
    | [a n i m a t e d         o b j e c t s     ]|
    |_____________________________________________|

I have tried setting the view in the xml like that:

android:scaleType="centerCrop"
android:adjustViewBounds="true"

but it didn't work
I also tried to set a greater scale:

app:lottie_scale="2" 

but I had no success. Thank you for your time!

Illiberal

Answer 1

Using "LottieDrawable" and "LottieComposition" you can set scale easily. Bellow code is 100% working for me.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">

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

</LinearLayout>

and Java part

LottieAnimationView animationView = findViewById(R.id.animation_view);

LottieDrawable drawable = new LottieDrawable();

    LottieComposition.Factory.fromAssetFileName(this, "anim_1.json",(composition -> {
        drawable.setComposition(composition);
        drawable.playAnimation();
        drawable.setScale(3);
        animationView.setImageDrawable(drawable);

    }));

Vamoose

What version are you using? This doesnt seem to work for me – Hukill

Me too, no setScale. I'm using com.airbnb.android:lottie:5.1.0 – Lloyd

Answer 2

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

      <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:scaleType="fitXY"
        app:lottie_autoPlay="true"
        android:padding="10dp"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/your_json_file_here"/></RelativeLayout>

** Try this code. it's working **

Tody

Answer 3

Just treat it like any other view and use the setPadding programmatically.

LottieAnimationView btnHeart;

btnHeart.setPadding(-150, -150, -150, -150);

Prepuce

Answer 4

I know this is an old question, but I faced a similar problem: many lottie animations have large margins, and it is hard to place them correctly. Moreover, the space of the margins is a waste for the application (e.g., I could not put elements near the animated objects because the margins are part of the animation).

I know editing the files using Adobe After Effects and other tools is possible, but I do not want to pay for a license to remove margins for a few Lottie animations.

I investigated a bit in the specification of LottieFiles and I managed to solve this problem by calculating the bounding box for each of the frames in the animation, and once the bounding box is calculated for the whole animation, updating the Lottie animation using a pre-composition layer, which is adjusted to ensure that the part shown in the animation is the window corresponding to the bounding box. The shapes are not modified using this method, and the animation can still be edited in other software such as Adobe After Effects.

A pre-composition layer is a Lottie layer that renders an object from the assets list. The assets list contains other objects that can be self-contained animations. The key is that the pre-composition layer can be translated, scaled, etc.

I created a tool that trims the margins of a Lottie animation and allows you to download it to use in your web or application. The tool is available at https://dealfonso.github.io/simplelottieplayer/lottietrimmer.html

The tool puts the existing layers that create the animation into an asset object:

animation["assets"].push({
  "id": "legacy-animation",
  "layers": animation["layers"]
})

And then sets the animation to contain a new pre-composition layer that refers to the previous animation:

animation["layers"] = [
{
    "ty": 0,  // This is the precomposition layer type
    "nm": "Precomposition Layer",
    "refId": "legacy-animation",  // Refers to the asset created before
    "ks": {
      // The next parameter translates the animation to put the top-left corner of the window
      "p": { "a": 0, "k": [ -boundingBoxMinX, -boundingBoxMinY ]},
      /** other settings that can be used to manipulate the animation but are not needed for our purpose and are set to the default according to the specification of the Lottie files*/
      ...
    },
  }
];
// And now adjust the size of the bounding box
animation["w"] = boundingBoxMaxX - boundingBoxMinX;
animation["h"] = boundingBoxMaxY - boundingBoxMinY;

The whole implementation is available at https://github.com/dealfonso/simplelottieplayer

Tippett