Android Jetpack-Navigation Library Example

The Navigation Architecture Component, released as part of Android Jetpack , aims to simplify the implementation of navigation in your Android app. This component and its guidelines offer a new look into how navigation should be implemented, including the suggestion for the use of single-Activity architecture as the preferred architecture for Android Jetpack moving forward.

Principles of Navigation

• The app should have a fixed starting destination
• A stack is used to represent the navigation state of an app
• The Up button never exits your app
• Up and Back are equivalent within your app’s task
• Deep linking to a destination or navigating to the same destination should yield the same stack

Set up navigation in a project

Note: If you want to use Navigation Architecture Components with Android Studio, you must use Android Studio 3.2 Canary 14 or higher.

• Add the following Navigation Architecture Component to your app or module’s build.gradle file.

dependencies {

    //Dependencies for Navigation.
    def nav_version = "1.0.0-alpha02"

    implementation "android.arch.navigation:navigation-fragment:$nav_version" // use -ktx for Kotlin
    implementation "android.arch.navigation:navigation-ui:$nav_version" // use -ktx for Kotlin
    
}

• In the Project window, right-click on the res directory and select New > Android resource file. The New Resource dialog appears.
• Type a name in the File name field, such as “nav_graph“.
• Select Navigation from the Resource type drop-down list.
• Click OK.
• Click Design to see the Navigation Editor.

The Navigation Editor’s sections are:

1. The Destinations list – Lists all destinations currently in the Graph Editor.
2. The Graph Editor – Contains a visual representation of your navigation graph.
3. The Attributes Editor – Contains attributes associated with destinations and actions in your navigation graph.

 

• From the Graph Editor, click New Destination  . The New Destination dialog appears.
• Click Create blank destination or click on a fragment or activity.

Connect destinations

Destinations are connected using actions. To connect two destinations:

• From the Graph Editor,  over the right side of the destination that you want users to navigate from. A circle appears on the destination.

• Click and hold, drag your cursor over the destination you want users to navigate to, and release. A line is drawn to indicate navigation between the two destinations.

 

Click on the arrow to highlight the action. The following attributes appear in the Attributes panel:

• The Type field contains “Action.”
• The ID field contains a system-assigned ID for the action.
• The Destination field contains the ID for destination fragment or activity.

Modify an activity to host navigation

An activity hosts navigation for an app through the implementation of a NavHost interface which is added to your activity’s layout. The NavHost is an empty view whereupon destinations are swapped in and out as a user navigates through your app.

A default implementation of NavHost is the NavHostFragment widget which you can add to your layout. We can see an example of this below.

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/my_nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

Connect destinations to UI widgets

btn_frag1.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick (View view){
Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_firstFragment);
}
});

Where action_mainFragment_to_firstFragment is the action ID from main_fragment to first_fragment.