/ Android

The Navigation Architecture Component

In #io18 Google introduced Navigation architecture component which simplifies navigation between the fragment pages in Android app. In iOS similar feature existing for ages, segue connects the source and destination pages linked to particular action.

Benefits

  • Handling fragment transactions
  • Handling up and back correctly by default
  • Provides defaults for animations and transitions
  • Deep linking is a first class operation
  • Navigation UI patterns like navigation drawers and bottom nav with little additional work
  • Type safety when passing information while navigating

Navigation provides a consistent and predictable experience to users. It helps you build an app that adheres to each of the navigation principles below.

Principles

  1. Apps should have fixed starting destination [visible starting destination]
  2. A stack is used to represent the "navigation state" an app [LIFO]
  3. The Up button never exits your app
    - Up button should not be shown at start screen of the app. And if the activity is launched from the deep link, Up button should take users to hierarchical parent.
  4. Up and Back are equivalent to your app's task
    - When the system Back button would not exit your app, such as when you are on your own task and not on the start destination, the Up button should function identically to the system Back button.
  5. Deep linking to a destination or navigating to the same destination should yield the same stack

Prerequisites

Use Android studio 3.2 Canary 14 or later release

Implementation

By default Navigation architecture component includes support fragments and Activities as destinations and new types of destinations also supported. A set of destinations compose an app’s “navigation graph”. Destination appears with the Home icon is the start destination and it can be changed by Set Start Destination in the Attributes panel.

Setup

  1. Create new project with two Fragments (Ex: HomeFragment.kt & DestFragment.kt)
  2. Add the following in project gradle dependencies.
    classpath 'android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha01'
    
    It adds the navigation architecture classes to the project.
  3. Add Navigation architecture component to gradle.
    implementation 'android.arch.navigation:navigation-fragment::1.0.0-alpha01'
    implementation 'android.arch.navigation:navigation-ui:1.0.0-alpha01'
    
  4. In project resource directory create new type of resource file as "nav_graph" and select the resource type as "Navigation".
  5. Text and Design tabs will be there for nav_graph.xml file. Select design tab. And it look as below

Screen-Shot-2018-05-09-at-4.19.40-PM

More than one destination must be there to connect destinations. Destinations are connected using actions. To connect two detinations

Create & Connect Destinations

  • Create a Start destination by click on "add destination". Select Home Fragment and set as Start destination.
  • Create another destination for DestFragment.
  • In the Graph editor hover the cursor to right side of start destination. A circle appears on destination.
  • Click & Hold the circle then drag the cursor over the DestFragment destination and release. A line drawn between desitnations.
  • Click on the arrow to hightlight the action. And the attributes for the action appears on Attributes panel.

Screen-Shot-2018-05-09-at-5.55.48-PM

So destinations are created and connected as well. Now lets start the coding part.

  1. Open Main Activity's layout and add the fragment tag snippet to the layout. Note that xml has navGraph mentions which navigation flow is used and defaultHost attribute ensures your NavHostFragment intercepts the system Back button..
    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/my_nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        app:navGraph="@navigation/nav_graph"
        app:defaultNavHost="true"
        />
    

An activity hosts navigation for an app through the implementation of a NavHost interface which is added to activity’s layout. Navigation Architecture Component’s default NavHost implementation is NavHostFragment.

  1. Open MainActivity.kt and add the following snippet.
    override fun onSupportNavigateUp(): Boolean {
            return Navigation.findNavController(findViewById(R.id.my_nav_host_fragment)).navigateUp()
        }
    

it returns the boolean flag for system back button.

  1. Open HomeFragment.kt, add the click listener for button to navigate to DestFragment.kt by using createNavigateOnClickListener. R.id.actionhomeFragmenttodestBlankFragment is the id for the action created by connecting two destinations.
    action_button.setOnClickListener(Navigation.createNavigateOnClickListener(R.id.action_homeFragment_to_destBlankFragment, null))
    

Run the application. you can see the Fragment transaction happens when click on button in HomeFragment.kt which will navigate to DestFragment.kt and pressing back button navigates back.

Navigation_sample
Without the Fragment Transaction snippet navigation is achieved by using Navigation Architecture Component.

Check out the source from Github

Happy coding :)

The Navigation Architecture Component
Share this