TransWikia.com

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

Stack Overflow Asked by Ali Has on January 4, 2021

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?

2 Answers

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.

Answered by Edgar on January 4, 2021

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

Answered by Satoe Sakuma on January 4, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP