CODEWITHSUNDEEP
androidandroid-animationlottie
Vivek Solanki
Vivek Solanki

Reputation: 462

How to increase the lottie "LottieAnimationView" dimensions?

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

Upvotes: 8

Views: 28387

Answers (6)

Bhushan Nawale
Bhushan Nawale

Reputation: 11

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

Upvotes: 1

Hamdy Abd El Fattah
Hamdy Abd El Fattah

Reputation: 1827

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

Upvotes: 0

Vijay E
Vijay E

Reputation: 958

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

Upvotes: 7

Dan Underhill
Dan Underhill

Reputation: 327

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>

Upvotes: 0

Mahamudul Hasan
Mahamudul Hasan

Reputation: 318

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

}));

Upvotes: 0

Mohd Sohail Ahmed
Mohd Sohail Ahmed

Reputation: 137

Try Using animation.setScale(0.4f);

0.1f being the smallest.

Upvotes: 2

Related Questions