DrawerLayout with multiple stacks and navigation component

Question

I'm using the navigation component and in one of my fragments I have a drawer layout with multiple stacks.

Navigation

Splash -> Login -> Home(drawer layout)

From Home i would like use drawerlayout and 2 fragments stacks.

Home (Search Nav Graph) -> Search -> S1 -> S2
Home (Profile Nav Graph) -> Profile -> P1

HomeFragment

class HomeFragment : BaseFragment() {
    private var _binding: FragmentHomeBinding? = null
    private val binding get() = _binding!!
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        _binding = FragmentHomeBinding.inflate(inflater, container, false)
        val appBarConfiguration = AppBarConfiguration(setOf(R.navigation.search_nav_graph, R.navigation.profile_nav_graph), binding.drawerLayout)
        binding.collapsingToolbarLayout.setupWithNavController(binding.toolbar, findNavController(), appBarConfiguration)
        return binding.root
    }
}

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Use DrawerLayout as root container for activity -->
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="@dimen/tall_toolbar_height">
            <com.google.android.material.appbar.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar_layout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleGravity="top"
                app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"/>
            </com.google.android.material.appbar.CollapsingToolbarLayout>
        </com.google.android.material.appbar.AppBarLayout>

        <!-- The main content view where fragments are loaded -->
        <FrameLayout
            android:id="@+id/flContent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
    <!-- Container for contents of drawer - use NavigationView to make configuration easier -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="false">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <include layout="@layout/drawer_header" />
            <include layout="@layout/drawer_menu" />
        </LinearLayout>
    </com.google.android.material.navigation.NavigationView>

</androidx.drawerlayout.widget.DrawerLayout>

I guess the way to go is using flContent but I don't find the way to match the pieces according to documentation

Answer 1

I've finally realize that i can just use the childFragmentManager

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        _binding = FragmentHomeBinding.inflate(inflater, container, false)
        val busquedaNavHostFragment = NavHostFragment.create(R.navigation.search)
        val perfilNavHostFragment = NavHostFragment.create(R.navigation.profile)
        childFragmentManager.beginTransaction()
                .add(R.id.flContent, busquedaNavHostFragment, busquedaNavHostFragment.javaClass.name)
                .add(R.id.flContent, perfilNavHostFragment, perfilNavHostFragment.javaClass.name)
                .hide(busquedaNavHostFragment)
                .show(perfilNavHostFragment)
                .commitNow()

        binding.navView.findViewById<LinearLayout>(R.id.ll_perfil).setOnClickListener {
            binding.drawerLayout.close()
            childFragmentManager.beginTransaction()
                    .show(perfilNavHostFragment)
                    .hide(busquedaNavHostFragment)
                    .commit()
        }
        binding.navView.findViewById<LinearLayout>(R.id.ll_busqueda).setOnClickListener {
            binding.drawerLayout.close()
            childFragmentManager.beginTransaction()
                    .show(busquedaNavHostFragment)
                    .hide(perfilNavHostFragment)
                    .commit()
        }
        return binding.root
    }