I have a row and inside that I have a Text and a Button
Initially only Text Will be visible but as soon as animation starts the button will come from the
right to left and text will wrap around and will come to multiple lines
Here is the below code I have tried
What mistake I am making here any help would be appriciated here stuck here from quite some time
You can copy paste and run the whole code just make sure to add this dependency
implementation("androidx.constraintlayout:constraintlayout-compose:1.1.0-alpha13")
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
TestCompose()
}
}
}
@Composable
fun TestCompose() {
val context = LocalContext.current
val scene = MotionScene() {
val text = createRefFor("text_block")
val button = createRefFor("button_block")
val row = createRefFor("row")
val start1 = constraintSet {
constrain(text) {
top.linkTo(parent.top, 15.dp)
start.linkTo(parent.start, 15.dp)
width = Dimension.wrapContent
height = Dimension.wrapContent
visibility = Visibility.Visible
}
constrain(row) {
width = Dimension.fillToConstraints
height = Dimension.wrapContent
}
constrain(button) {
visibility = Visibility.Gone
width = Dimension.value(40.dp)
height = Dimension.value(20.dp)
}
}
val end1 = constraintSet {
constrain(text) {
top.linkTo(parent.top, 15.dp)
start.linkTo(parent.start, 15.dp)
width = Dimension.wrapContent
height = Dimension.wrapContent
customColor("background", Color.Red)
}
constrain(button) {
visibility = Visibility.Visible
top.linkTo(text.top, 20.dp)
start.linkTo(text.end, -100.dp)
end.linkTo(parent.end, 200.dp)
width = Dimension.value(20.dp)
height = Dimension.value(20.dp)
translationX = -400.dp
}
constrain(row) {
width = Dimension.wrapContent
height = Dimension.wrapContent
}
}
transition(
from = start1,
to = end1,
name = "default",
) {
}
}
val progress = remember {
Animatable(0f)
}
val animatetoEnd by remember {
mutableStateOf(true)
}
MotionLayout(
motionScene = scene,
progress = progress.value,
modifier = Modifier.fillMaxWidth()
) {
LaunchedEffect(key1 = animatetoEnd) {
progress.animateTo(
if(animatetoEnd) 1f else 0f,
animationSpec = tween(5000)
)
}
Row(
modifier = Modifier
.padding(10.dp)
.fillMaxWidth()
.layoutId("row")
) {
Text(
text = "You have selected our best seller seats(s))",
modifier = Modifier
.layoutId("text_block")
.fillMaxWidth(),
fontWeight = FontWeight.W500
)
Button(
onClick = {},
modifier = Modifier
.background(Color.Red)
.layoutId("button_block")
) {
Text(text = "Click Here")
}
}
}
}
The Output that I am getting here
The desired output
