Navigation Controller allows easy navigation between fragments using a navigation graph. The graph defines destinations and actions that link them. A NavHostFragment displays destinations and handles navigation. Navigation actions can pass arguments between destinations using SafeArgs. Implicit deep links can launch destinations from web URLs defined in the graph. NavigationUI connects Material Design components like bottom navigation to the graph.

1. Android JetPack: Easy
navigation with the new
Navigation Controller
Leonardo Pirro
Android Developer @ IQUII
@lpirro93

2. Who Am I?
Hi, I’m Leo. Android Developer @ IQUII

3. The Navigation
Problem

4. The Navigation Problem
• Android Framework never had a concise and
real solution to manage a common problem
like Navigation
• Navigation is “hard” and there are a lot things
that you have to solve by your own
• A lot of boilerplate code
= A LOT of bugs and crash

6. Android JetPack to the rescue

9. The Navigation
Architecture Component

10. What Navigation is trying to solve
Fragment Transactions
Testing
Deep Links
Passing Arguments
Up and Back

11. Navigation Graph
A navigation graph is a blueprint of
possible navigation destinations and the
actions that link them.

12. Navigation Graph

13. Define the
Navigation Graph

14. Navigation Graph
The navigation Graph is defined under res/navigation/navgraph_name.xml

15. Navigation Graph
<navigation 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"
app:startDestination="@id/signinFragment">
...
</navigation>
• <navigation> is the root node of the navigation graph
• <navigation> can contains one or more destination represented by
<activity> or <fragment>
• app:startDestination is an attribute which controls what destination is
launched by default when the user first opens the app.

16. Adding a new destination

17. Navigation Graph
<navigation 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"
app:startDestination="@id/signinFragment">
<fragment
android:id="@+id/homeFragment"
android:name=“com.lpirro.navigation.HomeFragment”
tools:layout="@layout/fragment_home" />
</navigation>
• android:id is the ID of the fragment that you can use to destination elsewhere in xml
or code
• android:name is your fragment class that will be instantiated when you navigate to
that destination
• tools:layout defines the layout xml file that should be shown in the graph editor

18. The role of the Activity

19. The role of the Activity
An entry-point to your app
The activity manages any global navigation
(BottomNavigation, NavigationDrawer, etc), but
delegates to a NavHost for content

20. The role of the Activity
The activity manages any global navigation
(BottomNavigation, NavigationDrawer, etc), but
delegates to a NavHost for content

21. The role of the Activity
The activity manages any global navigation
(BottomNavigation, NavigationDrawer, etc), but
delegates to a NavHost for content

22. <fragment
android:id="@+id/navHostHome"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/nav_graph"
app:defaultNavHost="true"
android:layout_width="match_parent"
android:layout_height="0dp" />
activity_main.xml

23. activity_main.xml
<fragment
android:id="@+id/navHostHome"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/nav_graph"
app:defaultNavHost="true"
android:layout_width="match_parent"
android:layout_height="0dp" />
android:name defines the fragment class of the NavHostFragment
from the navigation-fragment dependency

24. activity_main.xml
<fragment
android:id="@+id/navHostHome"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/nav_graph"
app:defaultNavHost="true"
android:layout_width="match_parent"
android:layout_height="0dp" />
android:navGraph associates a navigation graph to the
NavHostFragment

25. activity_main.xml
<fragment
android:id="@+id/navHostHome"
android:name="androidx.navigation.fragment.NavHostFragment"
app:navGraph="@navigation/nav_graph"
app:defaultNavHost="true"
android:layout_width="match_parent"
android:layout_height="0dp" />
android:defaultNavHost=“true” connects the system back
button to the NavHostFragment

26. Navigate to a destination

27. Navigate to a destination
buttonQuiz.setOnClickListener {
view.findNavController().navigate(R.id.quizFragment)
}

28. Navigate to a destination
val options = NavOptions.Builder()
.setEnterAnim(R.anim.slide_in_right)
.setExitAnim(R.anim.slide_out_left)
.setPopEnterAnim(R.anim.slide_in_left)
.setPopExitAnim(R.anim.slide_out_right)
.build()
buttonQuiz.setOnClickListener {
view.findNavController().navigate(R.id.quizFragment, null, options)
}

29. navigation-ui
A set of static methods to connects
Navigation with Material Design UI
components

30. BottomNavigation example

31. MainActivity.kt
bottomNavigationView.setOnNavigationItemSelectedListener {
when(it.itemId){
R.id.homeFragment -> {
navController.navigate(R.id.homeFragment)
true }
R.id.quizFragment -> {
navController.navigate(R.id.quizFragment)
true }
else -> false
}
}

32. MainActivity.kt
bottomNavigationView.setOnNavigationItemSelectedListener {
when(it.itemId){
R.id.homeFragment -> {
navController.navigate(R.id.homeFragment)
true }
R.id.quizFragment -> {
navController.navigate(R.id.quizFragment)
true }
else -> false
}
}
BAD

33. <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
...>
<android.support.v7.widget.Toolbar
... />
<fragment
android:id="@+id/navHostHome"
android:name=“androidx.navigation.fragment.NavHostFragment"
...
/>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottomNavigationView"
app:menu="@menu/bottom_navigation_main" />
</android.support.constraint.ConstraintLayout>
res/layout/activity_main.xml

34. <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
...>
<android.support.v7.widget.Toolbar
... />
<fragment
android:id="@+id/navHostHome"
android:name=“androidx.navigation.fragment.NavHostFragment"
...
/>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottomNavigationView"
app:menu="@menu/bottom_navigation_main" />
</android.support.constraint.ConstraintLayout>
res/layout/activity_main.xml

35. <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
...>
<android.support.v7.widget.Toolbar
... />
<fragment
android:id="@+id/navHostHome"
android:name=“androidx.navigation.fragment.NavHostFragment"
...
/>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottomNavigationView"
app:menu="@menu/bottom_navigation_main" />
</android.support.constraint.ConstraintLayout>
Uses the same IDs of the
destinations defined in the
Navigation Graph
res/layout/activity_main.xml KF 🐼

36. <navigation 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"
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/quizFragment"
android:name=“com.lpirro.navigationtalk.QuizFragment"
android:label="Quiz"
tools:layout="@layout/fragment_quiz" >
</fragment>
<fragment
android:id="@+id/homeFragment"
android:name=“com.lpirro.navigationtalk.HomeFragment"
android:label="Home" />
<fragment
android:id="@+id/filmFragment"
android:name=“com.lpirro.navigationtalk.FilmFragment"
android:label="Film" />
<fragment
android:id="@+id/cinemaFragment"
res/navigation/nav_graph.xml

37. res/menu/bottomnav_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/homeFragment"
android:icon="@drawable/ic_nav_home"
android:title="@string/nav_home" />
<item
android:id="@+id/filmFragment"
android:icon="@drawable/ic_nav_movies"
android:title="@string/nav_movies" />
<item
android:id="@+id/cinemaFragment"
android:icon="@drawable/ic_nav_theatre"
android:title="@string/nav_cinema" />
<item
android:id="@+id/quizFragment"
android:icon="@drawable/ic_nav_quiz"
android:title="@string/nav_quiz"/>
</menu>

38. MainActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar)
val navController = Navigation.findNavController(this, R.id.navHost)
NavigationUI.setupWithNavController(toolbar, navController)
bottomNavigationView.setupWithNavController(navController)
}

42. Actions

43. Create an action

44. Create an action
<fragment
android:id="@+id/homeFragment"
android:name=“com.lpirro.app.home.HomeFragment"
android:label="HomeFragment" >
<action
android:id="@+id/action_homeFragment_to_articleDetailFragment"
app:destination="@id/articleDetailFragment"
app:enterAnim="@anim/slide_in_right"
app:exitAnim="@anim/slide_out_left"
app:popEnterAnim=“@anim/slide_in_left"
app:popExitAnim="@anim/slide_out_right" />
</fragment>

45. Navigate using an action
button.setOnClickListener {
it.findNavController()
.navigate(R.id.action_signinFragment_to_homeFragment)
}

46. Safe Args

47. Passing data via SafeArgs

48. <fragment
android:id="@+id/articleDetailFragment"
android:name=“com.lpirro.app.articledetail.ArticleDetailFragment”
android:label="ArticleDetailFragment" >
<argument
android:name="article"
app:argType=“com.lpirro.app.data.models.Article” />
</fragment>
Passing data via SafeArgs

49. HomeFragment.kt
val directions = HomeFragmentDirections
.actionHomeFragmentToArticleDetailFragment(article)
view?.findNavController()?.navigate(directions)
ArticleDetailFragment.kt
article = ArticleDetailFragmentArgs.fromBundle(arguments).article

50. Deep links

51. Explicit
Notifications
App widgets
App shortcut
Actions
Implicit
Web URLs
Custom scheme URIs

52. Explicit deep links
With NavDeepLinkBuilder
Link to a specific destination in your app by its ID

53. MyFirebaseService.kt
val bundle = Bundle()
bundle.putParcelable("article", Article(id))
val deepLinkBuilder = NavDeepLinkBuilder(this)
.setGraph(R.navigation.nav_graph)
.setDestination(R.id.articleDetailFragment)
.setArguments(bundle)
val pendingIntent = deepLinkBuilder.createPendingIntent()

54. Implicit deep links
With <deeplink> in your navigation graph

55. Implicit deep links

56. nav_graph.xml
<fragment
android:id="@+id/quizFragment"
android:name=“com.lpirro.navigationtalk.QuizFragment”
android:label="Quiz"
tools:layout="@layout/fragment_quiz" >
<deepLink app:uri="www.example.com"/>
</fragment>

57. nav_graph.xml
<fragment
android:id="@+id/quizFragment"
android:name=“com.lpirro.navigationtalk.QuizFragment”
android:label="Quiz"
tools:layout="@layout/fragment_quiz" >
<deepLink app:uri="www.example.com"/>
<deepLink app:uri="www.example.com/content/{myArgs}"/>
</fragment>

58. nav_graph.xml
<fragment
android:id="@+id/quizFragment"
android:name=“com.lpirro.navigationtalk.QuizFragment”
android:label="Quiz"
tools:layout="@layout/fragment_quiz" >
<deepLink app:uri="www.example.com"/>
<deepLink app:uri=“www.example.com/content/{myArgs}"/>
<deepLink app:uri=“android-app://example/content/{id}”/>
</fragment>

59. http://www.androiddevs.it
Slack community - Android Developers Italia

60. Keep in touch!
lpirro
lpirro93
linkedin.com/in/lpirro
medium.com/@lpirro

61. Thank
You
Leonardo Pirro
Android Developer @ IQUII
@lpirro93