Android Jetpack Navigation - How to navigate to nested nav graph from drawer menu item
Asked Answered
P

1

7

I was curious how one would be able to navigate to a nested navigation graph from a menu item in a drawer layout using the navigation graph from Android Jetpack. I know that there is some magic behind the scenes that links menu items with fragments based on Id, but I can't figure out how to link a menu item to a nested navigation graph.

For an example I am using the default Navigation Drawer Activity project that comes with Android Studio. I have modified the mobile_navigation.xml to the following:

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mobile_navigation"
    app:startDestination="@+id/nav_home">

    <fragment
        android:id="@+id/nav_home"
        android:name="com.example.testdrawer.ui.home.HomeFragment"
        android:label="@string/menu_home"
        tools:layout="@layout/fragment_home" />

    <include app:graph="@navigation/nested_navigation" />

    <fragment
        android:id="@+id/nav_tools"
        android:name="com.example.testdrawer.ui.tools.ToolsFragment"
        android:label="@string/menu_tools"
        tools:layout="@layout/fragment_tools" />

    <fragment
        android:id="@+id/nav_share"
        android:name="com.example.testdrawer.ui.share.ShareFragment"
        android:label="@string/menu_share"
        tools:layout="@layout/fragment_share" />

    <fragment
        android:id="@+id/nav_send"
        android:name="com.example.testdrawer.ui.send.SendFragment"
        android:label="@string/menu_send"
        tools:layout="@layout/fragment_send" />
</navigation>

I have also added a new navigation graph called nested_navigation.xml which looks as follows:

<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nested_navigation"
    app:startDestination="@+id/nav_gallery">

    <fragment
        android:id="@+id/nav_gallery"
        android:name="com.example.testdrawer.ui.gallery.GalleryFragment"
        android:label="@string/menu_gallery"
        tools:layout="@layout/fragment_gallery" />

    <fragment
        android:id="@+id/nav_slideshow"
        android:name="com.example.testdrawer.ui.slideshow.SlideshowFragment"
        android:label="@string/menu_slideshow"
        tools:layout="@layout/fragment_slideshow" />

</navigation>

And let's say my menu looks like:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:showIn="navigation_view">

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_home"
            android:icon="@drawable/ic_menu_camera"
            android:title="@string/menu_home" />
        <item
            android:id="@+id/nested_navigation"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Photos Graph" />
        <item
            android:id="@+id/nav_tools"
            android:icon="@drawable/ic_menu_manage"
            android:title="@string/menu_tools" />
    </group>

    <item android:title="Communicate">
        <menu>
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="@string/menu_share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="@string/menu_send" />
        </menu>
    </item>

</menu>

So essentially, I just want to know how I can make a click on a menu item in the drawer navigate to the start destination of the nested nav graph.

Edit: I have figured out how to do this with implementing the NavigationView.OnNavigationItemSelectedListener interface and manually triggering the navigation through a global action:

override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            R.id.nested_navigation -> {
                findNavController(R.id.nav_host_fragment).navigate(R.id.action_nested_navigation)
            }
        }

        drawer_layout.closeDrawer(GravityCompat.START)
        return true
    }

I am still hoping there is a way to do this with through the automagic naming conventions though.

Any help would be greatly appreciated, thanks so much!

Polychasium answered 25/3, 2020 at 5:47 Comment(1)
Did you find any solution?Resuscitator
R
0

Actually, I have this working in a pretty standard way. Your XML files look ok, but have you also included R.id.nested_navigation to the topLevelDestinationIds in your AppBarConfiguration?

    val navController = findNavController(R.id.nav_host_fragment)
    appBarConfiguration = AppBarConfiguration(
        setOf(
            R.id.nav_home,
            R.id.nav_tools,
            R.id.nav_share,
            R.id.nav_send.
            R.id.nested_navigation
        ),
        drawerLayout
    )
    setupActionBarWithNavController(navController, appBarConfiguration)
    navView.setupWithNavController(navController)

If this does not solve your problem then please share your code for setting up the navigation view.

Rain answered 13/9, 2020 at 12:36 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.