How can I have more than one navHostFragment in one activity?

Issue

I would like to have three navHostFragments in one activity, all taking the same space, but each hosting a different navigation graph. Then using a fragment manager and a bottom navigation bar I would like to show each when needed (and hide the others), and that way maintain the current position the user has in each graph.

I am currently facing an issue when trying to have 3 of them in one activity and I get this error:

Caused by: java.lang.IllegalArgumentException: Binary XML file line #38: Duplicate id 0x7f0a0086, tag container_fragment, or parent id 0xffffffff with another fragment for androidx.navigation.fragment.NavHostFragment

This is my xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".FeedActivity">




    <androidx.appcompat.widget.Toolbar
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:theme="@style/MyActionBar"
            android:minHeight="?attr/actionBarSize"
            android:id="@+id/my_toolbar"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>


    <fragment
            android:id="@+id/feed_nav_host_fragment"
            android:tag="container_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_height="0dp"
            app:defaultNavHost="false"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/feed_bottom_nav"
            app:navGraph="@navigation/feed_nav_graph"
            android:layout_width="0dp"
            app:layout_constraintTop_toBottomOf="@+id/my_toolbar"
    />

    <fragment
            android:id="@+id/board_nav_host_fragment2"
            android:tag="container_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_height="0dp"
            app:defaultNavHost="false"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/feed_bottom_nav"
            app:navGraph="@navigation/board_nav_graph"
            android:layout_width="0dp"
            app:layout_constraintTop_toBottomOf="@+id/my_toolbar"

    />

    <fragment
            android:id="@+id/profile_nav_host_fragment3"
            android:tag="container_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_height="0dp"
            app:defaultNavHost="false"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/feed_bottom_nav"
            app:navGraph="@navigation/current_user_profile_nav_graph"
            android:layout_width="0dp"
            app:layout_constraintTop_toBottomOf="@+id/my_toolbar"

    />


    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/feed_bottom_nav"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:itemBackground="@color/white"
            app:itemTextColor="@color/bottom_nav_color"
            app:itemIconTint="@color/bottom_nav_color"
            app:menu="@menu/navigation"
            app:labelVisibilityMode="unlabeled"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Solution

I'd recommend to have a look on Google's Android Architecture Components samples, especially to Advanced Navigation Sample because it Shows how to handle multiple back stacks with Navigation and a BottomNavigationView

Answered By - Liviu