In AnimatedVisibility the parent view get pushed u...

# compose

[sen kumar]

In AnimatedVisibility the parent view get pushed upwards when I make them visible - How do I make the child view push downwards ?

[Deepak Gahlot]

We are facing a similar issue

Screen Recording 2021-03-05 at 8.47.50 AM.mov

[Doris Liu]

Can you share a code snippet so I can see how it's used?

[Deepak Gahlot]

Sure, give me a moment

[Deepak Gahlot]

I'm creating a sample project , so you can play with it.

[Deepak Gahlot]

@Doris Liu https://github.com/deepakgahlot98/IssueWithDialog

[Deepak Gahlot]

check this out, Expand Any section and then Expand any of the sub section.

[Doris Liu]

Awesome. Thanks @Deepak Gahlot

[Doris Liu]

Thanks for creating the repro case. That was very helpful.👍 The root cause here is that AnimatedVisibility didn't support child content size change. So in this nested AnimatedVisibility case, the inner one adds more content but the outer one didn't change its size to accommodate that. The good news is we added support for child content size change yesterday: https://issuetracker.google.com/172359738. Just verified the repro case with the fix, it's working as expected (i.e. the same final result as jump cut). The fix will be in the next release (going out next week).

[Deepak Gahlot]

@Doris Liu I have one more query, So if you look at the code snippet below

[Deepak Gahlot]

fun ExpandableContent(
    questions: ArrayList<ItemsItem>,
    qResponse: Response,
    visible: Boolean = true,
    initialVisibility: Boolean = false,
    questionnaireViewModel: QuestionnaireViewModel,
    topItemId: String, topItemLabel: String
) {
    val enterFadeIn = remember {
        fadeIn(
            animationSpec = TweenSpec(
                durationMillis = FADE_IN_ANIMATION_DURATION,
            )
        )
    }
    val enterExpand = remember {
        expandVertically(animationSpec = tween(EXPAND_ANIMATION_DURATION))
    }
    val exitFadeOut = remember {
        fadeOut(
            animationSpec = TweenSpec(
                durationMillis = FADE_OUT_ANIMATION_DURATION,
                easing = LinearOutSlowInEasing
            )
        )
    }
    val exitCollapse = remember {
        shrinkVertically(animationSpec = tween(COLLAPSE_ANIMATION_DURATION))
    }
    AnimatedVisibility(
        visible = visible,
        initiallyVisible = initialVisibility,
        enter = enterFadeIn,
        exit = exitCollapse + exitFadeOut
    )
//    if(visible)
    {
        Divider(color = colorResource(id = R.color.gray9), thickness = 1.dp)
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 10.dp, start = 20.dp, end = 12.dp, bottom = 10.dp)
        ) {
            var questionnaireChildSectionFieldsTable: Table<String, String, ItemsItem> =
                HashBasedTable.create<String, String, ItemsItem>()
            for (question in questions) {
                LoggingService.instance.logDebug(
                    TAG,
                    "ExpandableContent:  ******* " + question.qualifiedNumber
                )
                ViewItem(
                    question = question,
                    qResponse = qResponse,
                    questionnaireChildSectionFieldsTable
                )
                CallQuestionTypeViews(question = question, qResponse)
            }
        }
    }
}

[Deepak Gahlot]

I use enterExpand + enterFadeIn in the enter param of the AnimateVisibility

val enterExpand = remember {
        expandVertically(animationSpec = tween(EXPAND_ANIMATION_DURATION))

[Deepak Gahlot]

but because i'm also using a nested expand/collapse view , the height is gives to the Card initially is correct, but then the nested component is expanded the height of thr Card remains the same.

[Deepak Gahlot]

However if i remove the enterExpand from the param of the AnimateVisibility it works fine, i.e., the card's height expands with the nested expand/collapse component

[Deepak Gahlot]

So the question i have is, Can we make the initialHeight in the expandVertically to change with the nested component

[Deepak Gahlot]

@Stable
@ExperimentalAnimationApi
fun expandVertically(
    expandFrom: Alignment.Vertical = Alignment.Bottom,
    initialHeight: (fullHeight: Int) -> Int = { 0 },
    animationSpec: FiniteAnimationSpec<IntSize> = spring(),
    clip: Boolean = true
): EnterTransition {
    return expandIn(
        expandFrom.toAlignment(),
        { IntSize(it.width, initialHeight(it.height)) },
        animationSpec,
        clip
    )
}

[Doris Liu]

but because i'm also using a nested expand/collapse view , the height is gives to the Card initially is correct, but then the nested component is expanded the height of thr Card remains the same.

Yes, that's what the issue linked above is referring to. AnimatedVisibility has a size change animation (if expand/shrink is used). The size of the Layout (owned by AnimatedVisibility) is read from that size change animation, which didn't update its value once the enter transition is finished. That's why when you don't use shrink/expand, you don't hit the issue (because no size change animation is created).

So the question i have is, Can we make the initialHeight in the expandVertically to change with the nested component

If I understand the intention correctly, this request is already addressed by the fix. New behavior after the fix: once the enter transition is finished, the outter AnimatedVisibility will be snapping its size to whatever its content reports. In the case of nested AV, as the inner one expands it will continuously influence the content size of the outer one. The outer one will appear to be animating as a result.

If you'd like to play with tip of tree androidx-main, I'd love to know how the new behavior works for you. 🙂