How to get behaviour like YouTube bottom navigation view in android using Navigation Architecture Component?

Question

I am trying to get YouTube like bottom navigation behaviour using architecture navigation component. For example if i have fragments (tail)A > B > C > D > E(top) in back stack and then again i visit B and then C(C is the top fragment now) and then if i would be pressing back button then i should get (First out)C < B < E < D < A(Last out).

B and C should be old fragments, not replace by new fragments(Data should not be destroyed when i revisit any fragment).

My code which is posted below is not working(not giving a effect like YouTube).

MainActivity.kt

class MainActivity : AppCompatActivity()
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)

        val binding  = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
        val bottomNavView = binding.appBottomNavView
        val navController = findNavController(R.id.app_nav_host_fragment)
        val navBuilder = NavOptions.Builder()

        bottomNavView.setupWithNavController(navController)

        val onNav = BottomNavigationView.OnNavigationItemSelectedListener{ menuItem ->
            when(menuItem.itemId)
            {
                R.id.homeFragment -> {
                    val navOption = navBuilder.setPopUpTo(R.id.homeFragment, false).build()
                    navController.navigate(R.id.homeFragment, null, navOption)
                    true
                }
                R.id.searchFragment -> {
                    val navOption = navBuilder.setPopUpTo(R.id.searchFragment, false).build()
                    navController.navigate(R.id.searchFragment, null, navOption)
                    true
                }
                R.id.shareFragment -> {
                    val navOption = navBuilder.setPopUpTo(R.id.shareFragment, false).build()
                    navController.navigate(R.id.shareFragment, null, navOption)
                    true
                }
                R.id.alertFragment -> {
                    val navOption = navBuilder.setPopUpTo(R.id.alertFragment, false).build()
                    navController.navigate(R.id.alertFragment, null, navOption)
                    true
                }
                R.id.profileFragment -> {
                    val navOption = navBuilder.setPopUpTo(R.id.profileFragment, false).build()
                    navController.navigate(R.id.profileFragment, null, navOption)
                    true
                }
                else -> {
                    true
                }

            }
        }

        bottomNavView.setOnNavigationItemSelectedListener(onNav)
    }
}

Menu.xml

  <menu>
        <item
            android:id="@+id/homeFragment"
            android:icon="@drawable/ic_house"
            android:menuCategory="secondary"
            android:title="" />

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

        <item
            ................
            ................ />

        <item
            ................
            ................ />

        <item
            ................
            ................ />

    </menu>

navigation.xml

<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"
    android:id="@+id/app_nav"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.ui.HomeFragment"
        android:label="HomeFragment"
        tools:layout="@layout/fragment_home"/>

    <fragment
        android:id="@+id/searchFragment"
        android:name="com.example.ui.SearchFragment"
        android:label="SearchFragment"
        tools:layout="@layout/fragment_search"/>

    <fragment
        android:id="@+id/shareFragment"
        android:name="com.example.ui.ShareFragment"
        android:label="ShareFragment"
        tools:layout="@layout/fragment_share"/>

    <fragment
        android:id="@+id/alertFragment"
        android:name="com.example.ui.AlertFragment"
        android:label="AlertFragment"
        tools:layout="@layout/fragment_alert"/>
    <fragment
        android:id="@+id/profileFragment"
        android:name="com.example.ui.ProfileFragment"
        android:label="ProfileFragment"
        tools:layout="@layout/fragment_profile"/>

</navigation>

Answer 1

You should use MVVM Architecture to accomplish this. MVVM keeps your fragments in memory while you navigate among them. Try browsing this LINK. This is a long way to run...I should say.

If you go the way of HILT it may be more quickly understandable. LINK