In this chapter of the Navigation Component Android tutorial we are going to learn how can we manage the back-stack in our app. First we are going to add the SplashFragment. After that, we will check how we can handle it in the back stack. Then we will remove Fragment_4 from the back stack. So, when we press the back button, then the Fragment_1 pops up.
This tutoiral is about how to use the JetPack Navigation Component to handle the fragment’s, activity’s navigations, argument and actions in our app centralized. The sample app contains 6 fragments, the main activity and a Navigation Drawer.
In the very last chapter we have learned how we can handle dialog and how we can get back from it the result.
For this chapter we have prepared a starter project. This project contains already the SplashScreen, which will be firstly visible for the user, when they open the app.
You can download or clone the starter project using the below link.
After the download open Android Studio. From the File menu select the Open option, then navigate to the folder where you have the downloaded project. Click OK and update the necessery plugins and the gradle.
The splash screen
The splash screen in many apps is a screen with the logo and a short description of the app. Until the users see this screen, in background the app can update the local data and prepare the application for the usage.
In our case the SplashActivity contains the logo, the name of this site and the title of this tutorial.
Step 1 – Add the SplashFragment to the navigation graph
We are going to start this tutorial by adding the SplashFragment to the navigation graph. So, open the navigation_graph.xml file, what you can find inside of the res folder, then in the navigation directory.
Next, we need the desing view. If you don’t see the this view of the navigation graph, then at the top right side of Android Studio should be 3 icons. For us the second and the third icons are the good ones. They are the split and desing views.
In these views, at the top left corner you should see the “New destination” icon. Click on it and from the opened list click on the fragment_splash option. Then click on the splashFragment and drag it next to the fragment_1, like this:
As a result we got a blue arrow between the fragments. It represents the action between them.
Now open the code view or the split view from the above mentioned 3 icons in the top right corner.
Scroll to the bottom of the file. There you should have the new fragment and for that the action.
app:popUpTo and app:popUpToInclusive
Next, we are going to add 2 new attributes to the action.
splashFragment with popUp attributes
To pop destinations when navigating from one destination to another, add an app:popUpTo attribute to the associated <action> element. This attribute tells the Navigation library to pop some destinations off from the back stack. The attribute value is the ID of the most recent destination that should remain on the stack.
We can also include
This attribute indicates, that the destination specified in app:popUpTo should be removed from the back stack.
With each navigation action, a destination is added to the back stack. If we were to navigate repeatedly through a flow like:
Fragment_1 -> Fragment_2 -> Fragment_3 -> Fragment_1
then our back stack would then contain multiple sets of each destination. To avoid this repetition, we can specify app:popUpTo and app:popUpToInclusive in the action that takes us from destination Fragment_3 to destination Fragment_1.
After reaching destination Fragment_3, the back stack contains one instance of each destination (Fragment_1, Fragment_2, Fragment_3). When navigating back to destination Fragment_1, we also popUpTo Fragment_1, which means that we remove Fragment_2 and Fragment_3 from the stack while navigating.
With app:popUpToInclusive=“true”, we also pop that first Fragment_1 off of the stack, effectively clearing it. Notice here that if you don’t use app:popUpToInclusive, your back stack would contain two instances of destination Fragment_1.
Change the startDestination
Before we are going forward, scroll to the top of the navigation graph’s xml code. There you should have the attribute of app:startDestination=“@id/fragment_1” inside of the <navigation> tag. Change fragment_1 to splashFragment. Due to the SplashFragment will be visible first, when the we start the app.
Rebuild the app
Because, we have added the SplashFragment to the navigation graph and we made a new action also, we should rebuild the project. If we won’t do that, then the action won’t be available in the SplashFragment::class.
So from the top menubar click on the Build, then select from the menu the Rebuild project option.
Step 2 – Add the navigation to the SplashFragment
The next step is to add the navigation to the SplashFragment::class.
To achive to have a visible splash screen in every case, we will implement there a short delay. It will be 3 seconds long.
This delay will be in the onViewCreated() method and we will use the Handler::class, which has a postDelayed() method.
So copy and paste the below code into the SplashFragment::class.
Inside of the postDelayed() method will be the code, which will be executed after the delay. In our case there we will use the navigate() method to navigate directly to Fragment_1.
Run the app
Finally we can run the app.
When the app starts, then you should see for 3 seconds the splash screen, then the app will navigate to the Fragment_1. If you press now the back button on your device, then the app will be closed. It happens, because the SplashFragment is not on the back stack.
One more experiment
Next up, we are going to make one more experiment. We will play a bit with the action between the Fragment_4 and Fragment_5.
What do you think, what will happen, when we won’t add to the back stack the Fragment_4?
If we do that, and we press the back button on the Fragment_5, then the Fragment_4 won’t be visible. The fragment will be, which was open before it.
So open up the navigation_graph.xml, then go to the action of fragment_4 and add these two lines.
After thet, the <fragment> of fragment_4 shoud look like this:
Run the app
Run again the app, and check out the new function.
The source code is available on GitHub
I hope the description was understandable and clear. But if you have still questions, then leave me comments below! 😉
Have a nice a day! 🙂