I have to expand and collapse a Row container with horizontalArrangement as SpaceBetween. It should be arranged in the sameway in expanded and collapsed state. Also I want a slow animation from expand to collapse and collapse to expand. If there are 2 Text inside the Row, while expanding one Text should move to left along with the expand and the other Text should move right along with the expand.
I tried 2 approaches, in one approach the arrangement is working but there is no animation while expanding. and the other the animation is working arrangement is not working.
AnimationPOCsTheme {
var isExpanded by remember {
mutableStateOf(false)
}
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier
.fillMaxSize()
.clickable {
isExpanded = !isExpanded
}, color = MaterialTheme.colorScheme.background
) {
Row(
modifier = Modifier
.animateContentSize(animationSpec = tween(3000, easing = LinearEasing))
.let { if (isExpanded) it.fillMaxSize() else it.wrapContentSize(align = Alignment.Center) }
.background(Color.Green),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(text = "Click")
Text(text = "Click2")
}
}
}
Approach 2: Here animation is perfect but arrangement is not exactly what is required, it should move along with the animation:
AnimationPOCsTheme {
var isExpanded by remember {
mutableStateOf(false)
}
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier
.fillMaxSize()
.clickable {
isExpanded = !isExpanded
}, color = MaterialTheme.colorScheme.background
) {
Box(
modifier = Modifier
.wrapContentSize()
.background(Color.Red)
) {
Row(
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier
.expandCollapse(isExpanded)
.background(Color.Green)
) {
Text(text = "Click")
Text(text = "Click2")
}
}
}
}
It looks like youre trying to create a collapsible and expandable Row with Jetpack Compose, along with animations for a smooth transition. Lets try to address the issues you mentioned in your two approaches.
Approach 1 seems to handle the arrangement well but lacks the desired animation. In Approach 2, you have the animation working, but the arrangement is not what you intended.
Lets modify your code to combine the best of both approaches. Well use Modifier.offset to achieve the desired movement of texts during expansion and collapse.
AnimationPOCsTheme {
var isExpanded by remember {
mutableStateOf(false)
}
Surface(
modifier = Modifier
.fillMaxSize()
.clickable {
isExpanded = !isExpanded
},
color = MaterialTheme.colorScheme.background
) {
Row(
modifier = Modifier
.animateContentSize(animationSpec = tween(300), easing = LinearEasing)
.fillMaxSize()
.background(Color.Green),
horizontalArrangement = Arrangement.SpaceBetween
) {
val offsetXFirstText = if (isExpanded) 0.dp else 100.dp
val offsetXSecondText = if (isExpanded) 0.dp else -100.dp
Text(
text = "Click",
modifier = Modifier.offset(x = offsetXFirstText)
)
Text(
text = "Click2",
modifier = Modifier.offset(x = offsetXSecondText)
)
}
}
}
In this modification, we use Modifier.offset to control the horizontal movement of each Text based on the isExpanded state. Adjust the values (100.dp and -100.dp) according to your layout requirements.
This should give you the desired arrangement along with the smooth animation.