Home > Back-end >  How do you implement Android Compose nested navigation properly with BackdropScaffold
How do you implement Android Compose nested navigation properly with BackdropScaffold

Time:11-04

I am investigating the use of Jetpack Compose navigation in my current Android application.

my apps "Home" screen uses androidx.compose.material.BackdropScaffold and its frontLayerContent is set as follows:-

frontLayerContent = { MyNavigationHost(navController = navigator) }

this all works as required for the top level destinations in the app, as these top level navigation destinations are expected to be hosted in the backdrop.

however from each of these top level screens (which host a List of items) the user should be able to click on a list item and navigate to a lower level screen where the backdrop is no longer visible, and the user will see a simple tool bar with the Up arrow to navigate up a level back to the parent list screen.

i have created nested navigation targets which i can reach however i have two issues the backdrop is always visible even in the lower level detail screens

and when the user goes back it, they navigate to the Home screen (Start destination) and not the actual high level screen they were on viewing the list.

do i need multiple navHosts? one that has all the top level screens that are contained in the backdrop frontContent?

or can i some how use one navHost and specify the frontContentLayer should only display the highest level screens?

CodePudding user response:

do i need multiple navHosts? -> yes

I believe the proper way is having a navgraph for backdrop, passing scaffold state to each destination shown in front layer in order to close it when necessary and having a top level controller for backdrop scaffold in case you need to change the content shown in backdrop layer.

  • Related