Guys is there a way to animate size set to ` fillMaxSize ` t

Question

Guys is there a way to animate size set to ` fillMaxSize ` to `setPrefferedSize someValue someValue `

Doris Liu · Answer

I would set `animateContentSize ` as the parent modifier up the modifier chain from one of these two that you swap in out Alternatively putting it on its parent composable could also work if the changing content is the last child

Doris Liu · Answer

But if you are going for a different look where the content gets relaid out based on each intermediate size from the animation I would love to understand your use case better slightly smiling face

Archie · Answer

Im sorry I think im a bit confuse what do you mean by `animateContentSize ` as the parent May I ask for a code snippet please Thank you very much but for my usecase I only really need to animate a size change similar to how ```Transition beginDelayedTransition view toggleVisibility switches between View VISIBLE gt View GONE```

Doris Liu · Answer

```val conditionalModifier = if someCondition Modifier fillMaxSize else Modifier preferredSize someValue someValue yourComposableFunction modifier = someExistingModifiers animateContentSize then conditionalModifier ```

Doris Liu · Answer

By as a parent modifier I meant putting `animateContentSize ` on the left side of the conditional modifier slightly smiling face

Archie · Answer

oohhh I see This is great Thank you very much D

Archie · Answer

Hi < Doris Liu> `animateContentSize ` works really well for containers When I use it with `Box ` it work pretty well but when I try doing the same thing with `Button ` the animation gets junky If I add `animateContentSize ` in `Button ` like so ```var visibility by remember mutableStateOf true val conditionalModifier = if visibility Modifier fillMaxWidth else Modifier wrapContentWidth Button modifier = Modifier animateContentSize animSpec = tween durationMillis = 3000 clip = false then conditionalModifier onClick = visibility = visibility ``` The animation doesnt run properly I then tried moving the animation to the `Text ` child of the `Button ` but although the animation runs smooth the `Text ` s `textAlign` doesn t animate with the size change so the text just jumps to final position I ll try sending screenshots once I am able to record Any advice for this scenario

Doris Liu · Answer

`animateContentSize` doesn t work very well with `Surface` at the moment because its clipping logic is executed before instead of after `Surface` s own clipping We are trying to figure out a solution for that In the meantime I would recommended working around the issue by having `animateContentSize` on the children of the `Button` Sounds like you also wanted the text to animate from its previously centered right aligned position to the new position That s not what `animateContentSize` is designed for One possible solution is to add spacers as siblings of the text to achieve its alignment and put `animateContentSize` on the `Spacer`s to achieve animating the movement of the text as well as the total size of the Button Please let me know if that works for you slightly smiling face

Archie · Answer

I see I ll follow your advice with the spacer Thank you very much