Handle Graphs nesting from Parent Fragment into Tablayout Fragments

Question

When i navigate to the Tab fragment(having tablayout with viewpager) I need to nest the tablayout fragments navigation graph with the main navigation graph.

Here is the code.

Main_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/C_nav_graph"
    app:startDestination="@id/C1_fragment">

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

    <fragment
        android:id="@+id/C1_fragment"
        android:name="com.example.nestednavigationgraphexample.Fragment_C1"
        android:label="C1"
        tools:layout="@layout/fragment_c1">
        <action
            android:id="@+id/C1_to_C2_fragment"
            app:destination="@id/C2_fragment" />
    </fragment>
    <fragment
        android:id="@+id/C2_fragment"
        android:name="com.example.nestednavigationgraphexample.Fragment_C2"
        android:label="C2"
        tools:layout="@layout/fragment_c2" >
        <action
            android:id="@+id/action_C2_fragment_to_tabFragment"
            app:destination="@id/tabFragment" />
    </fragment>
    <fragment
        android:id="@+id/tabFragment"
        android:name="com.example.nestednavigationgraphexample.Tab_Fragment"
        android:label="tabFragment" />


</navigation>

Tab_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/tab_navigation"
    app:startDestination="@id/cardFragment">

    <fragment
        android:id="@+id/cardFragment"
        android:name="com.example.nestednavigationgraphexample.CardFragment"
        android:label="CardFragment" >
        <action
            android:id="@+id/action_cardFragment_to_fragment_Tab_Sub"
            app:destination="@id/fragment_Tab_Sub" />
    </fragment>
    <fragment
        android:id="@+id/fragment_Tab_Sub"
        android:name="com.example.nestednavigationgraphexample.Fragment_Tab_Sub"
        android:label="fragment_fragment__tab__sub"
        tools:layout="@layout/fragment_fragment__tab__sub" />
</navigation>

CardFragment

class CardFragment : Fragment(),View.OnClickListener  {
    private var counter: Int? = null
    var navController: NavController?=null

    private val COLOR_MAP = intArrayOf(
        R.color.red_100, R.color.red_300, R.color.red_500, R.color.red_700, R.color.blue_100,
        R.color.blue_300, R.color.blue_500, R.color.blue_700, R.color.green_100, R.color.green_300,
        R.color.green_500, R.color.green_700
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        if (arguments != null) {
            counter = arguments!!.getInt(ARG_COUNT)
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? { // Inflate the layout for this fragment
        return inflater.inflate(R.layout.card_fragment, container, false)
    }

   override fun onViewCreated(
        view: View,
        savedInstanceState: Bundle?
    ) {
        super.onViewCreated(view, savedInstanceState)
        view.setBackgroundColor(ContextCompat.getColor(context!!, COLOR_MAP[counter!!]))
        val textViewCounter = view.findViewById<TextView>(R.id.tv_counter)
        textViewCounter.text = "Fragment No " + (counter!! + 1)
        view.findViewById<Button>(R.id.button).setOnClickListener(this)
        navController= Navigation.findNavController(activity!!,R.id.nav_host_fragment)
   }

    companion object {
        private const val ARG_COUNT = "param1"
        fun newInstance(counter: Int?): CardFragment {
            val fragment = CardFragment()
            val args = Bundle()
            args.putInt(ARG_COUNT, counter!!)
            fragment.arguments = args
            return fragment
        }
    }

    override fun onClick(v: View) {
        when(v!!.id){

            R.id.button->
                navController!!.navigate(R.id.action_cardFragment_to_fragment_Tab_Sub)
        }   
    }
}

I get the following crash when clicking on button in card Fragment

java.lang.IllegalArgumentException: navigation destination com.example.nestednavigationgraphexample:id/action_cardFragment_to_fragment_Tab_Sub is unknown to this NavController

My tab layout has 2 instances of CardFragment. I am missing on how to nest the two graphs. Please help me with the solution or if someone can refer a good working example, i would be grateful. Thanking in advance.

Answer 1

It would be nice to get the error logcat but I think you haven't provided the action from TabFragment. Here is the action required to include in your tabFragment like this code:

 <fragment
        android:id="@+id/tabFragment"
        android:name="com.example.nestednavigationgraphexample.Tab_Fragment"
        android:label="tabFragment">

        <action
            android:id="@+id/action_cardFragment_to_fragment_Tab_Sub"
            app:destination="@id/tabSubFragment" />

    </fragment>

    <fragment
        android:id="@+id/tabSubFragment"
        android:name="com.example.nestednavigationgraphexample.Fragment_Tab_Sub"
        tools:layout="@layout/fragment_fragment__tab__sub"
        android:label="tabSubFragment" />