How to navigate with nested navGraph and bottom navigation view

Question

I've bottom nav view with 3 item, My navGraph looks like this:

<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"
app:startDestination="@id/nested_navigation"

<navigation
    android:id="@+id/nested_navigation"
    app:startDestination="@id/mainFragment" >
    <fragment
        android:id="@+id/mainFragment"
        android:name="com.example.app.ui.main.MainFragment"
        android:label="main_fragment"
        tools:layout="@layout/main_fragment" />
    <fragment
        android:id="@+id/list"
        android:name="com.example.app.ui.main.List"
        android:label="fragment_news_list"
        tools:layout="@layout/fragment_list" />
</navigation>

<fragment
    android:id="@+id/settings"
    android:name="com.example.app.ui.main.Settings"
    android:label="Settings" />
</navigation>

The navigation in the bottom navigation view with the nested navGraph fragments work properly, but if I navigate to settings_fragment, which is outside the nested navGraph, And I click on the other items/fragments I can't navigate to the other fragments and I basically stuck on this screen.

I checked what happened is if I put the settings_fragment inside the nested navGraph, and it's works great.

How can I fix this problem?

btw - I'm pretty sure it's not related, but settings fragment is PreferenceScreen layout that sits inside XML resource and not layout resource

My menu items:

<item
    android:id="@+id/mainFragment"
    android:icon="@drawable/ic_home_black_24dp"
    android:title="@string/home"
    app:showAsAction="ifRoom"
    />
<item
    android:id="@+id/list"
    android:icon="@drawable/ic_format_list_bulleted_black_24dp"
    android:title="@string/news_list"
    app:showAsAction="ifRoom"
    />
<item
    android:id="@+id/settings"
    android:icon="@drawable/ic_settings_black_24dp"
    android:title="@string/settings"
    app:showAsAction="ifRoom"
    />

In greneral - The fragments inside the nested navGraph have close relationship and they share viewModel, as shown here - developer.android.com/guide/navigation/… The middle fragments observe the list that the first fragments gets from network — ScrapeW
– ScrapeW, Commented May 7, 2020 at 21:07

Rodrigo Queiroz · Accepted Answer · 2020-05-09 08:35:57Z

2

The issue is to do with the structure of your nav graph.

Bottom navigation will only take into account the root elements.

- nested_navigation (root element) defaults to `mainFragment`
 |- mainFragment (child element)
 |- list (child element)
- settings (root element)

So given the above illustration, you will only be able to make use of the bottom navigation to navigate between settings and nested_navigation which in turn would be mainFragment.

If you were to navigate between settings and list it would not have been possible.

Please take note that the id of the menu items have to match the id of the graph destination.

E.g.

<item
    android:id="@+id/nested_navigation"
    android:icon="@drawable/ic_home_black_24dp"
    android:title="@string/home"
    app:showAsAction="ifRoom" />

<item
    android:id="@+id/settings"
    android:icon="@drawable/ic_settings_black_24dp"
    android:title="@string/settings"
    app:showAsAction="ifRoom" />

Note the id of the two elements match precisely the id of the root destinations.

Extra

Perhaps my other answer may be of help to complement the navigation flow -> How to switch to other fragment in different back stack using Navigation Component?

edited May 9, 2020 at 8:35

answered May 7, 2020 at 22:13

Rodrigo Queiroz

2,89428 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ScrapeW Over a year ago

I think you are in the right way(I checked whats happen if I specify the nested navGraph id as an item and I do able to navigate), BUT - I actually can navigate to all of my fragments, the only probblem is that I can't navigate to the other fragments, not even to the mainFragment when I navgiate to settings. The "problem" with yout answer, that I need each fragment as menu item. with your approach I've only mainFragment and settings as menu items

Rodrigo Queiroz Over a year ago

I understand what you mean but you simply can not do what you want with the existing structure. What you can do is move <fragment android:id="@+id/list" /> outside of the nested navigation for instance above settings.

hiutrun · Accepted Answer · 2021-07-09 16:08:48Z

2

Bottom navigation will only take into account the root elements. You can rename the item in menu same as in navigation graph.

EX. Your nested graph name is homeNavigation -> let's name id in menu is homeNavigation.

answered Jul 9, 2021 at 16:08

hiutrun

211 bronze badge

Collectives™ on Stack Overflow

How to navigate with nested navGraph and bottom navigation view

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related