[Question] How to make LottieAnimation scale to parent size in Compose?

[clhols]

With Lottie 4.1.0 we are using IntrinsicSize.Min to make the LottieAnimation scale to the content size like this:

        Box(modifier = Modifier.height(IntrinsicSize.Min)) {
          LottieAnimation(
            composition = composition,
            iterations = LottieConstants.IterateForever,
            contentScale = ContentScale.FillBounds,
          )
          content()
        }

The composable function content() dictates the size of the Box and LottieAnimation scales to it. This doesn't work anymore with Lottie version 4.2.2 due to #1892.

I have tried to add fillMaxSize() and widthIn() on LottieAnimation but I have been unable to make it behave as before. Any pointer on how to accomplish this?

[gpeal]

@clhols What, exactly, are you trying to accomplish and what is the delta between what you expect and what is happening?

[clhols]

Googles example on intrinsic explains it well. Just replace Divider with LottieAnimation: https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements#intrinsics-in-action

LottieAnimation in 4.1.0 worked just like Divider does in this example. You had fillMaxSize and the min intrinsic size for LottieAnimation was 0 width and 0 height. I believe that the change in #1891 now set the min intrinsic size to the composition size and then it doesn't behave like Divider in the example anymore. It fills the entire screen now. Maybe it is possible to use MeasurePolicy as mentioned in the docs to set min intrinsic size for LottieAnimation to 0?

[gpeal]

@clhols I'm still not sure I follow. The min intrinsic size for Lottie isn't 0, it's the size of the composition similar to how an image would behave. Could you try in 5.0.1 too? Are you sure #1891 is the PR in question?

[clhols]

@gpeal Sorry I ment #1892 like I wrote in the original post.

I have created this example project to illustrate what I need: https://github.com/clhols/lottie-intrinsics

In the example I have two composables. One where LottieAnimation is used with intrinsic min height and one with an Image.

With Lottie 4.1.0 the apps UI looks like this: https://github.com/clhols/lottie-intrinsics/blob/main/lottie-issue.png

The background behind "Hello Lottie" is the LottieAnimation and the background behind "Hello World" is an Image.

But with Lottie 4.2.2 or 5.0.1 the LottieAnimation height fills the entire screen. It doesn't behave as the Image composable does.

What I need is a way to make LottieAnimation scale to the height of the two composables with the text "Hello World".

[clhols]

@gpeal Did you have a chance to look at the example project? Is it clear what I am trying to achieve?

[gpeal]

@clhols I haven't had a chance to yet.

[slikasgiedrius]

I do face the same issue. Any updates?

[melanu1991]

The same issue for me.

[gpeal]

If you add fillMaxWidth() on the parent box and add matchParentSize() on LottieAnimation it renders as you'd like it to. Does that solve your problem?

[clhols]

@gpeal You are absolutely right. It does work. I can even remove the IntrinsicSize.Min. Thanks a lot!