Using nav host fragment and bottom navigation view inside fragment?

Question

I have nav host fragment and bottom navigation view inside home fragment as below

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="home.HomeFragment2">

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/homeNavHost"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="@+id/bottomMenu"
    app:layout_constraintEnd_toEndOf="parent"
    app:navGraph="@navigation/staging_menu_navigation1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomMenu"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:labelVisibilityMode="labeled"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:menu="@menu/bottom_menu" />
 </androidx.constraintlayout.widget.ConstraintLayout>

The menu as

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/staging_dashboard_nav_graph"
    android:icon="@drawable/ic_home"
    android:title="@string/menu_dashboard" />
<item
    android:id="@+id/staging_offer_nav_graph"
    android:icon="@drawable/ic_offer"
    android:title="@string/menu_offers" />
<item
    android:id="@+id/staging_profile_nav_graph"
    android:icon="@drawable/ic_profile"
    android:title="@string/menu_profile" />
</menu>

The navigation graph as

<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/staging_menu_navigation"
app:startDestination="@id/dashboardFragment3">

<include app:graph="@navigation/staging_dashboard_nav_graph" />
<include app:graph="@navigation/staging_offer_nav_graph" />
<include app:graph="@navigation/staging_profile_nav_graph" />
<fragment
    android:id="@+id/dashboardFragment3"
    android:name="com.octave.dashboard.DashboardFragment"
    android:label="DashboardFragment" />

</navigation>

The other graphs are as

<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/staging_dashboard_nav_graph"
app:startDestination="@id/dashboardFragment">

<fragment
    android:id="@+id/dashboardFragment"
    android:name="com.octave.dashboard.DashboardFragment"
    android:label="dashboard_fragment"
    tools:layout="@layout/dashboard_fragment" />
</navigation>

Offer graph

<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/staging_offer_nav_graph"
app:startDestination="@id/offersFragment">

<fragment
    android:id="@+id/offersFragment"
    android:name="com.octave.offers.OffersFragment"
    android:label="offers_fragment"
    tools:layout="@layout/offers_fragment" />
</navigation>

Profile graph

<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/staging_profile_nav_graph"
app:startDestination="@id/profileFragment">

<fragment
    android:id="@+id/profileFragment"
    android:name="com.octave.profile.ProfileFragment"
    android:label="profile_fragment"
    tools:layout="@layout/profile_fragment" />

In my home fragment I am setting up as

binding.bottomMenu.setupWithNavController(Navigation.findNavController(requireActivity(), R.id.homeNavHost))

When I tap on bottom menu items the fragment doesn't change. What is wrong over here?

score 4 · Answer 1 · edited Feb 06 '23 at 13:58

If you are trying to create another nav graph with the bottom navigation bar that is already a part of the default nav graph, you first need to change the defaultNavHost value to false in XML of wherever your nav host fragment is in. then find NavHost to get NavController:

val navHost = childFragmentManager.findFragmentById(R.id.${yourNavHostFragment} as NavHostFragment
val navController = navHost.navController
view.findViewById<BottomNavigationView>(R.id.bottomNavigationView).setupWithNavController(navController!!)

Using nav host fragment and bottom navigation view inside fragment?

1 Answers1