I am struggling with animating this sidebar. It al...
# compose
a
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
k
I think you wanted to use
Modifier.width(IntrinsicSize.Max)
not
IntrinsicSize.Min
a
On which element? The inner rows?
k
Copy code
Column(modifier = Modifier.width(IntrinsicSize.Max)) {
    Item(modifier = Modifier.fillMaxWidth())
    Item(modifier = Modifier.fillMaxWidth())
    Item(modifier = Modifier.fillMaxWidth())
}
So the
IntrinsicSize.Max
should be in your
Column
, and your items should try to fill the max width, I believe this should work
PS: Btw, the animation looks great
a
Thanks. I tried this already, but sadly that breaks the animation:
c
cc @Doris Liu
a
I think I am going to try to render the background behind somehow. But any other tips are welcome
Or maybe work with a fixed width
k
That's another way, you could try fixing the width
a
Not a big fan of it though. It’s a hack. And I can imagine this use case is not uncommon
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.
d
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