Jetpack compose - sticky header with alpha color items overlap header

Question

I've similar problem as described here where my items in LazyColumn overlap the sticky header. The problem is that my header background has Alpha (the color is white.copy(alpha = 0.15f))

When I change the background color to Black, it works fine, but I need this specific color.

I also tried to use a Card with elevation, but it doesn't help

Card(
                    colors = CardDefaults.cardColors(
                        containerColor = white_alpha15
                    ),
                    shape = RectangleShape,
                    elevation = CardDefaults.cardElevation(defaultElevation = 5.dp),
                    modifier = Modifier
                        .fillParentMaxWidth()
                        .clickable(onClick = {
                            onClick(header)
                        }, enabled = true),
                    ) {
                    Row(
                        Modifier.fillMaxWidth()
                    ) { 
                              .../...
                       }
                    }

Is it possible to have a sticky header with a alpha color and not have this problem?

Thanks.

score 0 · Answer 1 · answered Aug 23 '23 at 15:30

Add compositeOver(Color) when defining the background color for the header. This will create a new color with the desired alpha value applied without making it transparent:

val white_alpha15 = white.copy(alpha = 0.15f).compositeOver(MaterialTheme.colors.background)

Then the header background will be opaque when displayed over the list contents.

Jetpack compose - sticky header with alpha color items overlap header

1 Answers1