Lottie animation has large padding. How to resize the animation to the view, by removing the padding

Question

I have a lottie animation file and when I put it in a view it becomes too small because of the file's internal padding. So I have used lottie_scale attribute in xml, and Also LottieComposition as mentioned in some resources like this but none were successful.

Is there any solution?

Satsuma

I spend long time searching for such a thing,all I got was get another animation or make one yourself. – Wort

Answer 1

I think there are two "semi"-solutions right now:

1. install Bodymovin on Adobe After Effects, then import the animation and set its scale to e.g. 500%.
2. Scale the Lottie animation view not by Lottie scale, but by using ScaleX, ScaleY:

XML:

android:scaleX="5"
android:scaleY="5"

Programmatically:

view.setScaleX(5f);
view.setScaleY(5f);

Satsuma

Alternatively, you can try my Lottie animation border removal application to remove the padding and then use it on the proper scale. You can find it at https://dealfonso.github.io/simplelottieplayer/lottietrimmer.html – Besetting

Answer 2

Flutter

Try with OverflowBox widget

SizedBox(
   height: 120,
   child: OverflowBox(
    minHeight: 170,
    maxHeight: 170,
    child: Lottie.asset('assets/json/box.json'),
  ),
),

Chaco

This worked for me. Give height required for widget in parent SizedBox, then adjust lottie height in the child OverflowBox. Also try using the fit param inside Lottie.asset widget. BoxFit.fill worked for me perfectly. – Upsurge

I see that you are using Lottie animations in Flutter. I needed to remove the margins to place the animation correctly. I shared how I did it in this other answer – Besetting

Answer 3

EDIT :
Due to the solution I had previously provided not being applicable to everyone who faced the issue I decided to change my answer to the more universal (tried & tested) approach of solving it, i.e using scale:

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/my_animation"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:scaleX="5"
            android:scaleY="5"
            app:lottie_fileName="animation.json"
            app:lottie_autoPlay="false"/>

The android:scaleX="5" is the key here.

OLD ANSWER

I recently had the same problem and I resorted to using a negative padding which increased the size of the animated item inside the view

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/my_animation"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:padding="-10dp"
            app:lottie_fileName="animation.json"
            app:lottie_autoPlay="false"/>

Increase or decrease the value of the padding to get desired size of the animation.

Jurisconsult

this is not working for me, but answer android:scaleX="5" android:scaleY="5" it's working – Chimborazo

Answer 4

in jetpack compose

 LottieAnimation(
               composition = composition,
               iterations = LottieConstants.IterateForever,
               modifier = Modifier
               .requiredHeight(30.dp)
               .requiredWidth(30.dp).scale(2f,2f),
 )

Seko

Answer 5

for react-native applying resizeMode: "center" fixes it for me

 <Lottie
      source={require('../../../assets/lottie/set-lock.json')}
      autoPlay
      loop
      autoSize
      resizeMode='center' // this fixes lottie padding
      style={{width: 258}}
    />

Spacial

Answer 6

I had the same problem and couldn't find a great answer, but to get it working, I used negative margins. It's ugly, but might do as a quick fix.

  <LottieView
    style={styles.checkAnimation}
    source={require('<path to json>')}
    autoPlay
    loop={false}
    speed={2}
    autoSize
    resizeMode="cover"
  />

const styles = {
  checkAnimation: {
    position: 'absolute',
    width: '150%',
    height: '115%',
    marginLeft: '-17%',
    marginTop: '-7%',
  },
}

Sympathy

The OP is using Android native development, not React Native. – Pentastich