engineering

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

share

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

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:
$SRC_FRAGMENT_NAME$Directions.$ACTION_NAME$(...arguments..)
  • To retrieve arguments:
$DST_FRAGMENT_NAME$Args.fromBundle(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

Resources:

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

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