How to work with Navigation Controller in android with Kotlin.(Part-1)

The navigation controller is the part of Android Jetpack. Jetpack is the set library, component, and tools. Which helps you to build a better application. Navigation is now a part of the architecture component and you can see it in the below image.

In 2018 google introduce the Navigation architecture component which helps us to manage the fragment transaction properly. Google's official recommendation is to create a single activity with multiple fragments in the application or you can create multiple activities as well.

But the major problem with the fragment transaction was its complex structured application. Android Jetpack Navigation controller provides you with several classes to deal with the fragment transaction

Hassle-free fragment transaction by using Navigation Artitecture component

Principle of Navigation

• Fixed Start Destination
• Navigation state is represented as a stack of destinations
• Up and Back are identical within your app’s task
• The Up button never exits your app
• Deep linking simulates manual navigation

Advantage of using Navigation Controller

• Automatic handling of fragment transactions
• Correctly handling up and back by default
• Default behaviors for animations and transitions
• Deep linking as a first-class operation
• Implementing navigation UI patterns (like navigation drawers and bottom navigation) with a small amount of code
• Type safety arguments when passing information while navigating
• Android Studio’s Navigation Editor to view and edit your navigation graphs.

Getting Started

Before starting the implementation of the Navigation Architecture Component. you must be aware of the following:

• Navigation Graph (Destination and Action)
• Navigation Host Fragment
• Navigation Controller

Add the following dependency in your app-level gradle

//navigation controller
def nav_version_ktx = "2.1.0-alpha06"
// Kotlin
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version_ktx"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version_ktx"

After adding the dependencies you can start with the Navigation controller implementation.

Navigation Graph

Navigation graph is an XML file which shows you how the Fragments are related to each other. It contains the Fragments Destinations, routes, arguments, action, etc. Using the Navigation graph you can quickly set the Transition Animation by setting up some attributes.

A Navigation Graph consists of:

• Destinations: The individual screens the user can navigate to and can specify arguments, actions and deep link URLs to these destinations.
• Actions: The routes user can take between your app’s destinations. Which are represented by the arrow sign in the Design view.

How to add Navigation Graph in the project?

• Right-click on res folder in the project view
• Click on New->New Resource File and select the navigation from the Resource type drop-down shown in the image below
• Type any name for the navigation graph in the File name like my_navigation_graph
• Press the OK button and your navigation graph will add for the project

• At the very first time, your navigation graph will be empty. You can add the Fragments which are already created or you can create a new by clicking on Create New destination.

• You can view a visual representation of your project’s Navigation Graph in Android Studio’s Navigation Editor by switching the Design and Text tab showing in the navigation graph.

And now you have just created a Navigation graph in android.

Navigation Host Fragment

In our Activity layout, we have to add a fragment as NavHost and need to define, Where the NavHostFragment finds the navigation graph. You can see the following code in which we define the fragment as NavHostFragment and also define the navigation graph.

• app: navGraph defines which Navigation Graph will be associated with the Navigation Host
• app:defaultNavHost A boolean that if set true will allow the Navigation host to intercept when the back button is pressed.

<fragment
            android:id="@+id/my_nav_host_fragment"
       android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:defaultNavHost="true"
            app:navGraph="@navigation/my_navigation_graph"/>

Navigation Controller

NavController is the class which deals with the FragmentManager or FragmentTransaction. NavController manages application navigation with the NavHostFragment. Navigation flow and destination are determined by the navigation graph owned by the NavController class.
And currently running NavHostFragment directly deal with maintaining back-stack, action bar, toolbar, navigation drawer icon, etc

How to navigate from one fragment to others?

• Create a NavController instance in the fragment
• Initialize the NavController instance with a navigation graph like below

navController = Navigation.findNavController(
    activity!!,
    R.id.my_navigation_graph
)

• Use the navigate method of NavController class with a destination id given in the navigation graph.

navController.navigate(R.id.action_loginFragment_to_signupFragment)

• If you want to back to the last fragment from where you come here just user the navigateUp method of NavController

navController.navigateUp()

Here you are done with your first fragment navigation by using the navigation architecture component.

Now the time is to move to the next level and bind up this with navigation drawer. link is given below.

How to work with Navigation Controller in android with Kotlin.(Part-2)

Here is the full source code of the Navigation controller

maraj91/NavigationArcComponent