The Navigation Component help us manage and visualize how our application may operate.
There are 3 parts to the component.
(1) A Navigation host
(2) A navigation controller
(3) A Navigation graph.
Navigation Host
Navigation Component
Learn how to implement the Navigation Component in your Android App using Android Studio. Hello, I will be talking about the navigation
A Navigation host is a container that we place in our app. We use this container to display the active fragment or activity for our current destination.
Navigation Controller
The Navigation controller is an object that we create in code to control the navigation between the destinations in the navigation component.
Navigation Graph
The Navigation graph is the actual visual representation of how our navigation will work and look.
Implementation
To begin using the Navigation Component, we need to add the dependencies in our code. Go to the app level build gradle file and add the dependencies.
dependencies {
....
def version = "2.3.2"
implementation "androidx.navigation:navigation-fragment:$version"
implementation "androidx.navigation:navigation-ui:$version"
}
For the latest version, visit the android navigation library page.
Also, keep in mind that you will need Android Studio 3.3. or higher and Java 8 to use the navigation component feature.
Once you have implemented the dependencies, we can begin creating the 3 parts to the component.
Creating the Navigation Graph
First, create the navigation graph.
In Android Studio, select the Android option from the drop down menu so we see all the necessary files and directories for our project.
Right click on the resource folder and go to New > Android Resource File.
Give the file a name and change the resource type to Navigation.
Creating the Navigation Host
Next, create the Navigation Host.
Go to your application’s main activity’s xml layout file.
In the palate, search for the NavHostFragment widget. This will be the container that we will use to display the current active destination in our navigation component.
Click and drag it in the layout to place it in there.
It will prompt a dialog box for us to select the navigation graph we want to link the host with.
Select the graph that you just made and press OK.
I am using the Constraint Layout, so I need to add the constraints for the navigation host fragment. If you are using a different layout, make sure to set the parameters for the host so it will be visible.
Now that we have our container to place our fragments and activities in and a graph to map out our application, we can start creating the destinations.
Creating Destinations
Go back to the navigation graph. Click on the New Destination icon and then "Create New destination. "
Select a fragment layout and click next. Rename the fragment and click finish
This will automatically generate our Fragment class and xml layout files.
Using and Existing Fragment
If you have an existing fragment or activity that you want to add, add a placeholder.
Then switch to the code mode for the graph. You will see an empty fragment.
To turn the placeholder into a destination, we need to add 3 more attributes to it, name, layout, and label.
<fragment
android:id="@+id/page2"
android:name="com.example.tutorial.archive.Page2"
tools:layout="@layout/fragment_page2"
android:label="fragment_page2"/>
Name is the path to the class file for the fragment you want to use for the destination.
Layout is the layout reference for that fragment. Since our Fragment is using the layout page 1, we would put @layout/page1
Label is the name for it for the layout file.
The id is what we use to identify and reference the destination. Rename it to something meaningful.
Lastly, set a start destination for the navigation component.
Select the destination you want to display first. Then click on the "Assign start destination" icon.
This will automatically add the startDestination attribute to the navigation component and set it to that fragment.
If we run the application, we will see that the layout for the fragment we set as the start destination is displayed.
Changing the Fragment Layout
Instead of using the default blank layout, I will replace the text view widget with a button. I will do that to both of the fragments so we can tell the difference between the two.
Navigation
To navigation between the destinations, we will have to do it in the code. Go to the start destination’s fragment class file.
Since my startDestination is using the Page1 fragment, I will go to the Page1Fragment class file.
Create a reference to the button and add a on click listener to it.
When we click on this button we want to move to another destination.
First, grab the Navigation class, call the findNavController() method, and pass in the button view reference. This method will locate the nav controller that the button is in.
Lastly, call the navigate method from the controller object. Pass in the id of the destination that you want to navigate to.
If you have an error, you may need to import the Navigation class.
import androidx.navigation.Navigation;
If we run the application now and click on the button, it will transition to another destination.
Actions
The last thing I want to mention in this video for the Navigation component is Actions. An Action is the link between 2 destinations. They are used to determine the behavior when the component makes a transition from one destination to another.
We can use actions to map out how our application can run.
In the previous section, we navigated from one destination to another by using the id of the destination. However, we can also pass in the id of an action and we can achieve the same result.
To create an action, go to the navigation graph. If we click on a destination, we can see a circle. Click on it. Drag and let go on top of another destination.
It will create an arrow between the 2 destinations. If we click on the arrow, we can see that it has an id and some other attributes.
If we go back to the start destination’s class file. We can change the id to the id of the destination.
If we run the application, we will get the same effect.
