Lets assume i want to have a LazyColumn where the ...

# compose

[Timo Drick]

Lets assume i want to have a LazyColumn where the first and last elements do have rounded edges. So that during scrolling when we are not at the top or at the bottom there would be no rounded edges. Anyone have an idea how to archive this? In the screencast you see the version where the list do have reounded edges all the time even if i am not at the beginning or end of the list.

Screen_recording_20230909_224018.mp4

[s3rius]

You should be golden if you apply the corners to the list items instead. Apply the upper rounded corners to the first list element, and the lower rounded corners to the last. All the other items should have no rounded corners.

Kinda like this (written from memory)

val cornerRadius = 5.dp
LazyList {
    items(yourListOfItems) { index, item ->
        val cornerShape = when(index) {
            0 -> RoundedCornerShape(topLeft = cornerRadius, topRight = cornerRadius)
            yourListOfItems.size - 1 -> RoundedCornerShape(bottomLeft = cornerRadius, bottomRight = cornerRadius)
            else -> null
        }
        
        Box(modifier = if (cornerShape != null) Modifier.clip(cornerShape) else Modifier) {
            // Your item
        }
    }
}

[Timo Drick]

It still looks a little bit wired to me how this scrolls. Maybe i should also considering to use a scrim effect when there is s.th. to scroll left?

Screen_recording_20230909_231928.mp4

[ascii]

I get what you're trying to do, to give some sort of an obvious signal that there's more to scroll.

However, when we had fade-edges in our old non-Compose code (android:requiresFadingEdge), the only feedback we received about it was that people didn't like it. Most users (apparently) don't prefer any scrim/fade applied at the edges of scroll containers.

Consider a scrollbar instead.

[Timo Drick]

Thank you very much for feedback.
It is not only about that the user know that there is s.th. to scroll. It is also that the content just disapears. I think normally you would have a list which goes from edge to edge. But here it just stops. Maybe i should also consider make the list fullscreen and the title would be just elements in the list.

[dewildte]

You can use the LazyListState to observe visible items in the list. If the first item and the last item in your list of items are not contained in the list of visible items then you can apply an animation to the rounding of the list container.