How to show items of lazylist out of the Card in Jetpack Compose

Question

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.

Answer 1

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: