Bottom Navigation with Navigation Component Creates New Fragment

Question

I have a BottomNavigationView which I've bound to NavController using

val navController: NavController by lazy {
    val navHostFragment =
        supportFragmentManager.findFragmentById(R.id.nav_host_fragment) as NavHostFragment
    navHostFragment.navController
}

bottomNav?.setupWithNavController(navController)

The bottomNav has three menu items: Home , Todos and Profile . Where Home is made the default fragment by adding:

app:startDestination="@id/homeFragment"

So, the NavController creates a new instance for these Fragments like so.

Fragment	First Visit	Further Visit
Home	New Instance	Re-use instance
Todos	New Instance	New Instance
Profile	New Instance	New Instance

Even though the Todos and Profile Fragments are created again, their states are still restored. However, the Fragment 's View (created from onCreateView() ) does not get attached and instead the previously created Fragment's View is used. So, I cannot make any changes to the UI (or at least they have no effect).

The way I see it, I can solve the problem in one of the two ways:

1. Either I make sure existing instance of Fragments are reused. OR
2. Make sure the newly created View is bound to the View Hierarchy .

So, my questions are, how do I make sure that the latest inflated UI is attached or how do I reuse the existing Fragment . Am I missing something obvious here?

Note: I'm using the latest navigation component version 2.4.0-beta02 . Which contains Multiple BackStack Support.

Answer 1

So, the mistake I was making was that I was re-inflating my layout in my Fragments . Reusing the already inflated layout solved this for me.