How to use popUpTo and popUpToInclusive in Navigation Framework?

Photo by Maria on Unsplash

Are you struggling to understand how Navigation Component in Android deals with the Back Stack when transitioning between fragments? If so, you’re not alone. The good news is that the framework provides two powerful attributes, popUpTo and popUpToInclusive, to help simplify the process. In this article, we’ll explore how these attributes work and provide a live project example to help you gain a better understanding. So, let’s dive in and unravel the mysteries of Android Jetpack’s Navigation component framework!

Theory :

“Back Stack” is your typical Stack that holds an entry of your fragments in the same order you visit them.

“Action” is transition from one Fragment to Another.

Suppose you have 5 fragments (A, B, C, D, E), and A is your home fragment. When you launch your activity which is a host to all 5 of these fragments, it’ll first display fragment A.

Back Stack : A

From A you transitioned to B, and then to C, and from there to D.

action 1 : fragmentA_to_fragmentB, 2 : fragmentB_to_fragmentC, 3: fragmentC_to_fragmentD

Back Stack : A, B, C, D,

Let’s create a new action where we move from fragment D to fragment E, but we’ll now use the attribute, “popUpTo"

action 3 : fragmentD_to_fragmentE, popUpTo : fragment B 

Back Stack : A, B, C, D, E(*without popUpTo)

Behind the scenes with popUpTo,

Because the back stack is simply a stack, it follows LIFO(Last in First Out). With action 3,

1. fragment E will be added to the back stack,
2. popUpTo : fragment B, what this means is : between fragment E(fragment E will also be excluded) and fragment B(exclusive) all the fragments will be popped.

Back Stack : A, B, E

Let’s recreate the same action and this time, also use the attribute popUpToInclusive and don’t forget to set it to true.

action 3 : fragmentD_to_FragmentE, popUpTo : fragmentB, popUpToInclusive = "true"

Behind the scenes with the duo popUpTo & popUpToInclusive,

1. fragment E will be added to the back stack,
2. popUpTo : fragment B, what this means is : between fragment E(fragment E will be excluded) and fragment B(inclusive) all the fragments will be popped.
3. popUpToInclusive : true, will make sure that B is also popped out.

Back Stack : A, E

That’s pretty much it with the Theory part, let’s now dive in a project.

This navigation graph involves three fragments,

Three fragments that transition between each other in a cyclic order

Requirements with the transition cycle are as follows,

1. When transitioning from giveTextFragment -> gameFragment, I want to have [giveTextFragment, gameFragment] in the Back Stack.
2. When transitioning from gameFragment -> resultFragment, I want to clear the entire Back Stack, and only have [resultFragment] in the Back Stack, so that the user couldn’t transition back.
3. The final transition from resultFragment -> giveTextFragment, should also clear the entire back stack. So that only [giveTextFragment] is in the Back Stack.

actions for all three of these transitions,

action 1 : giveTextFragment -> gameFragment

<action
    android:id="@+id/action_giveTextFragment_to_gameFragment"
    app:destination="@id/gameFragment"/>

Back Stack : [giveTextFragment, gameFragment]

pressing back from gameFragment will take us to giveTextFragment.

action 2 : gameFragment -> resultFragment

<action
      android:id="@+id/action_gameFragment_to_resultFragment"
      app:destination="@id/resultFragment"
      app:popUpTo="@id/giveTextFragment"
      app:popUpToInclusive="true"/>

With this action, Back Stack will be popped between resultFragment, and giveTextFragment[inclusive].

Back Stack : [resultFragment]

pressing back from resultFragment will close the application, because there’s no entry behind resultFragment in the Back Stack.

action 3 : resultFragment -> giveTextFragment

 <action
       android:id="@+id/action_resultFragment_to_giveTextFragment"
       app:destination="@id/giveTextFragment"
       app:popUpTo="@id/resultFragment"
       app:popUpToInclusive="true"/>

With this action, Back Stack will be popped between giveTextFragment, and resultFragment[inclusive].

Back Stack : [giveTextFragment]

pressing back from here will close the application, reason being, there’s not entry behind giveTextFragment in the Back Stack.

GIF of the implementation

In conclusion, the popUpTo and popUpToInclusive attributes in the Android Navigation Component are powerful tools that can simplify the management of the Back Stack in your app. By understanding how these attributes work and how to use them effectively, you can create a more seamless and intuitive user experience. I hope this article has helped you gain a better understanding of these attributes and how they can be used in your own projects.

If you have any questions or feedback, feel free to leave a comment below. Keep Androiding!!