`Lottie Compose` Canvas is filling max available size causing undesirable effect.

[KaustubhPatange]

I am using Lottie with Jetpack Compose, the LottieAnimation composable was rendering perfectly till the version 1.0.0-rc01-1 until I migrated to 4.0.0 and now it is filling the entire screen.

I diff this class from these two versions & found that the modifier on Canvas is setting .fillMaxSize() compared to the old version which was .maintainAspectRatio(composition). If you replace it with .maintainAspectRatio(composition) it works completely fine.

I'm guessing the reason for the issue is because my use of LottieAnimation does not enforce a fixed width & height to modifier which is causing the entire screen to fill. Is there an official fix?

Steps To Reproduce Mentioned above.

[gpeal]

@KaustubhPatange Yes, you can use the normal Jetpack Compose modifiers like size, width, height, etc which will create smaller constraints. You can also use the new contentAlignment and contentScale parameters for how the animation will be resized within the modifier constraints. Does that make sense?

[KaustubhPatange]

Yes, that's what I'm doing.

I usually go through the changelogs during the dependency upgrade but it seems like there was no mention of this behavior in any further releases when upgrading from rc01 to 4.0.0. I think the docs should be updated to say that "you can restrict the bounds of Lottie composable by specifying size, width, height constraints otherwise it will fill the entire available size."

[o2e]

@gpeal I had a similar problem

This is my code

I am getting an error result,

the height currently set does not limit the size of the view. I'd like to have a clipping effect similar to an imageview Get a style I'm expecting, roughly the same as the image below.

[kypeli]

I am using Lottie-Compose version 4.1.0 and settings Modifier.size() on LottieAnimation does not do anything.

In LottieAnimation class, there's the following line:

Canvas(
        modifier = modifier
            .fillMaxSize()

Which, I think, will override any modifier parameter passed in from outside, thus not obeying to any size information given to it.

[kypeli]

This is the breaking commit: https://github.com/airbnb/lottie-android/commit/954f7d5d3ed2e3f9d543e2daf720836e2dc11ece

So in 1.0.0-rc02-1 just before 4.0.0 was released.

[kypeli]

The workaround is to use LottieAnimation inside a Box composable where the Box' modifier contains the size information.

val composition by rememberLottieComposition(...)

Box(
   modifier = modifier
) {
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever,
        modifier = modifier
    )
}

But obviously the Box here is unnecessary and I would hope that the size information in the modifier that is passed into LottieAnimation would be respected.

[gpeal]

@kypeli since it runs your modifiers first, it becomes

Modifier
    .size(16.dp)
    .fillMaxSize()

which should respect your specified size.

That being said, I might publish a breaking change in which unspecified constraints will wrap the composition instead of filling the max size. Still a WIP on my end.

[kypeli]

@gpeal Interesting. However, I observed the same as @o2e that giving the size modifier directly to LottieAnimation has no effect on the animation rendering size, but it will just consume all the available space. I could work around it with the Box hack.

[o2e]

It's not that he has no way to constrain the size of the view, it's simply that he can't break the aspect ratio of the animation file. What I think.