fabernovel loader

Lightning talks: Getting started with Google's Navigation Components Android

fabernovel loader
Any in-app navigation should provide its users a consistent and predictable experience. Here’s 6 steps to use Google’s Navigation Architecture Component.

The Navigation Architecture Component adheres to four main rules for a consistent and predictable in-app navigation: 1/ an activity is an app’s entry-point, fragments are screens. 2/ “Up” button mustn’t close the application (“Back” can). 3/ “Back” and “Up” buttons should function the same way (except for app’s entry points which are closed on “Back” pressed). 4/ Deep linking and navigating to a same destination should yield the same stack.

The first step is to add the library to app/build.gradle.

This library is based on a navigation graph (app/src/main/res/navigation/main_graph.xml). The navigation graph is an  XML resource file, a graphic version is available in Android Studio >3.2

In order to use the created navigation graph, it need to be host within an activity: app/src/main/res/layout/activity_main.xml. Navigating between fragment can be done in three ways:

1/ With a click, cf app/src/main/java/com/example/applidium/navcontroller/HomeFragment.kt ;

2/ Retrieving the `NavController` with a fragment app/src/main/java/com/example/applidium/navcontroller/FormFragment.kt
3/ Retrieving the `NavController` with a view app/src/main/java/com/example/applidium/navcontroller/RandomFragment.kt
You can simplify `NavigationView` navigation by using the same id in its menu’s items (menu/bottom_navigation_menu.xml) and in the navigation graph’s fragments. (cf MainActivity)

To pass arguments between screens, you can use a `Bundle` (see here), or `Safe-args` extension  ( add them to your build.gradle). Arguments’s type and nullity are declared in the navigation graph and checked at runtime. Two classes are generated:

  • To pass arguments:
  • To retrieve arguments:

The 6th and last step: animating transitions between screens, you can declare four types of transitions in the navigation graph:
– app:enterAnim: when navigating to the fragment
– app:exitAnim: when navigation from the fragment to a destination
– app:popEnterAnim: when « Back/Up » is pressed from a destination
– app:popExitAnim: when « Back/Up » is pressed from the fragment


Architecture Components – Repository: https://github.com/sjcqs/navigation-component-demo

Documentation: https://developer.android.com/topic/libraries/architecture/navigation/

Interested in this subject?

Let's discuss about it
next read
HQ Trivia reverse engineering

Launched on the very end of 2017 by the creators of Vine, HQ Trivia is making a lot of noise on the tech scene. Its instant popularity and disruptive concept (a mobile app active a ...

Accessibility in iOS applications

For one of our latest application, we had a strong requirement from the client. The app had to be completely accessible. What does it mean in practice? It means people with visual, ...