Now my content of the "LazyColumn" does not scroll to the bottom. I should have 60 (0-59) items visible.
However when my header is open I can only see 50 (cannot scroll more down)
Layout inspector shows the view under:
NOTE: This works perfectly fine on a Pixel3 or non foldable phones. What am I doing wrong?
I have the following motionlayout:
MotionLayout(
motionScene = MotionScene(content = motionScene),
motionLayoutState = motionState,
modifier = Modifier
.fillMaxSize()
.background(Color.LightGray)
.constrainAs(motion) {
top.linkTo(filters.bottom)
}
) {
Box(
modifier = Modifier
.layoutId("header")
.fillMaxWidth()
.background(colorResource(id = R.color.xelionMainColor))
)
Box(
modifier = Modifier
.fillMaxHeight()
.background(colorResource(id = R.color.xelionMainColor))
.layoutId("contentBg")
)
Text(
text = item.commonName,
textAlign = TextAlign.Center,
modifier = Modifier
.layoutId("title")
.fillMaxWidth()
.background(colorResource(id = R.color.xelionMainColor)),
fontSize = 22.sp,
style = TextStyle(
fontFamily = FontFamily.SansSerif,
fontWeight = FontWeight.Normal,
color = colorResource(id = R.color.white)
),
)
updateAddressableExtras(item, activity)
Box(
Modifier
.layoutId("avatarBox")
.clip(RoundedCornerShape(8.dp))
.background(colorResource(id = R.color.grey_avatar))
) {
avatarManager.LoadInCompose(src = AvatarSource.from(item), 8.dp, 128.dp)
composableHandler.StatusComposable(R.drawable.ic_square_phone_not_available, 128.dp)
}
Box(
modifier = Modifier
.layoutId("actions")
.background(colorResource(id = R.color.xelionMainColor))
.padding(0.dp)
) {
composableHandler.ExpandableContent(
item = item,
listener = listener,
isFromAddressable = true
)
}
IconButton(
onClick = { onBack?.invoke() },
modifier = Modifier.layoutId("back"),
) {
Icon(Icons.Filled.ArrowBack, null, tint = Color.White)
}
if (!isOverview) {
IconButton(
onClick = {
isExpanded = !isExpanded
if (!isExpanded) isFiltersExpanded = false
},
modifier = Modifier.layoutId("menu"),
) {
Icon(painterResource(R.drawable.baseline_more_vert_24), null, tint = Color.White)
}
}
Box(
modifier = Modifier
.fillMaxHeight()
.layoutId("contentBox")
.background(colorResource(id = R.color.inbox_list_color))
) {
content()
}
}
Where content is:
content: @Composable () -> Unit,
And I add a LazyColumn in it from different fragments
val listItems = ArrayList<String>()
repeat(60){
listItems.add("TEST $it")
}
LazyColumn(Modifier.fillMaxSize()) {
items(listItems){
Text(it)
}
}
This is my motion scene:
{
ConstraintSets: {
start: {
header: {
width: "spread",
height: 150,
top: ['parent', 'top', 0],
start: ['parent', 'start', 0],
end: ['parent', 'end', 0],
translationY: 0,
},
avatarBox: {
width: 128,
height: 128,
top: ['parent', 'top', 5],
start: ['parent', 'start', 0],
end: ['parent', 'end', 0],
centerHorizontally: 'parent'
},
contentBg: {
width: 'spread',
height: 'spread',
start: ['parent', 'start',0],
end: ['parent', 'end',0],
top: ['parent','top', 150],
bottom: ['parent','bottom'],
},
back: {
width: 38,
height: 38,
start: ['parent', 'start', 16],
top: ['parent', 'top'],
},
menu: {
width: 38,
height: 38,
end: ['parent', 'end', 16],
top: ['parent', 'top', 0],
},
title: {
width: 'spread',
height: 'wrap',
start: ['parent', 'start'],
end: ['parent', 'end'],
top: ['parent','top',140],
},
actions: {
width: 'spread',
height: 50,
start: ['parent', 'start',0],
end: ['parent', 'end',0],
top: ['extraLayout','bottom',4],
},
workLayout: {
width: 'spread',
height: 'wrap',
start: ['parent', 'start',0],
end: ['parent', 'end',0],
top: ['title','bottom',4],
},
jobTitleLayout: {
width: 'spread',
height: 'wrap',
start: ['parent', 'start',0],
end: ['parent', 'end',0],
top: ['workLayout','bottom',4],
},
extraLayout: {
width: 'spread',
height: 'wrap',
start: ['parent', 'start',0],
end: ['parent', 'end',0],
top: ['jobTitleLayout','bottom',4],
},
contentBox: {
width: 'spread',
height: 'spread',
start: ['parent', 'start',0],
end: ['parent', 'end',0],
top: ['actions','bottom', 0],
bottom: ['parent','bottom']
}
},
end: {
header: {
width: "spread",
height: 150,
top: ['parent', 'top', 0],
start: ['parent', 'start', 0],
end: ['parent', 'end', 0],
translationY: -140,
},
avatarBox: {
width: 32,
height: 32,
top: ['parent', 'top', 5],
start: ['parent', 'start', 50],
},
contentBg: {
width: 'spread',
height: 'spread',
start: ['parent', 'start'],
end: ['parent', 'end'],
top: ['parent','top'],
bottom: ['parent','bottom'],
},
back: {
width: 38,
height: 38,
start: ['parent', 'start', 16],
top: ['parent', 'top'],
},
menu: {
width: 38,
height: 38,
end: ['parent', 'end', 16],
top: ['parent', 'top', 0],
},
title: {
width: 'spread',
height: 'wrap',
start: ['avatarBox', 'end'],
end: ['menu', 'start'],
top: ['parent','top',6],
},
actions: {
width: 'spread',
height: 50,
start: ['parent', 'start',0],
end: ['parent', 'end',0],
top: ['extraLayout','bottom',4],
},
workLayout: {
width: 'spread',
height: 0,
start: ['parent', 'start',0],
end: ['parent', 'end',0],
top: ['title','bottom',4],
},
jobTitleLayout: {
width: 'spread',
height: 0,
start: ['parent', 'start',0],
end: ['parent', 'end',0],
top: ['workLayout','bottom',4],
},
extraLayout: {
width: 'spread',
height: 0,
start: ['parent', 'start',0],
end: ['parent', 'end',0],
top: ['jobTitleLayout','bottom',4],
},
contentBox: {
width: 'spread',
height: 'spread',
start: ['parent', 'start'],
end: ['parent', 'end'],
top: ['actions','bottom',0],
bottom: ['parent','bottom'],
},
},
},
Transitions: {
default: {
from: 'start',
to: 'end',
onSwipe: {
anchor: 'contentBg',
direction: 'up',
side: 'top',
},
}
}
}