I have LazyRow in a Card and I want scrolling items to come outside the card, could you please guide me, how can I do that?
Thank you in advance for your help.
When you need to display something on top of Card
, you can use Box
. You can calculate the needed padding for it to match the card. Think of Card
as just a background view in this case.
val outerPadding = 20.dp
val innerPadding = 20.dp
Box {
Card(
backgroundColor = Color.White,
elevation = 10.dp,
modifier = Modifier.padding(outerPadding).aspectRatio(1f).fillMaxWidth()
) {
}
Column(
Modifier
.matchParentSize()
.padding(vertical = outerPadding + innerPadding)
) {
Text(
"Your title",
modifier = Modifier.padding(horizontal = outerPadding + innerPadding)
)
HorizontalPager(
count = 10,
contentPadding = PaddingValues(horizontal = outerPadding + innerPadding),
itemSpacing = innerPadding / 2,
modifier = Modifier.weight(1f)
) {
Box(Modifier.fillMaxSize().background(Color.Green))
}
Text(
"Your indicator",
modifier = Modifier
.padding(horizontal = outerPadding + innerPadding)
.align(Alignment.CenterHorizontally)
)
}
}
Result: