androidkotlinscrollandroid-jetpack-composelazylist

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.


Solution

  • 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: