8

I am using Lottie for animations. The problem is lottie view dimensions are too small. is there a way to customize dimensions in lottie?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Vivek Solanki
  • 452
  • 1
  • 7
  • 10
  • You can set the size of the view manually and the animation will scale without quality loss, or set constraints using guidelines, which is the most useful approach when dealing with unknown or multiple animations sizes on the same view. – Raymond Arteaga Mar 15 '19 at 03:10

6 Answers6

7

I tried @Sijansd answer, However LottieComposition.Factory is deprecated now. So I thought to try with scaling the view. This is what I did to make it work. (Tested and 100% working)

android:scaleType="fitXY"

So the final code looks like this

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/lottie_view"
            android:layout_width="200dp"
            android:scaleType="fitXY"
            android:layout_height="30dp"
            android:layout_gravity="center"
            app:lottie_autoPlay="true"
            app:lottie_fileName="animation.json"
            app:lottie_loop="true" />
Vijay E
  • 829
  • 10
  • 14
2

Try Using animation.setScale(0.4f);

0.1f being the smallest.

Mohd Sohail Ahmed
  • 137
  • 1
  • 15
0

Using "LottieDrawable" and "LottieComposition" you can set dimensions easily. Bellow code is 100% working for me.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">

<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_loop="true"
app:lottie_autoPlay="true"/>

</LinearLayout>

and Java part

LottieAnimationView animationView = findViewById(R.id.animation_view);

LottieDrawable drawable = new LottieDrawable();

LottieComposition.Factory.fromAssetFileName(this, "anim_1.json",(composition -> 
{
    drawable.setComposition(composition);
    drawable.playAnimation();
    drawable.setScale(3);
    animationView.setImageDrawable(drawable);

}));
Mahamudul Hasan
  • 308
  • 3
  • 7
0

I know this is an old thread, but I had the same issue with the Lottie animation appearing too small. The simple answer is to define "Scale" in the forms:AnimationView. A Scale="1" is the original size. Using "2" or "3" or so forth scales it up. Conversely ".5" or whatever scales it down. Hope that helps someone.

<ContentPage.Content>

    <forms:AnimationView Scale="5"
        x:Name="animationView"
        Grid.Row="1"
        Animation="lottieAnimation.json"
        Loop="true"
        AutoPlay="true"         
        VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand" />

</ContentPage.Content>
Dan Underhill
  • 327
  • 3
  • 12
0

**center crop and padding work prefect with me **

 scaleType="centerCrop"
 android:padding="@dimen/_12sdp"

you can also used sdp unit for support multi dimensional

   <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/rate_bar_home"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:layout_gravity="center"
        app:lottie_loop="true"
        android:padding="@dimen/_12sdp"
        android:layout_marginStart="@dimen/_12sdp"
        android:layout_marginEnd="@dimen/_10sdp"
        app:lottie_autoPlay="true"
        app:lottie_rawRes="@raw/rate" />
Hamdy Abd El Fattah
  • 1,405
  • 1
  • 16
  • 16
0

For lottie version < 5.0 you can use lottie_scale attribute. For version above 5.0 , it is deprecated

Bhushan Nawale
  • 1