NavigationUI not working correctly with bottom navigation view implementation

Question

So I have a scenario in which I have 5 fragments attached with bottom navigation.

1. Home 2. Inbox 3. Search 4. Notification 5. Profile

So I have another fragment called (BarcodeDetail) to which I navigate from Home Fragment.

(Home -> BarcodeDetail)

Now from BarcodeDetail I navigate to Search Fragment

(BarcodeDetail -> Search)

But now if I select Home Fragment from BottomNavigationView It did not go to Home Fragment.

Rather than it selects the same current fragment that is Search Fragment.

(The log print the name of Search Fragment)

navController.addOnDestinationChangedListener((controller, destination, bundle) -> {

            Timber.d("Destination -> %s", destination.getDisplayName());
});

private void setupBottomNavigation() {

        NavHostFragment navHostFragment = (NavHostFragment)
                getSupportFragmentManager().findFragmentById
                        (R.id.fragment_container_view);

        if (navHostFragment != null) {

            navController = navHostFragment
                    .getNavController();

            NavigationUI.setupWithNavController(
                    binding.bottomNavigation, navController);

            initDestinationListener();

        }
    }

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/sellerHomeFragment"
        android:icon="@drawable/ic_home"
        android:title="@string/home_text" />

    <item
        android:id="@+id/inboxFragment"
        android:icon="@drawable/ic_chat"
        android:title="@string/chats_text" />

    <item
        android:id="@+id/searchFragment"
        android:icon="@drawable/ic_search"
        android:title="@string/search_text" />

    <item
        android:id="@+id/sellerAlertFragment"
        android:icon="@drawable/ic_notification"
        android:title="@string/notifications_text" />

    <item
        android:id="@+id/sellerProfileFragment"
        android:icon="@drawable/ic_profile"
        android:title="@string/profile_text" />

</menu>

Please let me know if you need more information. Thanks

Answer 1

The navigation component lib enables multiple backstack support by default since the version 2.4.0, which has been also thoroughly demonstrated in this blog.

According to your sample code, your five top level fragments in your bottom sheet nav would now have their own backstack, the problem arises if you want to navigate from one of the top level fragments to another, like in your case (Home -> ... -> Search).

The reason why you cannot go back to Home is because you have never left Home's backstack and now Search is on top of it, i.e. the navigation component thinks that you're already on the correct fragment.

I would suggest to go through the navigation lib's recent changes first, rather then trying to quick fix as this is quite a behavior change and it could also affect other parts of your app's navigation.

Technically speaking, the way how the multiple back stacks for the bottom nav works is that every time you select a different bottom nav option, the implementation of onNavDestinationSelected(item: MenuItem, navController: NavController) would pop & save the state of all the fragments from the current top level fragment and then navigate to the other top level fragment by restoring it's state.

So, in order to "switch from one backstack to another" like in your case when you navigate from BarcodeDetail to Search, you need to adapt your current actions by at least these two options:

app:popUpTo="@id/id_of_home"
app:popUpToSaveState="true"

(where id_of_home is should be the id of Home and where I assume that this is the action with destination to Search).

With these two lines, you would pop & save the state of Home -> BarcodeDetail and navigate to Search, if you now would navigate back to Home via the bottom nav option, then you would restore the state and your navigation should be basically possible.

However, please note that you might need another flags like app:restoreState="true" and/or app:popUpToInclusive="true" depending on what you want achieve.

Answer 2

First clear the backstack by using this line of code

     navController.popBackStack();

After that do navigate to your fragment by using this line of code

navController.navigate(R.id.your_fragment_id);

From this you will be able to navigate in bottom navigation without any issue.