LottieAnimationView height not respecting wrap_content

[andersu]

We have a LottieAnimationView centered vertically on the screen with height wrap_content and a TextView below it.

In v2.0.0 this works as expected. We recently upgraded to v2.3.1 and now the LottieAnimationView is taking up the entire screen, meaning we can't see the TextView anymore.

This is the xml for both cases. I made the background of the whole layout red and the animation background white to highlight the problem.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FF0000">

    <!-- Centers animationView & titleView within the available parent space -->
    <LinearLayout
        android:id="@id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:orientation="vertical">

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animationView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            app:lottie_autoPlay="true"
            app:lottie_fileName="looking-dealers.json"
            app:lottie_loop="true" />

        <TextView
            android:id="@+id/titleView"
            style="@style/Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="54dp"
            android:layout_marginLeft="@dimen/margin_m"
            android:layout_marginRight="@dimen/margin_m"
            android:gravity="center"
            android:text="@string/pine_select_dealer_looking_for_dealers" />
    </LinearLayout>
</RelativeLayout>

v2.0.0:

v2.3.1:

We have started using some other new features from v2.3.1, so we can't just go back to v2.0.0. Can you have a look at this issue and/or suggest a workaround until it is fixed?

[gpeal]

@andersu Not much has changed here recently. The lottie sample app uses wrap_content.

Can you create a minimal repro sample project and attach it?

[andersu]

@gpeal Thanks for the quick feedback.

I have attached a minimal project which reproduces the issue. Run it first with lottie:2.3.1 and you see the whole background is white and you can't see the text (because the animation is taking up the full height).

Then switch to lottie:2.0.0 and the background will be red with the text visible below the animation (because wrap_content is working as intended)

LottieWrapContentHeight.zip

[andersu]

@gpeal Some more information. The actual animation is big (bigger than the screen):

"w": 1440,
"h": 1032,

This is how it looks with height and width set to wrap_content and scaleType=centerCrop:

Could it be that in Lottie 2.0.0 the LottieAnimationView is resized to keep the height/width ratio of the animation, while in Lottie 2.3.1 it is not anymore (when using height=wrap_content and width=match_parent)?

[gpeal]

@andersu This is completely expected. You want centerInside not centerCrop. Scaling actually never worked properly until 2.2.4. (https://github.com/airbnb/lottie-android/pull/461)

Lottie converts all px values to dp so your animation is actually 1032x1440dp!

[andersu]

@gpeal Thanks for the feedback again.

I'm not using centerCrop. That was some information I added to help explain the problem. But it didn't help. Sorry :)

If you look at the minimal project I attached in the comment 5 days ago, you see that the exact same xml with no scaleType set works as intended in 2.0.0 while the animation takes up the whole screen height in 2.3.1. This is also shown in the images in my original issue. That means there was a breaking change in Lottie somewhere between 2.0.0 and 2.3.1. Maybe in 2.2.4?

centerInside doesn't help either because the LottieAnimationView would still take up the full screen height pushing the TextView out of the screen.

If it was an intended breaking change, we will find a way around it. Probably, the solution is making our animation smaller. If it was not intended, you might want to look into the minimal project I attached again.

[gpeal]

Got it, I'll look in to this.

[gpeal]

@andersu I just did a test with a png drawable that is the same size as your animation with the same view parameters and the view behaved the same so it appears that the behavior is consistent with ImageView. The behavior before (although it may have seemed correct), was not. This is the relevant code in View.java that causes this behavior.

I suggest making the animation smaller for performance reasons and it will behave correctly if it is smaller than the screen.

If you can't, you can use the scale property to scale it down.

[andersu]

@gpeal Thanks for looking into it and for the detailed explanation 👍

[martinsellergren]

android:adjustViewBounds="true" might be what you're looking for.

[luanshi210]

android:adjustViewBounds="true" 可能就是您正在寻找的。

thanks