Disable BottomSheet outside touch in the jetpack compose

Question

I used BottomSheet view in the jetpack compose but I want to lock the screen with bottomSheet until we click on the bottomShets's button and disable outside touching in the bottomSheet. How can I do it?

My bottomSheet:


@ExperimentalMaterialApi
@Composable
fun BottomSheet(
    modifier: Modifier = Modifier,
    composable: @Composable () -> Unit,
    scope: CoroutineScope
) {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Expanded)
    )
    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            Column(
                Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .padding(8.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Button(colors = ButtonDefaults.buttonColors(
                    backgroundColor = AppColor.brandColor.BLUE_DE_FRANCE,
                    contentColor = AppColor.neutralColor.DOCTOR
                ),
                    shape = RoundedCornerShape(
                        small
                    ),
                    onClick = {
                        scope.launch {
                            bottomSheetScaffoldState.bottomSheetState.collapse()
                        }
                    }) {  
                }
            }
        },
        sheetPeekHeight = 0.dp,
        sheetShape = RoundedCornerShape(topEnd = medium, topStart = medium)
    ) {
        composable()
    }

}

The composable function is a google map screen

can you provide the code for bottom sheet?? – DeePanShu Oct 27 '21 at 05:36 — DeePanShu, Oct 27 '21 at 05:36
Sure, I added in the question – Saeed Noshadi Oct 27 '21 at 05:44 — Saeed Noshadi, Oct 27 '21 at 05:44

score 1 · Accepted Answer · answered Oct 27 '21 at 05:52

1

You can use sheetGesturesEnabled: Boolean = true/false attribute, if you want to change the bottom sheet cancelable or not cancelable from outside.

 BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetGesturesEnabled = false,
        sheetContent = {
           ...
        },
        sheetPeekHeight = 0.dp,
        sheetShape = RoundedCornerShape(topEnd = medium, topStart = medium)
    ) {
        composable()
    }

for proper documentation use this link: BottomSheetScaffold

answered Oct 27 '21 at 05:52

DeePanShu

1,236
10
23

this screen (composable() ) is a google map. I want the user not to be able to move Google Map when BottomSheet is open. How can i do it? – Saeed Noshadi Oct 27 '21 at 06:02
1

can you give me the class which class you are using for google maps view?? and if you are using AndroidView then use : https://stackoverflow.com/a/61146384/10954249 answer on update={}, using bottomsheetexpanded or collapse. – DeePanShu Oct 27 '21 at 06:04

score 0 · Answer 2 · answered Oct 27 '21 at 05:47

You can use sheetGesturesEnabled = false property of BottomSheetScaffold to disable gestures. And if you set it with a var sheetGesturesEnabled by remember {mutableStateOf(true)} you can toggle it as you wish.

var sheetGesturesEnabled by remember {mutableStateOf(true)}
BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    sheetGesturesEnabled = sheetGesturesEnabled,
    sheetContent = {
    },
    drawerContent= {
    }
)

Disable BottomSheet outside touch in the jetpack compose

2 Answers2