I am struggling with animating this sidebar. It all works, except I can't get the background to be t...

# compose

[Arjan van Wieringen]

I am struggling with animating this sidebar. It all works, except I can't get the background to be the full size.
Before I started to add animation I used IntrinsicSize.Min on the Column and used fillMaxWidth on the contents. But that doesn't work here. Any tips?
The gist is here: https://gist.github.com/avwie/9b0ee5f2882e8d26517f4ab7fc2b0408

Screen Recording 2022-11-22 at 20.18.28.mov

[Kevin Del Castillo]

I think you wanted to use Modifier.width(IntrinsicSize.Max) not IntrinsicSize.Min

[Arjan van Wieringen]

On which element? The inner rows?

[Kevin Del Castillo]

Column(modifier = Modifier.width(IntrinsicSize.Max)) {
    Item(modifier = Modifier.fillMaxWidth())
    Item(modifier = Modifier.fillMaxWidth())
    Item(modifier = Modifier.fillMaxWidth())
}

[Kevin Del Castillo]

So the IntrinsicSize.Max should be in your Column , and your items should try to fill the max width, I believe this should work

[Kevin Del Castillo]

PS: Btw, the animation looks great

[Arjan van Wieringen]

Thanks. I tried this already, but sadly that breaks the animation:

Screen Recording 2022-11-22 at 21.10.48.mov

[Chris Sinco [G]]

cc @Doris Liu

[Arjan van Wieringen]

I think I am going to try to render the background behind somehow. But any other tips are welcome

[Arjan van Wieringen]

Or maybe work with a fixed width

[Kevin Del Castillo]

That's another way, you could try fixing the width

[Arjan van Wieringen]

Not a big fan of it though. It’s a hack. And I can imagine this use case is not uncommon

[Arjan van Wieringen]

I solved it: https://gist.github.com/avwie/9b0ee5f2882e8d26517f4ab7fc2b0408#file-solved-it-kt
I added a .onGloballyPositioned and recorded the maximum widths and added a modifier based on that. Hacky hacky, but it works.

Screen Recording 2022-11-25 at 19.28.38.mov

[Doris Liu]

Unfortunately there's no easy and correct way to fix this. AnimatedVisibliity and by extension AnimatedContent don't report a changing intrinsic size as they animate, because if they did they would receive changing fixed constraints during the animation, which could lead to undesired animation artifacts. For more details, see https://issuetracker.google.com/240292837