Skip to content

Instantly share code, notes, and snippets.

View motionLayout13.json5
Transitions: {
default: {
from: 'start',
to: 'end',
onSwipe: {
anchor: 'contentBg',
direction: 'up',
side: 'top'
},
}
View motionLayout12.json5
start: {
date: {
width: 'spread',
height: 'wrap',
start: ['parent', 'start'],
end: ['parent', 'end'],
top: ['subTitleDivider','bottom'],
},
actions: {
width: 'spread',
View motionLayout12.kt
Text(
modifier = Modifier
.layoutId("date")
.fillMaxWidth()
.padding(6.dp),
text = "September, 2022", fontSize = 16.sp,
textAlign = TextAlign.Center,
color = Gray
)
Row(
View motionLayout10.json5
start: {
title: {
width: 'spread',
height: 'wrap',
start: ['parent', 'start'],
end: ['parent', 'end'],
top: ['parent','top',200],
},
titleDivider: {
width: 'spread',
View motionLayout10.kt
Text(
text = "Fresh Strawberry Cake", fontSize = 22.sp,
textAlign = TextAlign.Center,
fontWeight = FontWeight.SemiBold, modifier = Modifier
.layoutId("title")
.fillMaxWidth()
.padding(10.dp)
)
Divider(
View motionLayout9.json5
start: {
...
contentBg: {
width: 'spread',
height: 'spread',
start: ['parent', 'start',16],
end: ['parent', 'end',16],
top: ['parent','top', 200],
bottom: ['parent','bottom'],
}
View motionLayout9.kt
Box(
modifier = Modifier
.fillMaxHeight()
.background(White, shape = RoundedCornerShape(topStart = corners, topEnd = corners))
.layoutId("contentBg")
)
View motionLayout8.json5
start: {
headerImage: {
width: "spread",
height: 250,
top: ['parent', 'top', 0],
start: ['parent', 'start', 0],
end: ['parent', 'end', 0],
translationY: 0,
alpha: 1
}
View motionLayout7.kt
Image(
painter = painterResource(id = R.drawable.cake), contentDescription = "",
contentScale = ContentScale.Crop,
modifier = Modifier
.layoutId("headerImage")
)
View motionLayout6.kt
val context = LocalContext.current
val motionScene = remember {
context.resources
.openRawResource(R.raw.motion_scene)
.readBytes()
.decodeToString()
}
MotionLayout(
motionScene = MotionScene(content = motionScene),