CODEWITHSUNDEEP
android-jetpack-composeandroid-bottomsheetdialogbottomsheetdialogfragmentandroid-jetpack-compose-listlazycolumn
Mike
Mike

Reputation: 570

How to properly use Jetpack Compose inside BottomSheetDialogFragment?

For example, I have MyBottomSheetDialogFragment with Compose LazyColumn code in the application:

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)

That's what we have:

MyBottomSheetDialogFragment screen image.jpg

Now if to scroll LazyColumn list DOWN then everything works as it should, but if to scroll LazyColumn list UP then Bottom Sheet Dialog scrolls instead of LazyColumn list.

How to properly implement LazyColumn inside BottomSheetDialogFragment?

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?

Upvotes: 11

Views: 5783

Answers (2)

DTechnlogy
DTechnlogy

Reputation: 345

You can use the new rememberNestedScrollInteropConnection() on compose 1.2.0 which will allow compose to interrupt View's scrolling and enable nested scrolling.

In your case it will be

setContent {

            Column(modifier = Modifier.nestedScroll(rememberNestedScrollInteropConnection()), horizontalAlignment = Alignment.CenterHorizontally) {

                Text("Header", color = Color.Black)

                LazyColumn(
                    Modifier
                        .weight(1f)
                        .fillMaxWidth()) {
                    items(100) {
                        Text("Item $it", Modifier.fillMaxWidth(), Color.Black)
                    }
                }
            }
        }

Upvotes: 2

Luciano
Luciano

Reputation: 2798

You should use a BottomSheetScaffold and set the sheetContent with your bottom sheet content. Don't use the BottomSheetDialogFragment.

Here's an example of basic structure of a BottomSheetScaffold:

    val scaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = rememberBottomSheetState(BottomSheetValue.Expanded)
    )

    BottomSheetScaffold(
        modifier = Modifier.navigationBarsPadding(),
        scaffoldState = scaffoldState,
        topBar = {
            // Your topBar
        },
        sheetShape = BottomSheetShape,
        sheetPeekHeight = MaterialTheme.spacing.large,
        sheetContent = {
            // Your sheet content
        }
    ) { innerPadding ->
      // You content
    }

Upvotes: 0

Related Questions