CODEWITHSUNDEEP
androidandroid-animationlottie
Ali Has
Ali Has

Reputation: 700

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

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?

Upvotes: 19

Views: 36238

Answers (6)

Waqas Ali
Waqas Ali

Reputation: 179

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}}
    />

Upvotes: 2

Mohd
Mohd

Reputation: 937

Flutter

Try with OverflowBox widget

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

Upvotes: 10

Mehrdad
Mehrdad

Reputation: 1637

in jetpack compose

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

Upvotes: 5

Edgar
Edgar

Reputation: 552

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.

Upvotes: 6

Ali Has
Ali Has

Reputation: 700

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);

Upvotes: 29

Satoe Sakuma
Satoe Sakuma

Reputation: 103

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%',
  },
}

Upvotes: -2

Related Questions