Boost Productivity: Android Navigation — Part 1

Android Navigation is a new navigation component which is introduced in Android Jet pack.

Simply, what is Navigation?

“In context of Android, Navigation that focuses on the process of monitoring and controlling the movement of switching from one fragment to another fragment”. Using Navigation you can design your app flow graphically like a mock-up design like in Adobe XD.

It is recommended to use a single Activity with multiple Fragments when using the new Navigation component. Navigating via Fragments simplifies the life-cycle greatly as you don’t have to deal with complexity of interaction between Activity and Fragment life-cycles. It also makes applying shared element transitions and transition animations very easy.

If you want to get started with Official documentations, click here

Now, let’s take basic dive into Android Navigation by an example project.

Let’s discuss why should we use navigation component in your projects.

App Scenario:

We want to have a simple that has only two or more screens. We can do this in traditions way, but we can do this in a smart way by using Android Navigation.

Traditional way:

Create multiple fragments, layouts, add frame layout to activity layout, maintain actions to move from one to another and so on. Finally the most precious thing, maintain back stacks. You have to maintain it by your own.

When we have Toolbar, Navigation Drawer, Bottom Navigation in our projects, we have to deal with it by handing actions by our own.

Smart Way:

Use Navigation Component to solve this in a smart way. It will create fragments for us, create actions to move from one to another, passing arguments/data, maintain back stacks.

Navigation UI to interact with other components like Toolbar, Drawer, Bottom Nav. It’s a collections of tools to handle actions of other navigation components.

First, create a new empty Android project.

Empty Android Project

Now, take a look at the dependencies that we need to add to our example project.

Screenshot from official documentation

We will use Kotlin dependency in our example project. Let’s add Android Navigation Dependency to our example project.

//Navigation dependency
def nav_version = "2.3.0-alpha02"
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"
implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"
androidTestImplementation "androidx.navigation:navigation-testing:$nav_version"

Add those lines of code in the app level build.gradle dependencies section & sync.

Branch name in example project: setup/dependency

Let’s create an navigation graph to host fragments.

Create a New Resource File with type of Navigation.

That’s an empty graph. Let’s add some fragments.

Click on New Destination & add two fragments named “AFragment”, “BFragment”.

Take a look at the app:StartDestination, AFragment is the default destination for our example_graph,

Note: Every nav graph must have a default fragment

Create a new action to change destination from AFragment to BFragment.

Hover over to AFragment and on the right side, we can see a pointer, just drag the pointer to BFragment to create a new action, arrow sign is the visual representation of an action.

It will generate an action behind the scene to change destination from AFragment to BFragment.

An action must have an id & destination

Now we have setup our first navigation graph. Let’s focus on the implementations of Navigation

Branch name : setup/example_graph

Implementation:

In our main activity layout, Drag a new “NavHostFragment” from Palette to the layout. It will open up an UI to select a navigation graph. Select “example_graph” to continue.

Take a look at the XML code.

<fragment
    android:id="@+id/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_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:navGraph="@navigation/example_graph" />

app:navGraph -> To specify the specific navigation graph to attach with list fragment.

In our AFragment layout add a button name “Change Fragment”, to change destination of nav graph from AFragment to BFragment.

Implement “Change Fragment” button on click listener and navigate to BFramgent by using the help on Navigation. Simply pass the action id from example_graph to execute the destination change action with Navigation.

findNavController() is an extension from navigation library (This is one the best reason to love Kotlin)

Let’s run the code…

Branch Name: feature/output

Git Project Link:

rommansabbir/AndroidNavigationExample

That’s for Today. Let me know if you have any correction or suggestions. Thanks.