i am trying to create a list item in jetpack compose.
here is what i have done so far:
@OptIn(ExperimentalMotionApi::class)
@Preview(showBackground = true)
@Composable
fun Item2MotionLayout(progress: Float = 0f) {
val context = LocalContext.current
val sceneFile = R.raw.motion_live
val motionSceneContent = remember(sceneFile) {
context.resources
.openRawResource(sceneFile)
.readBytes()
.decodeToString()
}
val motionScene = MotionScene(motionSceneContent)
MotionLayout(
motionScene = motionScene,
progress = progress,
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.background(Color.Yellow)
) {
Image(
modifier = Modifier
.size(48.dp)
.clip(CircleShape)
.layoutId("icon"),
painter = painterResource(R.drawable.person),
contentDescription = null,
contentScale = ContentScale.Crop
)
Text("Ali Asjad", modifier = Modifier.layoutId("title"))
Text(
"14-09-2024",
fontSize = 11.sp,
modifier = Modifier
.padding(start = 10.dp)
.layoutId("date")
)
Text(
stringResource(R.string.lorem),
maxLines = 2, // Maximum 2 lines
overflow = TextOverflow.Ellipsis,
modifier = Modifier
.layoutId("text")
)
Image(
modifier = Modifier
.size(50.dp)
.clip(RoundedCornerShape(0.dp))
.layoutId("picture"),
painter = painterResource(R.drawable.person),
contentDescription = null,
contentScale = ContentScale.Crop
)
Icon(
imageVector = Icons.Filled.ArrowDropDown,
modifier = Modifier
.size(20.dp)
.layoutId("arrowIcon"),
contentDescription = null
)
}
this is my json file:
{
ConstraintSets: {
start: {
icon: {
start: ['parent', 'start'],
top: ['parent', 'top'],
bottom: ['parent', 'bottom']
},
title: {
start: ['icon', 'end'],
top: ['parent', 'top']
},
date: {
start: ['title', 'end'],
top: ['parent', 'top']
},
text: {
start: ['icon', 'end'],
end: ['picture', 'start'],
top: ['title', 'bottom'],
width: 'spread',
},
picture: {
end: ['arrowIcon', 'start'],
top: ['parent', 'top']
},
arrowIcon: {
end: ['parent', 'end'],
top: ['parent', 'top']
}
},
end: {
icon: {
start: ['parent', 'start'],
top: ['parent', 'top'],
bottom: ['text', 'bottom']
},
title: {
start: ['icon', 'end'],
top: ['parent', 'top']
},
date: {
start: ['title', 'end'],
top: ['parent', 'top']
},
text: {
start: ['title', 'start'],
end: ['arrowIcon', 'start'],
top: ['title', 'bottom'],
width: 'spread'
},
picture: {
start: ['icon', 'end'],
top: ['text', 'bottom'],
width: 150,
height: 150,
},
arrowIcon: {
end: ['parent', 'end'],
top: ['parent', 'top']
}
}
},
Transitions: {
default: {
from: 'start',
to: 'end',
KeyFrames: {
KeyAttributes: [
{
target: ['picture'],
// frames: [0,25,50,75, 100],
}
],
}
}
}
}
I’m facing an issue where MotionLayout is not adjusting its height correctly in the collapsed state. The background of the MotionLayout is yellow, and it’s taking the height of its end state even in the start state. I want the height to increase gradually with the animation as it expands, with the height dynamically adjusting according to the content.
Is this the correct approach for implementing this layout, or am I missing something? How can I ensure that the MotionLayout properly wraps its height before the animation starts?