[FIXED] How to animate a center alignment in Jetpack Compose?

Issue

I was playing around with the Jetpack Compose basic codelab, and wanted to add an Icon centered in a Row, but I'm unable to animate it.

Is it possible to get a smooth animation, so that the icon is always center-aligned vertically while the content is expanding? Right now it just "jumps". Something similar to the animateContentSize modifier. Tried with this, but couldn't make it work, since in that example it goes from a start alignment to an end, not center

Video attached to clarify what I mean. Check the star icon on the left of each row

@Composable
fun CardContent(name: String) {
    var expanded by remember { mutableStateOf(false) }

    Row(
        modifier = Modifier
            .padding(12.dp)
            .animateContentSize(
                animationSpec = spring(
                    dampingRatio = Spring.DampingRatioMediumBouncy,
                    stiffness = Spring.StiffnessLow
                )
            ),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            imageVector = Icons.Filled.Star, "",
        )
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(12.dp)
        ) {
            Text(text = "Hello, ")
            Text(
                text = name,
                style = MaterialTheme.typography.h4.copy(
                    fontWeight = FontWeight.ExtraBold
                )
            )
            if (expanded) {
                Text(
                    text = ("Composem ipsum color sit lazy, " +
                            "padding theme elit, sed do bouncy. ").repeat(4),
                )
            }
        }
        IconButton(onClick = { expanded = !expanded }) {
            Icon(
                imageVector = if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
                contentDescription = if (expanded) {
                    stringResource(R.string.show_less)
                } else {
                    stringResource(R.string.show_more)
                }

            )
        }
    }
}

Solution

Can you try this one?, I modified your code by wrapping the Text in an AnimatedVisibility scope, though its not exactly like how your sample gif works, but it smoothly animates the Text vertically.

@Composable
fun CardContent(name: String) {
    var expanded by remember { mutableStateOf(false) }
    Row(
        modifier = Modifier
           .padding(12.dp)
            .animateContentSize(
                animationSpec = spring(
                    dampingRatio = Spring.DampingRatioMediumBouncy,
                    stiffness = Spring.StiffnessLow
                )
            ),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            imageVector = Icons.Filled.Star, "",
        )
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(12.dp)
        ) {
            Text(text = "Hello, ")
            Text(
                text = name,
                style = MaterialTheme.typography.h4.copy(
                    fontWeight = FontWeight.ExtraBold
                )
            )
            AnimatedVisibility(
                visible = expanded,
                enter = expandVertically(
                    expandFrom = Alignment.CenterVertically
                ),
                exit = shrinkVertically(
                    shrinkTowards = Alignment.CenterVertically
                ),
            ) {
                Text(
                    text = ("Composem ipsum color sit lazy, " +
                            "padding theme elit, sed do bouncy. ").repeat(4),
                )
            }
        }
        IconButton(onClick = { expanded = !expanded }) {
            Icon(
                imageVector = if (expanded) Icons.Filled.ExpandLess else 
Icons.Filled.ExpandMore,
                contentDescription = null
            )
        }
    }
}

With the added animation parameters,

enter = expandVertically(
      expandFrom = Alignment.CenterVertically
),
exit = shrinkVertically(
      shrinkTowards = Alignment.CenterVertically
)

the animation will be guaranteed to execute in a straight vertical direction.

Answered By - z.y
Answer Checked By - Gilberto Lyons (JavaFixing Admin)