Navigation graph with viewpager2 android

Question

My viewpager consists of 2 fragments which are displayed correctly and working fine.

From viewpager's fragment I want to move to another fragment via navigation graph

This is my graph

<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/offer_nav_graph"
app:startDestination="@id/offersFragment">

<fragment
    android:id="@+id/offersFragment"
    android:name="com.octave.offers.OffersFragment"
    android:label="offers_fragment"
    tools:layout="@layout/offers_fragment" />

<fragment
    android:id="@+id/availableOfferDetailFragment"
    android:name="com.octave.offers.available.AvailableOfferDetailFragment"
    android:label="fragment_available_offer_detail"
    tools:layout="@layout/fragment_available_offer_detail" />
<fragment
    android:id="@+id/availableOffersFragment"
    android:name="com.octave.offers.available.AvailableOffersFragment"
    android:label="fragment_available_offers"
    tools:layout="@layout/fragment_available_offers" >

    <action
        android:id="@+id/action_availableOffersFragment_to_availableOfferDetailFragment"
        app:destination="@id/availableOfferDetailFragment" >
        <argument
            android:name="offerId"
            app:argType="integer"
            android:defaultValue="-1" />
    </action>
</fragment>
</navigation>

Offers fragment - has view pager Available offer fragment - one of the fragment on view pager Available offer detail fragment - i want to navigate

On button click I am calling this

AvailableOffersFragmentDirections.actionAvailableOffersFragmentToAvailableOfferDetailFragment(offerId)

The exception

Navigation action/destination com.octave.staging:id/action_availableOffersFragment_to_availableOfferDetailFragment cannot be found from the current destination Destination(com.octave.staging:id/homeFragment) label=HomeFragment class=com.octave.home.HomeFragment

What is wrong over here?

Answer 1

Check using:

btn.setOnClickListener {
       Navigation.findNavController(it).navigate(R.id.availableOfferDetailFragment)
}

Answer 2

button exists on availableOffersFragment. I want to navigate from availableOffersFragment to availableOfferDetailFragment. offersFragment has the viewpager with 2 tabs having their own fragment availableOffersFragment and secondFragemnt

So, now you need to navigate from availableOffersFragment which is a tab (page fragment) in the ViewPager; but this is not possible because those tabs don't affect the back stack. You can check out the questions discussed in here and also this one.

But what you can do instead is to add an action from offersFragment (which holds the ViewPager) to availableOfferDetailFragment as following:

• Remove the tab fragments from the navGraph ( availableOffersFragment and secondFragemnt ).
• Create an action in the navGraph from offersFragment to availableOfferDetailFragment

    <fragment
        android:id="@+id/offersFragment"
        android:name="com.octave.offers.OffersFragment"
        android:label="offers_fragment"
        tools:layout="@layout/offers_fragment">
        
        <action
            android:id="@+id/action_offersFragment_to_availableOfferDetailFragment"
            app:destination="@id/availableOfferDetailFragment" >
            <argument
                android:name="offerId"
                app:argType="integer"
                android:defaultValue="-1" />
        </action>
    </fragment>

• When the button is clicked use parentFragment to access the offersFragment from the availableOffersFragment tab when the button is clicked. For instance:

Create a method in offersFragment :

goToDetailsFragment(offerId: Int) {
    // perfrom the navaigation
    OffersFragmentDirections.actionOffersFragmentToAvailableOfferDetailFragment(offerId)
}

And in availableOffersFragment

btn.setOnClickListener {
       (parentFragment as offersFragment).goToDetailsFragment(offerId)
}