My app has 4 tabs at the bottom. On Tab1Screen I'm using a ModalBottomSheetLayout, but the "Modal" s...

# compose

[Colton Idle]

My app has 4 tabs at the bottom. On Tab1Screen I'm using a ModalBottomSheetLayout, but the "Modal" shows beneath my tabs. Is there a way to change the "z-index" of my Modal so that it shows up on top of my bottom tabs so that it's a "proper" modal?

[theapache64]

How about hiding the tabs when Modal is visible and showing it when disposed ?

[Colton Idle]

The only issue I have with that is that the modal state lives in Tab1Screen and not at the top most level with the navigation.

[Colton Idle]

I've thought about hoisting my modal state up, but the problem is that I basically have 5 tabs, and each of them have their own modals, and so just hoisting 5 of these individual states seems off.

[theapache64]

Can you use a compositionLocal to control the bottomBar visibility ? or an activity scoped viewModel with a state in it? I don’t know if that’s the best way, but it’ll work i guess.

[Tolriq]

Since you can never have 2 modals displayed at the same time why not just have 1 modalbottomsheet at the root of the layout?

[Colton Idle]

I was taking Ians advice of treating a modal bottom sheet as being on the same level as the screen that I actually want it to be present on. Essentially, picture a time picker, but its in a bottom sheet format. So in this case, having a modal bottom sheet of a time picker that is at the root is more tricky than just having it on the actual screen that needs the return value.

Hopefully that made sense.

@theapache64 maybe a composition local is the best way out of this. hm. will have to look that up.

[Tolriq]

It makes sense but it couples everything. There's no way to change z index it's relative to current parent only 😞

[Colton Idle]

gotcha. maybe ill try to pass in the state of the bottom bar visibility into every screen, and then each screen could just switch that state whenever they need.

[Oleksandr Balan]

We do have the similar use-case in our app and solve it with using “Popup” composable for bottom sheet content, which effectively covers the whole screen, you can check this thread:
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1639396923060800

Recently we found a bug in “Popup”, so we create our own solution (based on Popup), which always lays out fullscreen and fixes our issues, you may found this snippet useful:
https://kotlinlang.slack.com/archives/CJLTWPH7S/p1643849367173429?thread_ts=1643363349.401339&cid=CJLTWPH7S

Basically the idea is to add a new “View” to the view hierarchy with match parent dimensions and render a bottom sheet content there. We also have some custom BottomSheetDialog wrapper, which adds dim & swipe support so our “FullscreenPopup” looks & behaves like bottom sheet.

[Colton Idle]

Ooooh! Thanks for sharing. This sounds like exactly the route I might want to take.

[Colton Idle]

@Oleksandr Balan I filed a feature request for truly modal bottom sheets. Maybe you want to star it? 😄
https://issuetracker.google.com/issues/217840726

[Oleksandr Balan]