Lottie-android: Animation is cut off when LottieAnimationView is not big enough

[dfpalomar]

Hi guys.

At work the UI/UX team has designed an animation that works perfectly fine in iOS but not in Android. When the LottieAnimationView is big enough the animation work perfectly fine but when that widget is small the animation is cut off. Below the videos of the animation:

Animation working as expected (the view size has to be big)

Animation not working as expected (the view size is small)

_(the blink is not an issue, it's just that I wasn't very accurate when I cut the video XD)_

In the animation our team has used opacity, scale, position and a mask and there are no added effects. I have tried using different scale types for the LottieAnimationView but with no luck.

I have published an Android app with the source files including the JSON file and the images.

Any help will be very much appreciated :)

[gpeal]

@dfpalomar Lottie can't render a mask or matter larger than view for performance reasons. Try a) making the composition smaller and using scaleType=centerCrop or playing around with setScale on the LottieAnimationView.

[dfpalomar]

@gpeal thanks for your reply. We're gonna try what you suggest 👍

[ghost]

I was able to solve this by combining the two suggestions from @gpeal. By first setting a very small scale for setScale on the animation view, and then using scaleType=centerCrop, the asset shows correctly regardless of the original size.

Not an ideal solution but it works if the asset itself or view cannot be resized.

[dfpalomar]

Thanks for the solution guys, it works! 👍

[muzir]

Thanks guys, i face same problem, android api sdk:24 and lottie version 2.1.0. Finally @elliottetzkorn's solution below solve my issue.

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/result_extra_check_animation"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_below="@id/close_button"
            android:scaleType="centerCrop"
            app:lottie_scale="0.1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="50dp"
            app:lottie_autoPlay="true"
            app:lottie_fileName="lottie/anim-extra-check.json" />