BottomNavigationView with navhostfragment not showing fragment, android?

Question

I am using navhostfragment in fragment along with bottom navigation view.

Below is the xML

<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeFragment">

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/nav_host_fragment"
    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:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:navGraph="@navigation/staging_home_nav_graph" />

<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>

And in my fragment I am using the below method

binding.bottomMenu.setupWithNavController(Navigation.findNavController(binding.navHostFragment))

When I run the code the fragment doesn't open up.

If I remove the FragmentContainerView I see the correct fragment being displayed. Can someone point out what am I missing?

Answer 1

I am not sure what is the issue with the bottom navigation view with this use case. After going through multiple links and posts I was able to solve

You need an extension for bottom navigation which takes up list of nav graphs. I found that piece in one of the links

Extension BottomNavigationExt.kt

Your XML will look like

<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.HomeFragment">

<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: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>

Finally setup with

val navGraphIds = listOf(
        R.navigation.dashboard_nav_graph,
        R.navigation.offer_nav_graph,
        R.navigation.profile_nav_graph,
        R.navigation.document_nav_graph,
        R.navigation.more_nav_graph
    )

    // Setup the bottom navigation view with a list of navigation graphs
    val controller = binding.bottomMenu.setupWithNavController(
        navGraphIds = navGraphIds,
        fragmentManager = childFragmentManager,
        containerId = R.id.homeNavHost,
        intent = requireActivity().intent
    )

The most important your menu item id and graph id should be same