Navigation graph with multiple top level destinations

Question

I am implementing an android app (in Kotlin, but that is not relevant to the Problem) in my free time and I try to use android jetpack and new libraries. I have a single Activity with a navigation drawer. I try to follow the sample sunflower app. It uses the following combination in the main activity to enable the logic behind the navigation drawer:

appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)
setSupportActionBar(findViewById(R.id.toolbar))
setupActionBarWithNavController(navController, appBarConfiguration)

Note on this code: This automatically will navigate to the correct fragments when clicked in the navigation drawer and close the drawer and keep them selected etc. All that boilerplate code. That is pretty neat and also works. As far as I understand this, the IDs of the navigation drawer menu items have to match the ids of the fragments in the navigation graph and this way they are connected.

The problem I have: When I use the navigation drawer to go to any fragment other than the starting fragment of the navigation graph, it will display a back button instead of the hamburger item. That is not what I expect, I would expect it still to be the hamburger item since the navigation drawer is for navigating between views on an equal level and not nested in each other, right? I expect a back button if I navigate to a subfragment of any fragment by clicking on elements in that fragment (for example list -> detail) but not if I navigate using the navigation drawer.

Now I traced that problem back to the AppBarConfiguration builder which reads on the constructor taking a navgraph The NavGraph whose start destination should be considered the only top level destination. I can fairly easily fix that by overriding AppBarConfiguration to return different top level destinations than just the starting destination of the navigation graph.

However my question is, why is there this behaviour default? Is it a bug? If I override this will I violate some design guidelines by Google? Should not every element in the navigation drawer be on the same level how I expect it? Is there a different solution intended for what I want to do?

Busk

Answer 1

You don't have to override AppBarConfiguration. Since version alpha7 AppBarConfiguration has a constructor with a set of ids for all top level destinations.

Set<Integer> topLevelDestinations = new HashSet<>();
topLevelDestinations.add(R.id.fragment1);
topLevelDestinations.add(R.id.fragment2);
appBarConfiguration = new AppBarConfiguration.Builder(topLevelDestinations)
                                             .setDrawerLayout(drawerLayout)
                                             .build();
NavigationUI.setupActionBarWithNavController(this, 
                                             this.navController,
                                             this.appBarConfiguration);

This is not default as the navigation graph has only a single start fragment which should always be the single entry point of the application.

Editing the default behavior with AppBarConfiguration does not make it behave as before, every top level fragment is placed on the back stack so back button will go to all top level fragments. It is unclear how I can make top level fragments as the first element of the back stack.

Strafford

Oh I didn't notice the AppBarConfiguration only uses the nav_graph to get the top level destination and then discards it. At least that is what I assume as the AppBarConfiguration has no getter for the nav_graph. Thanks I will try it when I can. Since it is a free time project I will need to see when I find time. – Busk

Obviously we need to deep dive into JavaDoc in order to find out, that this solution exists. I was looking for top level destination specification for about 2 hours. This is only SO answer targeting this issue. Hopefully many upvotes upcoming – Beach

Thanks for the helpful answer. For me it's still strange that it doesn't show back button, but allows you to go back to the firstTopLevelDestination – Consider

Answer 2

I made simple example for this issue. https://github.com/isaul32/android-sunflower

Create set of top level destinations at first

val topLevelDestinations = setOf(R.id.garden_fragment,
        R.id.plant_list_fragment)
appBarConfiguration = AppBarConfiguration.Builder(topLevelDestinations)
        .setDrawerLayout(drawerLayout)
        .build()

and then override onSupportNavigateUp function like this

override fun onSupportNavigateUp(): Boolean {
    return NavigationUI.navigateUp(navController, appBarConfiguration)
}

Pliant

The last step to override onSupportNavigateUp() is only required if you use the default ActionBar. If you add your own ToolBar this behavior is already implemented when calling NavigationUI.setupWithNavController(Toolbar toolbar, NavController navController, AppBarConfiguration configuration). – Strafford

Answer 3

To get a correct behavior of toolbar and drawer with multiple top level destinations, you can use following code:

val navController = Navigation.findNavController(this, R.id.nav_host_fragment)
val toolbar = findViewById<Toolbar>(R.id.toolbar)
val drawerLayout = findViewById<DrawerLayout>(R.id.drawer_layout)

/*
Create AppBarConfiguration with set of top level destinations and drawerLayout
Set contains ids of your navigation graph screens
*/
val appBarConfiguration = AppBarConfiguration(
    setOf(R.id.defaultFragment, R.id.firstFragment, R.id.secondFragment), 
    drawer_layout
)

//finally configure toolbar
toolbar.setupWithNavController(navController, appBarConfiguration)

This code will ensure that hamburger icon is displayed on all of your top level destinations, and back button will appear when you navigate deeper.

Read more here

Dignity

Could you point out the differences of your answer to the accepted answer? To me they seem to be equivalent. – Busk

Answer 4

you can directly use ids of destinations like this

mAppBarConfiguration = new AppBarConfiguration.Builder(R.id.salahTimeFragment,
            R.id.nav_home,R.id.navslideFragment, R.id.nav_feedback,R.id.nav_tap_count,R.id.nav_templete,R.id.nav_add_topic)
            .setDrawerLayout(drawer)
            .build();

but i don't know it will work only when menu id(activity_main_drawer) and destination id(mobile_navigation.xml) are same. If anyone explain why so it will be great help

Spahi