How to handle Navigation Graph in Nested Fragment of Android

Question

I'm using BottomNavigationView in a fragment and want to show different fragments on tap of each option og that. I'm able to see BottomNavigationView but I'm unable to load any fragment. I'm using below code for that.

res/layout/fragment_main_tab.xml

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

<fragment
    android:id="@+id/nav_menu_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:defaultNavHost="true"
    app:layout_constraintBottom_toTopOf="@+id/bottom_navigation_view"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:navGraph="@navigation/main_menu_nav_graph" />

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:itemBackground="@drawable/bottom_view_selector"
    app:labelVisibilityMode="labeled"
    app:layout_anchorGravity="bottom"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/bottom_nav_menu"
    tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout>

res/navigation/main_menu_nav_graph.xml

<?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"
android:id="@+id/main_menu_nav_graph"
app:startDestination="@id/navigation_main_tab_fragment">

<fragment
    android:id="@+id/navigation_main_tab_fragment"
    android:name="com.pkg.ui.main.MainTabFragment"
    android:label="@string/app_name"/>
</navigation>

MainTabFragment.kt

 binding.bottomNavigationView.setOnItemSelectedListener {
        when (it.itemId) {
            R.id.home -> {
                findNavController().navigate(R.id.nav_menu_to_main_fragment)
            }
            R.id.wallet -> {
                findNavController().navigate(R.id.nav_menu_to_main_fragment)
            }
            else -> {
                null
            }
        }
        true
    }

res/navigation/nav_menu_graph.xml

<?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"
android:id="@+id/nav_menu_graph"
app:startDestination="@id/nav_menu_to_main_fragment">
<fragment
    android:id="@+id/nav_menu_to_main_fragment"
    android:name="com.pkg.ui.main.MainFragment"
    android:label="@string/app_name" />
</navigation>

It always shows blank without MainFragment or either it gets crashed. Can anyone please check once and highlight if I'm making any mistake? Thanks in advance.

Answer 1

I think you should try this MainTabFragment

(supportFragmentManager.findFragmentById(R.id.nav_menu_fragment) as NavHostFragment).navController.apply {
        binding.bnvAppBottomNav.setupWithNavController(this)
        addOnDestinationChangedListener { _, destination, _ ->
            binding.bnvAppBottomNav.visibility = when (destination.id) {
                R.id.Home,
                R.id.Wallet,
                R.id.Profile -> GONE

                else -> VISIBLE
            }
        }
    }

And also try this in res/layout/fragment_main_tab.xml

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/nav_menu_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="@+id/bottom_navigation_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/main_menu_nav_graph" />

Hope this give you some hint