I need to achieve sticky header like that (it should add any space between sections);

# compose

[Radoslaw Juszczyk]

I need to achieve sticky header like that (it should add any space between sections);

[Alexander Karkossa]

LazyColumnScope provides a stickyHeader extension. Maybe that will help?

[Radoslaw Juszczyk]

yes, this is what i have used with this result: (image)

I dont want the header to take space, i want it to be drawn over the items

[Albert Chang]

Compose UI doesn't clip children by default so you can use a custom layout and call layout(0, 0) in it.

[Radoslaw Juszczyk]

like that:

stickyHeader {
    Box(modifier =
        Modifier.layout { measurable, constraints ->
            // Measure the composable
            val placeable = measurable.measure(constraints)
            layout(0,0) {
                placeable.placeRelative(0, 0)
            }
        }

    ) {
        Text(text = "A", modifier = Modifier
            .padding(Dp(20f), Dp(20f)))
    }
}

[Radoslaw Juszczyk]

it doesnt get rendered this way

[Albert Chang]

It seems that LazyColumn doesn't show items with a zero size. You can make it 1x1 then. Also you don't need the Box.

Text(
    text = "A",
    modifier = Modifier
        .layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            layout(1, 1) {
                placeable.placeRelative(0, 0)
            }
        }
        .padding(20.dp)
)

[Radoslaw Juszczyk]

it helped with rendering but now it doesnt get pushed up by the next section header correctly

[Radoslaw Juszczyk]

I am trying to do two LazyColumns next to each other which share the scroll state somehow