A Beginner’s Guide for Using the Navigation Component
Beginner’s Guide for Android Jetpack’s Navigation component
Android Jetpack’s Navigation component is a better approach in Android to navigate across, into, and back out from the different pieces of content within your app. This post shows you how to set up and work with the Navigation component.
For using the Navigation component we must first add the dependency in our Android project, you can get the dependency here.
Now after we have added our dependency, we must add a new resource file in our Android project. Let’s name our file nav_graph and it must be of type Navigation.
After our file has been created, we will see our new file inside navigation package inside res folder.
When we open the file, we can see the preview like this:
When we switch to the text editor for this file, we have a navigation tag in our file. Also, it shows us an error would say something like
This navigation graph is not referenced from any layout files
We will resolve this error in a while.
Let’s move to our activity_main layout file and add some code.
We can remove this TextView which was auto-generated when creating our project and replace with this one.
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/nav_graph" />This fragment tag does have some newer attributes. Firstly, take a look at the app:defaultNavHost = "true" which means that we want this to be the NavHost that intercepts and works as the back button on our device. And now we can add fragments to the navigation graph we created earlier and connect the fragments in the graph with actions.
We also have app:navGraph="@navigation/nav_graph" which basically is telling our NavHost that nav_graph which we created earlier is the navigation resource file that we are going to use.
And, lastly, we have:
android:name="androidx.navigation.fragment.NavHostFragment"This means NavHostFragment will provide us an area within our layout where navigation can occur. Also, each NavHostFragment has a NavController that defines valid navigation within the navigation host. (We will cover about NavController in this post).
If you want to read more about NavHostFragment you can check it out here.
Going back to a previous error in our nav_graph file, we can see that the error is gone.
It is because we have declared our nav_graph file as navGraph using this attribute:
app:navGraph="@navigation/nav_graph"After we have added the fragment tag in our activity_main layout file. We should add some fragments in our project. I have created three fragments MainFragment, ViewBalanceFragment and ViewTransactionsFragment.
Now going back to our nav_graph file, we should switch to the design editor which is the most interesting part of this tutorial.
We have a screen like this and you can probably see the instruction telling us about adding a destination.
Now click the menu option as shown which will give us the option to choose destinations. You should see a screen like this:
Choose fragment_main which we will use as our host fragment from which we will move to the other two fragments. Once selected it should look like this:
Here notice that it shows icon resembling a home. This is because it will be the fragment that will be shown when we launch our app. Let’s add two buttons which we shall use to navigate to our other two fragments.
After we have added buttons, we should add our other two fragments in the nav_graph. Once they are added it should look like this:
We can assign actions between these fragments by hovering our mouse over the source fragment and when a circle appears on the right of the fragment we should click and extend the line and connect with our destination fragment.
This way we create our action. After connecting both ViewBalanceFragment and ViewTransactionsFragment with our MainFragment . We should move to our MainFragment class.
Our nav_graph will look like this when we have connected to both of our fragments. This way it is much easier to see the connections between the fragments and define the desired flow.
After this, let’s go to our MainFragment class and let's initialize the two buttons and set click listeners on them.
Now for navigating to the respective fragments, we must use NavController which we discussed earlier in this post. For getting NavController we can use findNavController() and using the NavController we should call a function named navigate.
We should now provide our action which we created earlier using the design mode in our nav_graph. We should access our actions through R.id. as actions are distinguished using IDs.
As we can see that there seem to be two very familiar IDs. Just using the appropriate IDs is enough for navigating to the desired destination. Let’s choose our IDs accordingly for the two buttons.
Lastly, After we have used the appropriate IDs the NavController will take care of all the low-level details required for navigating to our destination.
Next Up: A Beginner’s Guide for Using Safe-Args in Navigation Component
