Hi, what is the correct way to implement the attac...

# compose-android

[Rupesh Sasne]

Hi, what is the correct way to implement the attached UI?

At first it looks something like following

- LazyColumn
---- Card 1
-------- LazyColumn
------------ a1
------------ a2
------------ a3
------------ .
------------ .
------------ an
---- Card 2
-------- LazyColumn
------------ b1
------------ b2
------------ .
------------ .
------------ bm

and so on...

but I believe the above approach is not performance efficient as it has nested lazycolumns...

Another approach would be something like by flattening the items

- LazyColumn
---- Card 1 Header
---- a1
---- a2
---- .
---- .
---- an
---- Card 1 Footer
---- spacer

and so on...

[ephemient]

it'll be hard to get the shadows and other effects right with the second approach. cards that are large enough to require laziness inside are not a great idea…

[agrosner]

You can splice the border up and emulate it, pretty sure you could do it even with splicing it

[agrosner]

Second approach is what we do …but we also don’t have oversized cards with multiple items. But its possible

[Rupesh Sasne]

I tried elevating the individual items with shadow... but that doesn't look good as it clearly separates them from each other... 😅

[Rupesh Sasne]

@agrosner what do you meant by splicing the border up?

[Stylianos Gakis]

If you explicitly clip the top border at the bottom, the bottom border at the top, and everything else both top and bottom, do the shadows still go over to the next item?

[Rupesh Sasne]

ll try that..

[agrosner]

Exactly you’ll need to only do it on certain sides of the components

[Rupesh Sasne]

@agrosner / @Stylianos Gakis
couldn't find the correct API to do so, maybe I need to explore this clipping part a little more as I am new to compose... here is what I have achieved so far...

@Composable
fun FakeCardBottom(modifier: Modifier = Modifier) {
    val shape = RoundedCornerShape(bottomStart = 16.dp, bottomEnd = 16.dp)

    Box(
        modifier = modifier
            .shadow(4.dp, shape)
            .clip(shape)
            .background(Color.White)
            .fillMaxWidth()
            .height(16.dp)
    )
}

could you point me to the correct API?