Android Jetpack — Navigation Library (Part1 — Destinations)

Andreas Botzler
3 min readMay 10, 2018

--

Principles of Navigation

The Navigation Architecture Components define a set of principles which helps you to build an in-app-navigation with a consistent and predictable user experience.

  • The app should have a fixed starting destination
  • A stack is used to represent the navigation state of an app
  • The Up button never exits your app
  • Up and Back are equivalent within your app’s task
  • Deep linking to a destination or navigating to the same destination should yield the same stack

Implement Navigation

The Navigation Architecture Component is designed to have a single activity with multiple Fragments. The Activity hosts a Navigation Graph. If your app has multiple Acitivties each Activity hosts its own Navigation Graph.

Gradle Dependency

Add the Google repository to your projects build.gradle

allprojects {
repositories {
google()
jcenter()
}
}

Add the following dependencies to your app or module build.gradle file

dependencies {
implementation 'android.arch.navigation:navigation-fragment-ktx:1.0.0-alpha01'
implementation 'android.arch.navigation:navigation-ui-ktx:1.0.0-alpha01'
}

Navigation Graph XML

With Android Studio 3.2 we can now add a Navigation Resource File. Right click on the res directory and choose New -> Android resource file. Choose a title for the file and select Navigation from the Resource type dropdown.

Now we have a new file with a new root element type <navigation/>:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android">
</navigation>

Navigation Host Fragment

In our MainActivity layout we have to add a fragment as NavHost and define where the NavHostFragment finds the navigation graph.

?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<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"
/>

</android.support.constraint.ConstraintLayout>

Defining Destinations

Back in our Navigation Graph we can add new destinations. We can switch between Design and Text. If we choose Design we can see a three columns layout.

  • On the left side we see the defined destinations
  • In the middle is the Navigation Graph
  • On the right side is the Attributes editor.
Android Studio 3.2(canary) with Nav Editor

We can now add existing Fragments/Activities to our Navigation Graph(Icon on the top left) or add a new blank destination.

Perform Navigation

To perform a navigation we have to define an action (right side of the Design View). We will use a simple navigation without transitions and params(In the next Part we will create more complex transactions).

Therefor we have to select our source fragment, afterwards click on the + next to the Actions and choose Add Action. Now we will see an Add Action Wizard. We have to select a destination(the id will be generated for us) and click Add.

We can now navigate with the NavigationController.navigate(id: Int) method. To retrieve the NavigationController we have to call findNavController() in our Source Fragment. The findNavController method is an extension function in Kotlin.

detailButton.setOnClickListener { view ->
view.findNavController().navigate(R.id.action_list_to_detail)
}

Thats it!

Thanks for reading this article. Don’t miss the next Story about the new Architecture Navigation Component and follow me.

🖤If you liked this article please recommend it and 👏clap for it. 🖤

If you want to get in touch with me: LinkedIn, Twitter, GitHub and Facebook

--

--