BottomNavigationView icons not highlighted with Navigation 2.4

Question

I updated to Navigation 2.4 (def nav_version = "2.4") and now when tapping on a BottomNavigationView item it does not always highlight the icon or show the fragment the BottomNavigationView item id points to.

There are 3 bottom navigation tabs called Home, Actions, My Progress. From the Home fragment, you can navigate to SubFragment.

So the flow might be to start at Home --> go to SubFragment --> go to Actions with the BottomNavigationView --> and then tap on Home to go back. What this did before the update was open the Home fragment (desired behavior). Now when tapping on the Home icon it shows SubFragment and does not highlight the icon.

More details

This is the navController setup:

bottomNavigationView = findViewById(R.id.bottom_navigation_view)

val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
val navController = navHostFragment.navController
bottomNavigationView.setupWithNavController(navController)

The nav_graph structure is like this:

    <fragment
            android:id="@+id/home"
            android:name="com.example.app.home"
            android:label="Home"
            tools:layout="@layout/home" 

            <action
                android:id="@+id/action_home_fragment_to_sub_fragment"
                app:destination="@id/sub_fragment"/>
    </fragment>

    <fragment
            android:id="@+id/subfragment"
            android:name="com.example.app.subfragment"
            android:label="Sub Fragment"
            tools:layout="@layout/subfragment" />

    <fragment
            android:id="@+id/actions"
            android:name="com.example.app.actions"
            android:label="Actions"
            tools:layout="@layout/actions" />

    <fragment
            android:id="@+id/myprogress"
            android:name="com.example.app.myprogress"
            android:label="My Progress"
            tools:layout="@layout/myprogress" />

The menu items id's for the BottomNavigationView are identical to nav_graph.

I thought the issue might be with the nav_graph structure not playing well with the new SDK, so I tried adjusting the structure of the nav_graph so that each navigation tab was within its own like this question answer has setup. It highlights the tab with this approach but still does not navigate to Home like the example above. Only to SubFragment.

Ideas on what I might be missing are appreciated!

Answer 1

I also came across with this issue. It is not a bug in the library.

Actually, when you link menu.xml with nav_graph.xml You only specified only one fragmentId for each destination. Therefore, it is natural for icon not to change its current state when subfragment is selected.

Instead, you should use nested navigation graphs and use the id of that graph for menu.xml.

<navigation
    android:id="@+id/home_destination"
    app:startDestination="@id/home" >
    <fragment
        android:id="@+id/home"
        android:name="com.example.app.home"
        android:label="Home"
        tools:layout="@layout/home" 

        <action
            android:id="@+id/action_home_fragment_to_sub_fragment"
            app:destination="@id/sub_fragment"/>
    </fragment>

    <fragment
        android:id="@+id/subfragment"
        android:name="com.example.app.subfragment"
        android:label="Sub Fragment"
        tools:layout="@layout/subfragment" />
</navigation>

<fragment
        android:id="@+id/actions"
        android:name="com.example.app.actions"
        android:label="Actions"
        tools:layout="@layout/actions" />

<fragment
        android:id="@+id/myprogress"
        android:name="com.example.app.myprogress"
        android:label="My Progress"
        tools:layout="@layout/myprogress" />

And when you are specifying the navigation_menu you will do like this:

<item
    android:id="@+id/home_destination"
    android:icon="@drawable/ic_read_quran"
    android:title="@string/read_quran"
    app:showAsAction="always" />