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

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?

enter image description here

enter image description here

Thank you in advance for your help.

androidkotlinscrollandroid-jetpack-composelazylist


Solution 1:[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:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions