16

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?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Ali Has
  • 598
  • 1
  • 8
  • 24

6 Answers6

26

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);
Ali Has
  • 598
  • 1
  • 8
  • 24
  • 1
    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](https://dealfonso.github.io/simplelottieplayer/lottietrimmer.html) – Carlos Jul 05 '23 at 10:06
6

Flutter

Try with OverflowBox widget

SizedBox(
   height: 120,
   child: OverflowBox(
    minHeight: 170,
    maxHeight: 170,
    child: Lottie.asset('assets/json/box.json'),
  ),
),
Mod
  • 881
  • 9
  • 9
  • 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. – Deepak Joshi Jul 29 '22 at 06:18
  • 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](https://stackoverflow.com/a/75607662/14699733) – Carlos Mar 01 '23 at 18:46
4

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.

Edgar
  • 472
  • 6
  • 17
1

in jetpack compose

 LottieAnimation(
               composition = composition,
               iterations = LottieConstants.IterateForever,
               modifier = Modifier
               .requiredHeight(30.dp)
               .requiredWidth(30.dp).scale(2f,2f),
 )
Mehrdad
  • 1,477
  • 15
  • 17
1

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}}
    />
Waqas Ali
  • 91
  • 3
-2

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%',
  },
}
Satoe Sakuma
  • 93
  • 7