Jetpack Compose collapse Bottom Sheet on outside click

Question

I currently display a Bottom Sheet through a BottomSheetScaffold and want to collapse it when the user clicks outside the Bottom Sheet. Is there a way to detect the click outside of the Bottom Sheet?

This is the screen with my BottomSheetScaffold:

@ExperimentalMaterialApi
@ExperimentalMaterial3Api
@Composable
fun HomeScreen() {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
    )
    val coroutineScope = rememberCoroutineScope()

    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            Box(
                Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(0.9f)
            ) {
                Text("Hello from Sheet")
            }
        },
        sheetShape = RoundedCornerShape(
            topStart = Spacing.l,
            topEnd = Spacing.l
        ),
        sheetPeekHeight = LocalConfiguration.current.screenHeightDp.dp * 0.15f,
        sheetBackgroundColor = MaterialTheme.colorScheme.surface,
    ) {
        Scaffold() {
            Button(
                onClick = {
                    coroutineScope.launch {
                        if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                            bottomSheetScaffoldState.bottomSheetState.expand()
                        } else {
                            bottomSheetScaffoldState.bottomSheetState.collapse()
                        }
                    }
                },
            ) {
                Text("Toggle Sheet")
            }
        }

    }
}

This is a visualization of the area in which I want to detect the click if the Bottom Sheet is expanded.

score 11 · Accepted Answer · answered Jan 11 '22 at 20:48

You can add the pointerInput modifier with detectTapGestures to your Scaffold:

   Scaffold( modifier =
        Modifier.pointerInput(Unit) {
            detectTapGestures(onTap = {
                coroutineScope.launch {
                    if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                        bottomSheetScaffoldState.bottomSheetState.expand()
                    } else {
                        bottomSheetScaffoldState.bottomSheetState.collapse()
                    }
                }
            })
    }){
       //.....
    }

score 4 · Answer 2 · edited Jul 28 '22 at 08:50

4

I had the same problem using the BottomSheetScaffold, and I changed to the ModalBottomSheetLayout that already has that behavior by default. I hope this could help anybody with the same problem

edited Jul 28 '22 at 08:50

Jaydeep parmar

561
2
15

answered Jul 27 '22 at 22:01

Diego Alarcon

81
3

CmoiJulien · Answer 3 · 2023-06-10T21:31:30.120

I adapted the answer with the last version of material 3:

val scope = rememberCoroutineScope()
val scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = rememberStandardBottomSheetState(skipHiddenState = false))

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetContent = {},
    modifier =
    Modifier.pointerInput(Unit) {
        detectTapGestures(onTap = {
            scope.launch {
                if (scaffoldState.bottomSheetState.isVisible) {
                    scaffoldState.bottomSheetState.hide()
                }
            }
        })
    }
)

score 0 · Answer 4 · answered Aug 02 '23 at 11:47

0

try using ModalBottomSheetLayout

visit this how to implement modalbottomsheet

answered Aug 02 '23 at 11:47

Alok Singh

35
10

Jetpack Compose collapse Bottom Sheet on outside click

4 Answers4