(Android) On switching different tabs in bottom navigation view, fragment set as start destination only shown. The other two are not shown

Question

I have added a bottom navigation view to a layout, which has 3 tabs. On switching the tabs, the fragment added as start destination(in nav graph) is only shown. Rest never shown. I have used navigation graph and menu items for my implementation.

I have already checked this answer and made the ids both in navigation graph file and bottom_nav_menu.xml same. But still, the issue appears. Can anyone tell me what is wrong with my code(attached below)?

My code:

main_navigation

   <?xml version="1.0" encoding="utf-8"?>
<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/main_navigation"

    app:startDestination="@+id/navigation_tab1">

    <fragment
        android:id="@+id/navigation_tab1"
        android:name="...Tab1Fragment"
        android:label="@string/tab1"
        tools:layout="@layout/fragment_tab1">

    </fragment>
    <fragment
        android:id="@+id/navigation_tab2"
        android:name="...Tab2Fragment"
        android:label="@string/tab2"
        tools:layout="@layout/fragment_tab2">

    </fragment>
    <fragment
        android:id="@+id/navigation_tab3"
        android:name="...Tab3Fragment"
        android:label="@string/navigation_tab3"
        tools:layout="@layout/fragment_navigation_tab3">

    </fragment>
</navigation>

activity_main

<androidx.constraintlayout.widget.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <include
        android:id="@+id/layout_toolbar"
        layout="@layout/layout_toolbar" />


    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottomNavigationView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/layout_toolbar"
        app:navGraph="@navigation/main_navigation" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:itemTextAppearanceActive="@style/AppNavigationViewItemTextAppearance"
        app:itemTextAppearanceInactive="@style/AppNavigationViewItemTextAppearance"
        app:itemTextColor="@drawable/bottom_navigation_text"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/menu_bottom_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout>

menu_bottom_navigation

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_tab1"
        android:icon="@drawable/menu_tab1_selector"
        android:title="@string/tab1"/>
    <item
        android:id="@+id/navigation_tab2"
        android:icon="@drawable/menu_tab2_selector"
        android:title="@string/tab2" />
    <item
        android:id="@+id/navigation_tab3"
        android:icon="@drawable/menu_tab3_selector"
        android:title="@string/tab3" />
</menu>

MainActivity

import android.os.Bundle
import android.view.View
import androidx.databinding.DataBindingUtil
import androidx.navigation.findNavController
import statement for R // This is added correct. No worries
import kotlinx.android.synthetic.main.activity_main.*
import kotlinx.android.synthetic.main.layout_toolbar.view.*
import org.koin.androidx.viewmodel.ext.android.viewModel
    class MainActivity : BaseActivity() {
    
        private val mainViewModel: MainViewModel by viewModel()
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main).also { binding ->
                binding.lifecycleOwner = this
            }
    
            initUI()
            mainViewModel.login()
        }
    
         private fun initUI() {
            bottomNavigationView.itemIconTintList = null
    
            navController = findNavController(R.id.nav_host_fragment)
        
          navController?.apply {
             bottomNavigationView.setupWithNavController(this)
          }
        }
    }

Answer 1

Option 1. Try with this code: NavigationUI.setupWithNavController(bottomNavigationView, navController) instead of navcontroller.apply{...} inside the initUI function.

Option 2. Add bottomNavigationView.setupWithNavController(navController) instead of navcontroller.apply{...} inside the initUI function.

Answer 2

Inside the initUI() add the following code:

    val appBarConfiguration = AppBarConfiguration(
        setOf(
            R.id.navigation_tab1,
            R.id.navigation_tab2,
            R.id.navigation_tab3
        )
    )
    setupActionBarWithNavController(navController, appBarConfiguration)