Hey! I'm curious about how `elevation` works in Compose. If two `Surfaces` with the same `elevation`...

# compose

[Bjarne Gelotte]

Hey! I'm curious about how elevation works in Compose. If two Surfaces with the same elevation are directly adjacent, they still cast a shadow on each other. How come? Is it possible to avoid this somehow? I would be super grateful for some guidance! Example and code in thread.

[Bjarne Gelotte]

For me this creates a problem when I want to display elevated items in a LazyColumn, to appear as a single card. I don't want the thin shadow line between each item.

[Bjarne Gelotte]

Code:

@Composable
private fun List() {
    Surface(
        modifier = Modifier.fillMaxWidth(),
        color = Color.White
    ) {
        LazyColumn(modifier = Modifier.fillMaxSize()) {
            item { Spacer(modifier = Modifier.padding(4.dp)) }
            item { ListItem(text = "Item 1") }
            item { ListItem(text = "Item 2") }
            item { ListItem(text = "Item 3") }
        }
    }
}

@Composable
private fun ListItem(text: String) {
    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 8.dp, end = 8.dp),
        color = Color.White,
        elevation = 2.dp
    ) {
        Text(
            modifier = Modifier.padding(4.dp),
            text = text
        )
    }
}

[Nabeel]

If you only want elevation for the entire card its better to wrap LazyColumn in a Box or any other layout and give the elevation to it.

[Bjarne Gelotte]

But what if I want to add a header (Text ) to the LazyColumn, above the card, with no elevation? Then that approach doesn't work, right?

[alorma]

Try adding Modifier.zIndex(1f) to the adjacent composables

[Bjarne Gelotte]

I've tried setting zIndex(1f) to the list items, unfortunately the result is unchanged

[Zach Klippenstein (he/him) [MOD]]

Can you file a bug for this? That said, there might be other workarounds.

But what if I want to add a header (Text ) to the LazyColumn, above the card, with no elevation? Then that approach doesn’t work, right?

Sure it does, in the example you posted. But in that example, it doesn’t make sense to use a lazy column in the first place because there are so few items in the group. Does your real code have a lot more items per card group?

[Bjarne Gelotte]

Yeah sorry, maybe the example wasn't optimal. I tried to make it as small as possible. In my real case I need to display some items without elevation (such as headers) and the item list can be arbitrarily long (hence the use of LazyColumn ).

[Bjarne Gelotte]

For future reference: sadly it seems that this view isn't possible to do in Compose using LazyColumn : https://issuetracker.google.com/issues/170472398. I have tried to work around it but haven't managed to find a solution.