Is there an `animateContentSize` modifier that doe...
# compose
s
Is there an
animateContentSize
modifier that does not clip the item to its bounds? And I’d love to understand the reason that it is a default without a parameter that can change it @Doris Liu My use case is that I have a simple Card inside a RecyclerView that I’d like to animate when it changes, but the fact that it’s forced to clip bounds cuts the shadow and makes it look super ugly. Is there maybe a different API I should be using instead? For now I simply copy-pasted the private functions existing in the library and removed the
clipToBounds
call and it does exactly what I wanted it to.
d
Have you tried putting
animateContentSize
on the direct child of the card, instead of on the Card itself? The reason why it clips is that the way
animateContentSize
works is it reports its bounds/measured size as an animated size (could be smaller than actual child size) during the animation. Without clipping, the child could easily draw outside of parent, and siblings could potentially draw over the temporarily out-of-bound child. Clipping does create a problem when you use a Surface, but not clipping you'll have a different set of problems. Therefore the recommendation is to put
animateContentSize
on the direct child of a Surface.
s
Copy code
Card(//stuff) {
    Box(Modifier.animateContentSize()) { // Added this line, had nothing here before
        when (data) {
            is FailedToRetrieve -> SomeComposable1(data)
            is Loading -> SomeComposable2(data)
            is Retrieved -> SomeComposable3(data)
        }
    }
}
There was nothing to put the modifier on, but I guess adding a Box is the best way to add some sort of “free” wrapper that changes nothing, to avoid having to add it to all the composables. But yeah this seems to be working just fine now thank you! I now see why it needs to be clipped, was non-obvious to me before looking into the source code but luckily that’s super simple with compose!