Picture by means of Bryan Minear on Unsplash

Within the previous post, we offered the Jetpack Navigation Components framework. Nowadays we’re going to see how we will benefit from it! What are the stairs we need to apply so as to put into effect navigation with this new library? Let’s evaluation them in combination on this article.

Undertaking configuration

First of all, we upload the desired dependencies within the gradle report:

implementation "androidx.navigation:navigation-fragment-ktx:$navVersion" 
   
implementation "androidx.navigation:navigation-ui-ktx:$navVersion"

The module “navigation-fragment” accommodates the core elements, while “navigation-ui” accommodates extensions functions used to hook UI elements with navigation movements.

All libraries and plugins are to be had for each Java and Kotlin ( with “-ktx” suffix). You’ll take a look at them here.

Including UI controllers

As said within the principles of navigation really helpful by means of Google, actions principally comprise world navigation mechanisms (just like the navigation drawer) and fragment bins are used as placeholders for present display content material.

In line with this pointers, every process format will comprise a “NavHostFragment” example as a dynamic container:

<ViewGroup>

     <!--XXX: container used to show locations in our graph -->
     <fragment
         android:identity="@+id/main_activ_nav_container"
         android:title="androidx.navigation.fragment.NavHostFragment"
         app:defaultNavHost="true"
         app:navGraph="@navigation/home_graph"
         />

      <!-- TOP LEVEL NAV VIEWS HERE (toolbar, drawer, backside nav...)

</ViewGroup>

Each any such bins has related (or “hosts”…) a navigation controller, which is answerable for executing navigation movements. This affiliation is finished during the “app:navGraph” assets, so the fragment will show locations indexed at the specified graph.

However, the “app:defaultNavHost” assets is used to make this part accountable (or now not) for dealing with the up/again button behaviour.

“Every navhostfragment is associated to a navigation controller so it dynamically displays destination contents as the user navigates through the app”

Dealing with the navigation graph

Graph introduction

The graph is a XML useful resource saved within the “res/navigation” folder. We will create each the listing and the XML report the use of the IDE contextual menu.

<navigation
   android:identity="@+id/home_nav_graph.xml"
   >
  
   <!-- locations right here... >   

</navigation>

Graph configuration

Each graph wishes an access level: that’s the preliminary vacation spot that shall be displayed when launching navigation. It’s set with the “app:startDestination” assets:

<navigation
   android:identity="@+id/home_nav_graph.xml"
   app:startDestination="@+id/home_dest"
   >

   <!-- CONTENT DISPLAYED ON START ->
   <fragment      
android:identity="@+id/home_dest"
      ...
      />

</navigation>

Including locations to graph

As a way to upload locations (actions, fragments, perspectives or dialogs) to the graph, we will use the drag-and-drop gear or code the corresponding XML tags.

Including vacation spot to the navigation graph with Android Studio

Each vacation spot indexed within the navigation graph will have to have the next attributes:

  • a distinctive ID, utilized by the device to spot displays and show them based on person movements (akin to deciding on an choice from a menu)
  • a title, containing all the identifier of the category being represented by means of that vacation spot
  • a label, used to turn a name at the motion bar
<navigation>

   <!-- CONTENT DISPLAYED ON START ->
   <fragment
      android:identity="@+id/home_dest"
      android:title="some.package.HomeFragment"
      android:label="Home"
      ...
      />

   <!-- extra locations right here... >   

</navigation>

Including movements on locations

Locations will have nested movements, surroundings the puts we will get to from the present display. Each motion specifies a vacation spot the use of the “app:destination” assets:

<navigation>

   <!-- CONTENT DISPLAYED ON START ->
   <fragment
      android:identity="@+id/home_dest"
      ...
      />

      <motion
         android:identity="@+id/next_action"
         app:vacation spot="@id/some_other_dest"
         />

   <!-- extra locations right here... >   

</navigation>

Motion linking 2 locations

“By using destinations and its nested actions, we build up the app navigation blueprint”

Hooking UI occasions and navigation

Typically phrases, we will observe navigation when responding to occasions:

  • on perspectives, like buttons, that normally carry out secondary navigation (going from one display to the following)
  • on top-level widgets, akin to the ground navigation view, that deal with number one navigation (switching from one module to every other in our app). Widgets for number one navigation normally have a XML menu related.

On perspectives

Let’s say we now have, for example, a easy button on a fraction format:

<RelativeLayout
    ...
    gear:context=".flow.FlowFragmentStep1">

    <Button
        android:identity="@+id/step1_main_btn"
        ...
        />

    <!-- XXX: extra content material right here.. -->

</RelativeLayout>

When configuring the button click on listener, we will name navigation controller strategies to leap to every other display, specifying the precise vacation spot within the parameter:

personal amusing setListeners() = 
   this.step1_main_btn.setOnClickListener { 
      this.findNavController().navigate(R.identity.flow_step_2_dest) 
   }

Instead, we will additionally use a comfort means from the “Navigation” elegance:

Navigation.createNavigateOnClickListener(vacation spot, args) 

On top-level widgets

If we wish to get ready the motion bar for navigation, first we create a configuration object containing:

  • the checklist of displays (known by means of its vacation spot title) on which we wish to show the hamburguer icon (the remaining will show the again icon)
  • the drawer format related to the toolbar. Can be proven when clicking the menu icon
  • the default behaviour for again navigation when clicking the again icon

After that, we name an extension means at the “Toolbar” elegance that if truth be told binds the toolbar with our navigation graph:

personal amusing hookToolbar() {

   //XXX: create config object
   val config = AppBarConfiguration(

      //XXX: displays on which we display burguer icon
      setOf(R.identity.home_dest, R.identity.flow_step_1_dest, R.identity.settings_dest),

      this.getDrawerLayout(),
   
      //XXX: habits for up navigation
      fallbackOnNavigateUpListener = { this.getNavController().navigateUp()}
   )

   //XXX: configure toolbar and navigation the use of config
   this.app_toolbar.setupWithNavController(this.getNavController(), config)
}

personal amusing getDrawerLayout() = this.findViewById<DrawerLayout>(R.identity.drawer)

safe amusing getNavController() = this.findNavController()

However, if we now have lateral navigation record the next XML pieces:

<menu xmlns:android="http://schemas.android.com/apk/res/android">

   <merchandise     
      android:identity="@+id/home_dest"
      android:name="@string/section_home"
      />

   <merchandise
      android:identity="@+id/flow_graph"
      android:name="@string/section_flow"
      />

   //XXX: extra pieces...

</menu>

Then we will configure this widget too, the use of a equivalent extension serve as:

personal amusing hookPrimaryNavigation() {
   this.app_navigation?.setupWithNavController(navController = this.getNavController())
}

safe amusing getNavController() = this.findNavController()

The Java model of the library forsakes those extensions purposes with static strategies. Irrespective of the implementation language (Java or Kotlin), some of these APIs carry out the similar operations, profiting from the shared IDs used each as locations and menu pieces.

“Extension functions defined on view classes allow us to easily bind UI components and navigation”

Arising subsequent…

Within the remaining publish about Navigation Components, we can disregard a few of its further options. Till then, take a look at the code within the following repo:

https://github.com/begomez/NavComponentsGarden

LEAVE A REPLY

Please enter your comment!
Please enter your name here