Android JetPack – Navigation Architecture

In this tutorial, we’ll be discussing the Navigation Architecture that is a part of the JetPack.
JetPack is a set of components and libraries introduced at Google I/O 2018 to build better applications.

Android Jetpack consists of the following components:

Android JetPack Navigation Architecture Component

The Navigation Architecture component is a part of the new AndroidX package that’s introduced since Android SDK 28.

This component consists of new guidelines to structure your application, especially navigation between Fragments.

Google recommends the Single Activity Architecture moving forward when using JetPack.
Navigation Architecture gets ride of the complex FragmentTranscation by providing its own set of classes to navigate between fragments. Let’s first look into the guidelines for Navigation Architecture.

Principles of Navigation

• The app should have a fixed starting destination.
• A stack is used to represent the navigation state of an app.
• The Navigation Up function never exits your app.
• Up and Back should function identical in all the other cases.
• Deep linking to a destination or navigating to the same destination should yield the same stack.

Getting Started

Create a new Android Studio Project. Add the following classpath inside the root build.gradle file:

buildscript {
	...
	repositories {
    		google()
	}
	dependencies {
    		...
    		classpath 'android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha04'
	}
}

Inside the app’s build.gradle add the following:

implementation 'android.arch.navigation:navigation-fragment:1.0.0-alpha04'
implementation 'android.arch.navigation:navigation-ui:1.0.0-alpha04'

Add the following plugin inside app’s build.gradle:

apply plugin: 'androidx.navigation.safeargs'

Project Structure

Our project consists of a single activity and two fragments. Let’s see how we arrived at this.

Navigation Graph

A Navigation Graph is the core layer of the Navigation Architecture. It lays out all the fragments/activities and adds all the connections between them.

Within this graph, we address different parts using a few key terms:

Navigation Graph XML – This is an XML defined which is created inside the res folder. Right click on the res directory and choose New -> Android resource file. Set the title for the file and choose Navigation from the Resource type dropdown as shown below:

This creates a navigation folder inside the res with the relevant file name.

Navigation Host Fragment –
Inside the Activity layout, we define a Navigation Host Fragment. In our project, we’ve set the navigation host fragment inside the activity_main.xml layout as shown below:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        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/navigation_graph" />


</androidx.constraintlayout.widget.ConstraintLayout>

• app:navGraph: defines which Navigation Graph will be associated with the Navigation Host
• app:defaultNavHost="true": ensures that the Navigation Host intercepts the system back button when pressed.

Destination – A Destination is any fragment or activity where the user can go.

We can add destinations inside the Navigation Graph Design file as:

• On the left, we have the Destinations
• In the middle, we have the Navigation Graph
• On the right, we have the Attributes editor. Inside the attributes editor, we can add actions, pass arguments

Notice the circular icon on the FirstFragment when it is highlighted. These are Actions.

Actions – These are defined to navigate from one fragment/activity to another. We can define them by dragging or in the XML.

An action is created with an id specified. You can choose the transition animations as well from a dropdown list of built-in ones or create your own and specify it.
The XML code gets auto-generated:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/navigation_graph"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.journaldev.androidjetpacknavigation.FirstFragment"
        android:label="navigation_first_fragment"
        tools:layout="@layout/navigation_first_fragment" >
        <action
            android:id="@+id/action_firstFragment_to_secondFragment"
            app:destination="@id/secondFragment"
            app:enterAnim="@anim/nav_default_enter_anim"  />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.journaldev.androidjetpacknavigation.SecondFragment"
        android:label="navigation_second_fragment"
        tools:layout="@layout/navigation_second_fragment" />
</navigation>

The above code can be written directly without the need of the Design Editor.
We’ve added an animation on the action.

Inside the Navigation Graph XML tag, you must specify the startDestination. The application gets launched there.

The layouts for the First and Second Fragment are:

navigation_first_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".FirstFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:gravity="center"
        android:textSize="22sp"
        android:textColor="@android:color/white"
        android:text="This is First Fragment" />

    <Button
        android:id="@+id/button_frag1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Go to next screen" />
</LinearLayout>

navigation_second_fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    android:gravity="center"
    tools:context=".SecondFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="This is Second Fragment"
        android:textColor="@android:color/white"
        android:textSize="22sp" />

    <Button
        android:id="@+id/button_frag2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Back" />

</RelativeLayout>

Now that the layouts are ready, let’s see how to navigate from one Fragment to the other via the actions.
NavController manages app navigation within the NavHost.

The code for the FirstFragment.java class is:

package com.journaldev.androidjetpacknavigation;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.navigation.NavController;
import androidx.navigation.NavDirections;
import androidx.navigation.Navigation;

public class FirstFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.navigation_first_fragment, container, false);
    }


    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);


        View.OnClickListener s = Navigation.createNavigateOnClickListener(R.id.action_firstFragment_to_secondFragment);
        Button button = view.findViewById(R.id.button_frag1);
        button.setOnClickListener(s);
    }

}

We pass the action id inside the createNavigateOnClickListener method. There are a few alternative ways to navigate as well:

Alternative Way 1
We can navigate using the following code as well:

final NavController navController = Navigation.findNavController(getActivity(), R.id.my_nav_host_fragment);

button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                navController.navigate(R.id.action_firstFragment_to_secondFragment);
            }
        });

Alternative Way 2

final NavDirections navDirections = FirstFragmentDirections.actionFirstFragmentToSecondFragment();
final NavController navController = Navigation.findNavController(getActivity(), R.id.my_nav_host_fragment);

button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                navController.navigate(navDirections);
            }
        });

Passing Arguments

The navigation architecture comes with a built-in way to pass type-safe arguments from one Fragment to the other.

You can define them in the Navigation Graph design editor as:

and/or in XML:

<fragment
        android:id="@+id/firstFragment"
        android:name="com.journaldev.androidjetpacknavigation.FirstFragment"
        android:label="navigation_first_fragment"
        tools:layout="@layout/navigation_first_fragment" >

        <argument
            android:name="test_string"
            android:defaultValue="hello world"
            app:argType="string" />
    </fragment>

app:argType should be used in place of app:type. app:type is deprecated.

Now when we navigate these args get automatically passed.
We can also pass more arguments programmatically.

Our onViewCreated method of the FirstFragment now becomes:

@Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);


        final Bundle bundle = new Bundle();
        bundle.putBoolean("test_boolean", true);

        final NavController navController = Navigation.findNavController(getActivity(), R.id.my_nav_host_fragment);

        
        Button button = view.findViewById(R.id.button_frag1);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                navController.navigate(R.id.action_firstFragment_to_secondFragment, bundle);
            }
        });
    }

The code for the SecondFragment.java class is:

package com.journaldev.androidjetpacknavigation;

import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.navigation.NavController;
import androidx.navigation.NavDestination;
import androidx.navigation.Navigation;

public class SecondFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.navigation_second_fragment, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        
        Toast.makeText(getActivity().getApplicationContext(), "Bundle args " + getArguments().getBoolean("test_boolean"), Toast.LENGTH_SHORT).show();
        Toast.makeText(getActivity().getApplicationContext(), "Bundle args " + FirstFragmentArgs.fromBundle(getArguments()).getTestString(), Toast.LENGTH_SHORT).show();

        Button button = view.findViewById(R.id.button_frag2);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                final NavController navController = Navigation.findNavController(getActivity(), R.id.my_nav_host_fragment);
                navController.navigateUp();

                navController.addOnNavigatedListener(new NavController.OnNavigatedListener() {
                    @Override
                    public void onNavigated(@NonNull NavController controller, @NonNull NavDestination destination) {
                        Log.d("TAG", destination.getLabel() + " ");
                    }
                });
            }
        });
    }
    
}

The arguments passed in the Navigation Graph have auto-generated getters when you re-build the project.

FirstFragmentArgs.fromBundle(getArguments()).getTestString() is used to retrieve the argument passed from the FirstFragment.
navigateUp() is used to return to the previous fragment.
addOnNavigatedListener is called when the navigation is completed.

The output of the application in action is:

This brings an end to this tutorial. You can download the project from the link below: