How to increase the lottie "LottieAnimationView" dimensions?

Question

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

Depredation

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. – Eula

Answer 1

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

Tillie

fitXY will not stretch the image on some devices? – Cosmos

I used android:scaleType="fitEnd", which pushed my anim view to the bottom. – Narda

Answer 2

Try Using animation.setScale(0.4f);

0.1f being the smallest.

Oloughlin

Answer 3

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

Medicable

Answer 4

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

}));

Euphrosyne

Answer 5

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>

Kira

Answer 6

**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" />

Abbie