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)