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"
    />

Answer 1

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?