Nested Scrolling in Android compose

Question

I have a Column and inside the Column, I have a Spacer with a specific size and a LazyColumn. What is happening now is that when I want to scroll, First LazyColumn starts to scrolling, and when it reaches the end, the Column starts scrolling to the end.

What I want is that first the Column starts to scroll and when it reaches the end, My LazyColumn starts to scroll.

This is my sample code

 Column(
            modifier = Modifier
                .fillMaxHeight()
                .verticalScroll(scrollState),
        ) {
            Spacer(modifier = Modifier.height(300.dp))
            LazyColumn(
                modifier = Modifier
                    .height(LocalConfiguration.current.screenHeightDp.dp)
                    .fillMaxSize(),
            ) {
                items(50) { item ->
                    Text(modifier = Modifier.height(40.dp), text = "ITEM NUMBER: $item")
                }
            }
        }

You can't add Column with vertical scroll and lazy colum. – Tippu Fisal Sheriff May 16 '23 at 17:51 — Tippu Fisal Sheriff, May 16 '23 at 17:51

score 1 · Answer 1 · edited May 16 '23 at 17:56

1

Add your Spacer code inside the LazyColumn as one of the item and remove Column.

LazyColumn(modifier = Modifier.fillMaxSize()) {
            item {
                Spacer(modifier = Modifier.height(300.dp))
            }
            items(50) { item ->
                Text(modifier = Modifier.height(40.dp), text = "ITEM NUMBER: $item")
            }
        }

edited May 16 '23 at 17:56

Tippu Fisal Sheriff

2,177
11
19

answered May 16 '23 at 17:36

Thirumaran

51
1

score 0 · Answer 2 · answered May 15 '23 at 03:01

I am not sure, what your ultimate goal is, if you are going to have some additional content in the column or not but for this particular example, I don't think nested scrolling is needed :)

The code below should behave as you wanted. It will scroll the content including the spacer which is now replaced by the content padding. Hope this helps! :)

LazyColumn(
    modifier = Modifier.fillMaxSize(),
    contentPadding = PaddingValues(top = 300.dp),
) {
    items(50) { item ->
        Text(
            modifier = Modifier.height(40.dp),
            text = "ITEM NUMBER: $item"
        )
    }
}

Nested Scrolling in Android compose

2 Answers2