Androidx - How to handle Nested Graph's fragments from parent fragment using Navigation?

Question

Here is the scenario:-

I am having a Main Activity which has root NavGraph and load fragment A as default. If I am moving from Fragment A to Fragment B where I have child fragment and TabLayout within it, So user can switch fragment within inside it , for which I have created a new nestedgraph for child fragment inside Fragment B. When I am moving from Fragment A to Fragment B , am able to show Fragment C within my child Fragment because I have set start Destination as Fragment C in my nested Graph.

***root Navigation Graph***



     <?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" xmlns:tools="http://schemas.android.com/tools"
                android:id="@+id/navigation_graph"
                app:startDestination="@id/fragmentC">

        <fragment
                android:id="@+id/FragmentA"
                android:name="com.myapp.fragment.FragmentA"
                android:label="Fragment A"
                tools:layout="@layout/fragment_A">
            <action
                    android:id="@+id/action_fragmentA_to_fragmentB"
                    app:destination="@id/fragmentB" />
        </fragment>
        <fragment
                android:id="@+id/fragmentB"
               android:name="com.myapp.fragment.FragmentB"
                android:label="FragmentB"
                tools:layout="@layout/fragment_B">
            <action
                    android:id="@+id/action_fragmentB_to_second_graph"
                    app:destination="@id/navigation_graph2" />
        </fragment>

        <include app:graph="@navigation/navigation_graph2" />

    </navigation>


    ***Nested Navigation Graph***


        <?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" xmlns:tools="http://schemas.android.com/tools"
                    android:id="@+id/navigation_graph2"
                    app:startDestination="@id/FragmentC">

            <fragment android:id="@+id/FragmentC"
                      android:name="com.myapp.fragment.FragmentC"
                      android:label="Fragment C"
                      tools:layout="@layout/fragment_C">
 <action
                android:id="@+id/action_fragmentC_fragmentD"
                app:destination="@id/FragmentD" />
            </fragment>

            <fragment android:id="@+id/FragmentD"
                      android:name="com.myapp.fragment.FragmentD"
                      android:label="Fragment D"
                      tools:layout="@layout/fragment_D">
 <action
                android:id="@+id/action_fragmentD_fragmentC"
                app:destination="@id/FragmentC" />
            </fragment>
        </navigation>

***Inside Fragment B***

public class FragmentB extends BaseFragment<FragmentAssignmentsBinding>
        implements TabLayout.OnTabSelectedListener{

    NavController nestedNavController;

    @Override
    public int getLayoutId() {
        return R.layout.fragment_assignments;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        if(getFragmentDataBinding()==null)
            return;
        nestedNavController = Navigation.findNavController(view);
        getFragmentDataBinding().myTabLayout.addOnTabSelectedListener(this);
    }



    @Override
    public void onTabSelected(TabLayout.Tab tab) {

        switch (tab.getPosition()) {
            case 0:
  //***Here  how to handle the nested graph Fragment Action ?***      
             nestedNavController.navigate(R.id. action_fragmentC_fragmentD);
break;
            case 1:
                 nestedNavController.navigate(R.id. action_fragmentD_fragmentC);
                break;
        }

    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {

    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
}

Now the issue is - > onClicking Tab A or Tab B from parentFragment( Fragment B) , I have to access nested NavGraph actions to replace fragment inside parentFragment.But come across with error :-

java.lang.IllegalArgumentException: navigation destination com.myapp:id/action_fragmentC_fragmentD is unknown to this NavController

Any help or guidance will be really helpful .

Answer 1

In your fragment B layout, you should have something like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout  
        android:id="@+id/tabLayout"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content"  
        android:background="#1db995">  
    </android.support.design.widget.TabLayout>  

    <android.support.v4.view.ViewPager  
        android:id="@+id/viewPager"  
        android:layout_width="355dp"  
        android:layout_height="455dp"  
        app:layout_constraintTop_toBottomOf="@+id/tabLayout"  
        tools:layout_editor_absoluteX="8dp" /> 

    <fragment
        android:id="@+id/base_container"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dimen_constraint"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/activity_base_toolbar_main"
        app:navGraph="@navigation/navigation_graph2" />
    ...

---

public class FragmentB extends ...
...

@Override
public void onTabSelected(TabLayout.Tab tab) {
    controller = findNavController(R.id.base_container)
    switch (tab.getPosition()) {
        case 0:
            controller.navigate(R.id.action_fragmentC_fragmentD);
        break;
        case 1:
            controller.navigate(R.id.action_fragmentD_fragmentC);
            break;
    }

}
...

Or as a workaround you can consider using a BottomNavigationView to reproduce the same behaviour of TabLayout

Answer 2

Quoting Ian Lake's answer

As per this issue:

Navigation focuses on elements that affect the back stack and tabs do not affect the back stack - you should continue to manage tabs with a ViewPager and TabLayout

So you have to use ViewPager with tablayout not a nested navigation graph.

Please look at tablayout branch for a working example.