How can I blur or tint the content behind my BottomSheetScaffold when expanded?

Question

Is there a way to tint or blur the content behind the BottomSheetScaffold when it is expanded (and it's not fullscreen)?

Answer 1

What I do is show a "dim overlay" on top of the content if the sheet's state is expanded.

Box() {
     // <your other content here>

     // transparent overlay on top of content, shown if sheet is expanded
     if (bottomSheetScaffoldState.bottomSheetState.isExpanded) {
         Box(modifier = Modifier.background(color).fillMaxSize()) {}
     }
}

Instead of a semi-transparent box you could also use something else of course, e.g. an image.

Note also that if the bottom sheet transition is animated, the bottomSheetState will only switch to expanded once the animation completes. You could use a separate boolean state which you set to true (e.g. bottomSheetShown) before calling expand() on the sheet.

Answer 2

Add extension

I've created this extension, which calculate progress (0..1) of bottom sheet expansion.

@OptIn(ExperimentalMaterialApi::class)
val BottomSheetState.expandProgress: Float
    get() {
        return when (progress.from) {
            BottomSheetValue.Collapsed -> {
                when (progress.to) {
                    BottomSheetValue.Collapsed -> 0f
                    BottomSheetValue.Expanded -> progress.fraction
                }
            }
            BottomSheetValue.Expanded -> {
                when (progress.to) {
                    BottomSheetValue.Collapsed -> 1f - progress.fraction
                    BottomSheetValue.Expanded -> 1f
                }
            }
        }
    }

Usage

And use this value as alpha for overlay

val expandProgress = bottomSheetScaffoldState.bottomSheetState.expandProgress
if (expandProgress > 0f) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .alpha(expandProgress * 0.5f)
            .background(Color.Black)
            .clickable {
                coroutineScope.launch {
                    bottomSheetScaffoldState.bottomSheetState.collapse()
                }
            }
    )
}

Demo