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.

Laxmi kant · Accepted Answer · 2023-10-20 10:58:13Z

-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.

answered Oct 20, 2023 at 10:58

community wiki

Laxmi kant

Sign up to request clarification or add additional context in comments.

2 Comments

HeiHa Over a year ago

Thank you for your response. However, I specifically require the EmojiPicker library provided by Google, which is currently implemented using Android View. The EmojiPicker includes a RecyclerView. Is there any alternative solution available in this situation?

Iancu Vlad Over a year ago

I am in the exact same situation. Did you find any solution for this?

Collectives™ on Stack Overflow

Nested scroll not work when using Android compose with NestedScrollView

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related