fragmentbottomnavigationviewandroid-navigationandroid-navigation-graphandroid-bottomnavigationview

BottomNavigationView with navhostfragment not showing fragment, android?


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?


Solution

  • 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