https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
t

theapache64

08/23/2021, 3:09 PM
🧭 Navigation : Nested navigation with 
bottomSheet
🧵
What’s the correct way to implement nested navigation inside 
bottomSheet
(Material Navigation)? Can i use the 
navigation
method?
Copy code
ModalBottomSheetLayout{
    NavHost{
        composable("home"){}
        bottomSheet("detail"){
            navigation { ⬅️
                composable("a") {}
                composable("b") {}
                composable("c") {}
            }
        }
        composable("about"){}
    }
}
or should I use nested 
NavHost
?
Copy code
ModalBottomSheetLayout{
    NavHost{
        composable("home"){}
        bottomSheet("detail"){
            NavHost { ⬅️
                composable("a") {}
                composable("b") {}
                composable("c") {}
            }
        }
        composable("about"){}
    }
}
🤔
cc @Ian Lake
i

Ian Lake

08/23/2021, 3:17 PM
The first doesn't do anything at all - you're calling a DSL builder method inside a random Composable
t

theapache64

08/23/2021, 3:18 PM
Okay, i haven’t tried both. what abt the second one ?
i

Ian Lake

08/23/2021, 4:07 PM
The second one seems like exactly the case where a nested NavHost would make sense (when the containing bounds of the NavHost are completely different)
t

theapache64

08/23/2021, 4:08 PM
Cool.
I’ve another follow up question. Suppose I am going from 
c
to 
about
, and when I press back from 
about
, I need to go back to 
c
, What’s the best way to do that? Also note that, I can also go to 
about
from 
home
. Basically, 
about
should be accessible from anywhere. so what would be the best approach to do this?
i

Ian Lake

08/23/2021, 4:14 PM
This is the same conversation we've already had, isn't it? You can't put a 
FloatingWindow
destination like your bottom sheet on the back stack
t

theapache64

08/23/2021, 4:21 PM
This is the same conversation we’ve already had, isn’t it?
Yes 😬
You can’t put a 
FloatingWindow
 destination like your bottom sheet on the back stack
Is there anyyyyy way I can make a regular destination transparent? I know its not available right now, but would it be possible if I raise a feature request? OR it’s completely impossible with respect to navigation lib’s current architecture and i shouldn’t expect that feature in future versions? 😐
i

Ian Lake

08/23/2021, 4:25 PM
I mean, you can use a 
dialog
destination if you want it to be displayed above other floating windows and regular destinations
t

theapache64

08/23/2021, 4:53 PM
but as soon as i navigate to a regular destination, the 
dialog
will be removed, right? means, when i nav back it won’t go to the 
dialog
but the previous regular destination. isn’t it ? 🤔
as per my design, destination should have the ability to become transparent as well as back-navigateable.
i

Ian Lake

08/23/2021, 5:03 PM
I'm saying that 
about
could be a 
dialog
destination, then you could navigate to it from your bottom sheet and go back to your bottom sheet when it closes
t

theapache64

08/23/2021, 5:16 PM
Wow 😮 I didn’t know about 
dialog
destination. Didn’t see this in documentation either. Is this new?
i

Ian Lake

08/23/2021, 5:17 PM
t

theapache64

08/23/2021, 5:18 PM
alright 👍 that should fix my problem. thank you so much 🤝
c

Colton Idle

08/24/2021, 2:12 PM
@theapache64 curious if you figured out your issue. Let me know!
t

theapache64

08/31/2021, 8:22 AM
@Colton Idle nope. i thought 
dialog
would fix, but 
dialogs
are also not back-navigate-able from a regular destination
c

Colton Idle

08/31/2021, 2:21 PM
I wonder if you can just fake it. i.e. Box{ YourContent() FakeModal() } FakeModal is fullscreen, but it's just a transparent black background with a card in the middle. Effectively just faking it.
t

theapache64

08/31/2021, 2:47 PM
My navigation graph is very dynamic and complex. Moving with a hack would be only a temporary solution. As the complexity increases, backstack management will become a pain in the ass. The suggested solution would work for small/medium apps. In fact, the same behaviour can be achieved with a combination of 
dialog
destination and 
saveState/restoreState
flags. The problem is, we’ll need to na*vigate to the previous screen to navigate back the dialog*.
c

Colton Idle

08/31/2021, 2:51 PM
Yeah. I mean I don't think dialogs ever stay on the back stack even in fragment based nav.
https://developer.android.com/guide/navigation/navigation-navigate#back-stack "My navigation graph is very dynamic and complex." I can't really relate to that so maybe I'm not seeing something that you are. In general though... navigation never supported floating windows in the backstack which is the main reason why I asked
"@theapache64 curious if you figured out your issue. Let me know!"
I was curious if you knew something I didn't know about it. lol. If anything... I think there are a few other libs for navigation. Zach Klippenstein (he/him) [MOD] has one I believe, and decompose is another mpp nav lib I think too.
t

theapache64

08/31/2021, 3:01 PM
Yeah. the above given illustration is correct. My problem is i want to nav back to 
dialog
from regular destination which is impossible at the moment 😄
c

Colton Idle

08/31/2021, 3:13 PM
Yep. I'd try another nav library
or create your own modal composable
t

theapache64

08/31/2021, 3:14 PM
Yeah, I’ve decided to move with custom nav lib.
33 Views
Powered by