Nested scroll not work when using Android compose with NestedScrollView

Question

I have a parent composable that is scrollable and contains a child AndroidView. Inside the AndroidView, there is a NestedScrollView. I expected the child NestedScrollView to be able to scroll before the parent composable, but in reality, it is not able to scroll. Here is my code:

@Composable
fun TestScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())

    ) {
        AndroidView(
            factory = {
                NestedScrollView(it).apply {
                    ViewCompat.setNestedScrollingEnabled(this, true)

                    layoutParams = FrameLayout.LayoutParams(
                        FrameLayout.LayoutParams.MATCH_PARENT,
                        FrameLayout.LayoutParams.MATCH_PARENT
                    )
                    addView(TextView(it).also { tv ->
                        tv.layoutParams = ViewGroup.MarginLayoutParams(
                            FrameLayout.LayoutParams.WRAP_CONTENT,
                            FrameLayout.LayoutParams.WRAP_CONTENT
                        )
                        tv.text = "Inner scrollable"
                        tv.textSize = 100f
                        tv.setBackgroundColor(Color.Blue.toArgb())
                    })
                }
            }, modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .clipToBounds()
        )


        Divider(color = Color.Red)
        Text(
            text = "Outer scrollable", fontSize = 50.sp, modifier = Modifier
                .fillMaxWidth()
                .height(800.dp)
        )
        Divider(color = Color.Red)
    }

}

I understand that I can add verticalScroll to the AndroidView, but that doesn't meet my expectations because it will make the NestedScrollView larger than the AndroidView. Currently, it's not an issue, but if I were to use a RecyclerView instead of a NestedScrollView, the items within the NestedScrollView wouldn't be recyclable, which would be a significant problem.

Answer 1

As i can see,The NestedScrollView you've created as an AndroidView is not properly integrated with Jetpack Compose's scrolling system. You should use Jetpack Compose's own LazyColumn or VerticalScrollbar to achieve the desired nested scroll behavior.

Follow the code:

    @Composable
    fun TestScreen() {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
        ) {
            // Outer scrollable content
            Text(
                text = "Outer scrollable",
                fontSize = 50.sp,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(800.dp)
            )

            Divider(color = Color.Red)

            // Inner scrollable content
            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
            ) {
                items(50) {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(50.dp)
                            .background(Color.Gray)
                    ) {
                        // Inner scrollable content
                    }
                }
            }
        }
    }

Logic:

We are using LazyColumn to create a scrollable area for the inner content. The outer and inner content is organized within a Column, and Jetpack Compose's scrolling system handles the nested scrolling behavior automatically. This will give you the desired nested scroll functionality.