CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-nestedscrollviewandroid-compose-layout
Ehsan
Ehsan

Reputation: 2781

Nested Scrolling in Android compose

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")
                }
            }
        }

Upvotes: 0

Views: 2663

Answers (2)

Thirumaran
Thirumaran

Reputation: 51

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")
            }
        }

Upvotes: 1

renybytes_
renybytes_

Reputation: 251

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"
        )
    }
}

Upvotes: 0

Related Questions