Jetpack Compose animation is laggy if runs inside xml ComposeView with wrap_content height

Viewed 183

I have kind of persistent BottomSheet styled Composable added to Fragment's xml (of course, using ComposeView). I need it to take only the required height, so it's only attached to start, end and bottom of parent ConstraintLayout, like so:

<androidx.compose.ui.platform.ComposeView
        android:id="@+id/dashboard"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

ComposeView's root is a Column that contains some type of expandable composable and buttons underneath it. I need ComposeView to shrink or grow when expandable content is collapsed/revealed respectively. I have expandable's content wrapped in AnimatedContent:

@Composable
fun DashboardExpandableContent(modifier: Modifier = Modifier, expanded: Boolean) {
    AnimatedContent(
        modifier = modifier,
        targetState = expanded,
        transitionSpec = {
            fadeIn(animationSpec = tween(durationMillis = 250)) with
                    fadeOut(animationSpec = tween(durationMillis = 250)) using SizeTransform()
        }
    ) { currentlyExpanded ->
        if (currentlyExpanded) {
            ExpandedContent()
        } else {
            CollapsedContent()
        }
    }
}

But everything shakes like crazy during animation when I set xml height to wrap_content. Looks like it's because Android tries to measure my ComposeView during animation.

A possible hack I found is to change height in xml to a static value (i.e, constraint it to parent top), and add a Spacer with weight 1.0f as the Column's first child. Then the animation works just fine.

But I need it to have a dynamic height because other views (like onboarding popups) in xml layout rely on that. How can I make it work?

0 Answers
Related