Thread
#compose
    Archie

    Archie

    2 years ago
    Guys, is there a way to animate size set to
    .fillMaxSize()
    to
    setPrefferedSize(someValue, someValue)
    ?
    Doris Liu

    Doris Liu

    2 years ago
    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.
    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. 🙂
    Archie

    Archie

    2 years ago
    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 -> View.GONE
    Doris Liu

    Doris Liu

    2 years ago
    val conditionalModifier = if (someCondition) Modifier.fillMaxSize() else Modifier.preferredSize(someValue, someValue)
    
    yourComposableFunction(modifier = someExistingModifiers.animateContentSize().then(conditionalModifier))
    By as a parent modifier, I meant putting
    animateContentSize()
    on the left side of the conditional modifier. 🙂
    Archie

    Archie

    2 years ago
    oohhh I see! This is great! Thank you very much 😄
    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

    Doris Liu

    2 years ago
    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 Spacers 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. 🙂
    Archie

    Archie

    2 years ago
    I see. I'll follow your advice with the spacer. Thank you very much.