'Scroll issue with LazyColumn inside BottomSheetDialogFragment

I use LazyColumn inside BottomSheetDialogFragment, but if to scroll LazyColumn list UP then Bottom Sheet Dialog scrolls instead of LazyColumn list. Seems like BottomSheetDialogFragment intercepts user touch input.

That's how it looks:

How to properly use LazyColumn inside BottomSheetDialogFragment?

MyBottomSheetDialogFragment.kt:

class MyBottomSheetDialogFragment : BottomSheetDialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                Column(horizontalAlignment = Alignment.CenterHorizontally) {
                    Text("Header", color = Color.Black)
                    LazyColumn(
                        Modifier
                            .weight(1f)
                            .fillMaxWidth()) {
                        items(100) {
                            Text("Item $it", Modifier.fillMaxWidth(), Color.Black)
                        }
                    }
                }
            }
        }
    }
}

And show it using this code:

MyBottomSheetDialogFragment().show(activity.supportFragmentManager, null)

When we used the XML RecyclerView list, to fix this issue we had to wrap the RecyclerView list with NestedScrollView like described here, but how to fix it with Jetpack Compose?

androidscrollandroid-jetpack-composebottom-sheetlazycolumn


Solution 1:[1]

You might give a try to this https://gist.github.com/chrisbanes/053189c31302269656c1979edf418310.

This is a workaround for https://issuetracker.google.com/issues/174348612, which means that nested scrolling layouts in Compose do not work as nested scrolling children in the view system.

Sample usage in your case :

class MyBottomSheetDialogFragment : BottomSheetDialogFragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                Surface(
                    modifier = Modifier.nestedScroll(rememberViewInteropNestedScrollConnection())
                ){
                    LazyColumn(
                        Modifier
                            .weight(1f)
                            .fillMaxWidth()) {
                        items(100) {
                            Text("Item $it", Modifier.fillMaxWidth(), Color.Black)
                        }
                    }
                }
            }
        }
    }
}

Solution 2:[2]

If you’re using compose within the activity that launched the bottom sheet dialog fragment, you might be better off simply sticking with a purely compose implementation and leveraging the compose equivalent bottom sheet component: ModalBottomSheetLayout

https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#ModalBottomSheetLayout(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.material.ModalBottomSheetState,androidx.compose.ui.graphics.Shape,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function0)

Solution 3:[3]

Since compose 1.2.0-beta01 problem can be solved by using rememberNestedScrollInteropConnection:

Modifier.nestedScroll(rememberNestedScrollInteropConnection())

In my case BottomSheetDialogFragment is standard View and it has ComposeView with id container. In onViewCreated I do:

binding.container.setContent {
    AppTheme {
        Surface(
            modifier = Modifier.nestedScroll(rememberNestedScrollInteropConnection())
        ) {
            LazyColumn {
                // ITEMS
            }
        }
    }
}

And now the list is scrolling in a correct way.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Stefano Sansone
Solution 2 A.Sanchez.SD
Solution 3 iknow

Related Questions