How to create bottom sheet with following structure: 1. TopBar 2. Content (Body) 3. ModalBottomShee...

# compose

[rajesh]

How to create bottom sheet with following structure:

1. TopBar
2. Content (Body)
3. ModalBottomSheet (open when item from content is clicked)
4. BottomAppBar

[Colton Idle]

👀 ?

https://cs.android.com/androidx/platform/tools/dokka-devsite-plugin/+/master:testDat[…]ples/BottomSheetScaffoldSamples.kt?q=compose%20bottom%20sheet

[rajesh]

In this code, sheet is already open. i wanted to open sheet when use click on any item of content.plus. will this work with bottombar?

[Colton Idle]

Do you have any code showing it not working?

[Nick]

I’m just ran into this too — you can’t have a BottomSheet with a BottomBar, you’ll have to create your own custom implementation (which is what I’m doing right now)

[Colton Idle]

Really? I think my app currently does this.

[rajesh]

@Colton Idle https://stackoverflow.com/questions/67744381/jetpack-compose-scaffold-modal-bottom-sheet this SO provides the answer. but my ui structure is made of multiple hierarchy and where I want to show bottom sheet is far nested from where bottom bar is placed. If i use SO answer, then i have to wrap my bottom bar and all other hierarchy with bottom sheet as parent layout, which seems non-practical to me. If your app is doing the same, can you provide simple code/gist having implementation?

[Colton Idle]

Yeah, I'm wrapping my parent. Not the biggest fan but I did file an issue for true modal bottom sheets in Compose and the roadmap shows that they are working on bottom sheet improvements.

[Nick]

Here’s what I did for getting a swipeable bottom pane. It’s tweaked to some custom behavior that I did but you could take it and use it if you don’t want to have the two scaffolds.

private val sheetSize = 230.dp

enum class SheetState { Open, Closed }

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun CustomBottomSheet(
	swipeableState: SwipeableState<SheetState> = rememberSwipeableState(SheetState.Open),
	content: @Composable () -> Unit,
) {
	val sizePx = with(LocalDensity.current) { sheetSize.toPx() }
	val anchors = mapOf(0f to SheetState.Open,
		sizePx to SheetState.Closed)

	Box(
		modifier = Modifier
			.swipeable(
				state = swipeableState,
				anchors = anchors,
				thresholds = { _, _ -> FractionalThreshold(0.3f) },
				orientation = Orientation.Vertical
			)
			.offset { IntOffset(0, swipeableState.offset.value.roundToInt()) }
	) {
		content()
	}
}

[Nick]

also let me know if you see anything that i did that’s not great 🙂