https://kotlinlang.org logo
#compose
Title
# compose
c

Colton Idle

02/04/2022, 7:02 AM
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?
t

theapache64

02/04/2022, 7:13 AM
How about hiding the tabs when Modal is visible and showing it when disposed ?
c

Colton Idle

02/04/2022, 8:19 AM
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.
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.
t

theapache64

02/04/2022, 8:30 AM
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.
t

Tolriq

02/04/2022, 9:02 AM
Since you can never have 2 modals displayed at the same time why not just have 1 modalbottomsheet at the root of the layout?
c

Colton Idle

02/04/2022, 10:54 AM
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.
t

Tolriq

02/04/2022, 11:12 AM
It makes sense but it couples everything. There's no way to change z index it's relative to current parent only 😞
c

Colton Idle

02/04/2022, 12:12 PM
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.
o

Oleksandr Balan

02/04/2022, 2:25 PM
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.
c

Colton Idle

02/04/2022, 2:32 PM
Ooooh! Thanks for sharing. This sounds like exactly the route I might want to take.
👍 1
@Oleksandr Balan I filed a feature request for truly modal bottom sheets. Maybe you want to star it? 😄 https://issuetracker.google.com/issues/217840726
👍 1
o

Oleksandr Balan

02/04/2022, 2:42 PM
1
2 Views