Navigating Android like a Pro

Ever since Google introduced Jetpack Navigation, there has been mixed reception on how to get it to work on the project we have or the projects we start. Navigation library had a lot of changes in recent times and it is almost stable and caters to most of our needs. In this talk, you would learn how to get it working for your apps from someone who tried it when it was first introduced and reverted back.

You will learn what new features are introduced in the Navigation 2.x and how to use them effectively in your apps. You will also learn about designing a single activity app and how to use Nested graphs. On the whole, when you leave the session, you will start loving fragments again and be ready to navigate your app like a Pro!

This talk was given at droidcon SanFrancisco 2019.

Transcript

1. Navigating Android
 Like A Pro @Vivek_Chanddru
2. What is Navigation?
3. JetPackNavigation Component
4. The 1.0.0 Issues
5. The 1.0.0 Issues • 1.0.0 took an year to get stable. It is okay to take that long but as a developer I was very impatient • 2.0.0 was essentially the same framework with androidX migrations done • Nav components was not as stable or feature rich as it is now.
6. Navigation Components - What’s the Status Now?
7. Current Versions 2.1, 2.2 and 2.3
8. Current Versions 2.1, 2.2 and 2.3 Stable
9. Current Versions 2.1, 2.2 and 2.3 Stable RC
10. Current Versions 2.1, 2.2 and 2.3 Stable RC Snapshot
12. viewModel scoped
 to navGraph
13. viewModel scoped
 to navGraph <dialog> 
 destinations
14. viewModel scoped
 to navGraph <dialog> 
 destinations <deeplink> 
 navigations
15. viewModel scoped
 to navGraph <dialog> 
 destinations <deeplink> 
 navigations Custom 
 NavController
16. viewModel scoped
 to navGraph <dialog> 
 destinations <deeplink> 
 navigations Custom 
 NavController Dynamic feature
 module navigation
17. Dependencies
18. dependencies { def nav_version = "2.1.0" implementation "androidx.navigation:navigation-fragment-ktx:$nav_version" implementation "androidx.navigation:navigation-ui-ktx:$nav_version" }
19. dependencies { def nav_version = "2.1.0" implementation "androidx.navigation:navigation-fragment:$nav_version" implementation "androidx.navigation:navigation-ui:$nav_version" }
20. NavGraph
23. Destination
24. Action
25. <fragment android:id="@+id/nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="match_parent" android:layout_height=“match_parent” app:defaultNavHost="true" app:navGraph="@navigation/nav_graph" />
26. Destinations
27. <activity android:id="@+id/detailActivity" android:name=“xyz.vivekc.nav.example.DetailActivity” android:label=“Detail Activity" tools:layout=“@layout/activity_detail” />
28. <activity android:id="@+id/detailActivity" android:name=“xyz.vivekc.nav.example.DetailActivity” android:label=“Detail Activity" tools:layout=“@layout/activity_detail” />
29. <activity android:id="@+id/detailActivity" android:name=“xyz.vivekc.nav.example.DetailActivity” android:label=“Detail Activity" tools:layout=“@layout/activity_detail” />
30. <activity android:id="@+id/detailActivity" android:name=“xyz.vivekc.nav.example.DetailActivity” android:label=“Detail Activity" tools:layout=“@layout/activity_detail” />
31. <activity android:id="@+id/detailActivity" android:name=“xyz.vivekc.nav.example.DetailActivity” android:label=“Detail Activity" tools:layout=“@layout/activity_detail” />
32. <fragment android:id="@+id/homeFragment" android:name=“xyz.vivekc.nav.example.HomeFragment” android:label=“Home" tools:layout=“@layout/fragment_home” />
33. <dialog android:id="@+id/confirmationDialog" android:name=“xyz.vivekc.nav.example.ConfirmDialogFragment” android:label=“Confirmation" tools:layout=“@layout/fragment_confirmation_dialog” />
34. <fragment android:id="@+id/membersFragment"/>
35. <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" android:id="@+id/nav_graph" app:startDestination=“@id/detailsFragment">
36. Actions
37. NavAction
38. NavAction • A NavAction is a class that gets generated for each of the action that is created in the navigation graph of the application
39. NavAction • A NavAction is a class that gets generated for each of the action that is created in the navigation graph of the application • NavAction holds the meta data of the action such as • Destination • Default Arguments (as a Bundle) • NavOptions (animations, back stack behaviour, launch mode etc)
40. <fragment android:id="@+id/homeFragment"> <action android:id="@+id/launchMembersFragment" app:destination="@id/membersFragment" app:enterAnim="@anim/nav_default_enter_anim" app:exitAnim="@anim/nav_default_exit_anim" app:popEnterAnim="@anim/nav_default_pop_enter_anim" app:popExitAnim="@anim/nav_default_pop_exit_anim"/> </fragment> <fragment android:id=“@+id/membersFragment"> <action … app:popUpTo="@+id/homeFragment" app:popUpToInclusive="true" /> </fragment>
41. <fragment android:id="@+id/homeFragment"> <action android:id="@+id/launchMembersFragment" app:destination="@id/membersFragment" app:enterAnim="@anim/nav_default_enter_anim" app:exitAnim="@anim/nav_default_exit_anim" app:popEnterAnim="@anim/nav_default_pop_enter_anim" app:popExitAnim="@anim/nav_default_pop_exit_anim"/> </fragment> <fragment android:id=“@+id/membersFragment"> <action … app:popUpTo="@+id/homeFragment" app:popUpToInclusive="true" /> </fragment>
42. <fragment android:id="@+id/homeFragment"> <action android:id="@+id/launchMembersFragment" app:destination="@id/membersFragment" app:enterAnim="@anim/nav_default_enter_anim" app:exitAnim="@anim/nav_default_exit_anim" app:popEnterAnim="@anim/nav_default_pop_enter_anim" app:popExitAnim="@anim/nav_default_pop_exit_anim"/> </fragment> <fragment android:id=“@+id/membersFragment"> <action … app:popUpTo=“@+id/homeFragment" app:popUpToInclusive="true" /> </fragment>
43. <fragment android:id="@+id/homeFragment"> <action android:id="@+id/launchMembersFragment" app:destination="@id/membersFragment" app:enterAnim="@anim/nav_default_enter_anim" app:exitAnim="@anim/nav_default_exit_anim" app:popEnterAnim="@anim/nav_default_pop_enter_anim" app:popExitAnim="@anim/nav_default_pop_exit_anim"/> </fragment> <fragment android:id=“@+id/membersFragment"> <action … app:popUpTo=“@+id/homeFragment" app:popUpToInclusive="true" /> </fragment>
44. Global Actions
45. Global Actions • Typically, an action is a pathway from one destination to another • Global Actions are actions that can be accessed from any destination to navigate to a particular destination • Useful where you want to create an action which can be used to launch the home screen or settings screen of the app from any other screen
46. <navigation ... android:id="@+id/nav_graph" app:startDestination="@id/homeFragment"> <action android:id=“@+id/launchHomeAction" app:destination="@id/homeFragment"/> </navigation>
47. Passing Data to the Destination
48. <fragment android:id="@+id/memberFragment" > <argument android:name="memberId" app:argType="integer" android:defaultValue="0" /> </fragment>
49. Safe-Args
50. buildscript { repositories { google() } dependencies { classpath "androidx.navigation:navigation-safe-args-gradle-plugin: 2.1.0" } }
51. buildscript { repositories { google() } dependencies { classpath "androidx.navigation:navigation-safe-args-gradle-plugin: 2.1.0" } } apply plugin: "androidx.navigation.safeargs.kotlin"
52. SafeArgs • Creates type-safe Args class which can be used to pass data to destinations • <DESTINATION>Directions class is generated with a method for each action from that destination • <DESTINATION>Args is created for the destination class which can populate the data using the fromBundle() method
53. val action = HomeFragmentDirections.launchMemberDetailsAction(memberId) navController.navigate(action) Originating Destination
54. val action = HomeFragmentDirections.launchMemberDetailsAction(memberId) navController.navigate(action) Originating Destination val args: MemberDetailsFragmentArgs by navArgs() Final Destination val args = MemberDetailsFragmentArgs.fromBundle(arguments) or
55. Deeplinks
56. Explicit Deep Link • Used in cases where you want to expose the destinations through PendingIntent. • Used for Notifications, App Shortcuts, Widgets etc
57. val pendingIntent = NavDeepLinkBuilder(context) .setGraph(R.navigation.nav_graph) .setDestination(R.id.homeFragment) .setArguments(args) .createPendingIntent()
58. Explicit Deep Link • If the context passed to the NavDeepLinkBuilder is not an activity, then the Navigation Component queries the PackageManager for the launch intent for the activity • You can also get NavDeepLinkBuilder if you have a NavController instance already using NavController.createDeepLink()
59. Implicit Deep Link • Used in cases where you want to open a destination using an URI • When another app invokes ACTION_OPEN on this URI, OS allows you to handle the URI with your app if it is available • Handles the back stack based on whether the Intent.FLAG_ACTIVITY_NEW_TASK flag is set or not
60. <fragment android:id=“@+id/homeFragment” … > <action android:id="@+id/launchMembersFragment" app:destination="@id/memberFragment"/> <deepLink app:uri=“android-app://xyz.vivekc.home“ /> </fragment>
61. <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.myapplication"> <application ... > <activity name=".MainActivity" ...> ... <nav-graph android:value="@navigation/nav_graph" /> ... </activity> </application> </manifest>
62. Navigation
63. NavController - NavHost • Navigation to a destination is done using a NavController • NavController is responsible for the navigation that happens within each NavHost • Each NavHost would have a NavController • Navigation to a destination can be done by obtaining an instance of NavController and using the navigate() method
64. Getting an Instance of NavController Fragment.findNavController() View.findNavController() Activity.findNavController(viewId: Int) Kotlin
65. Getting an Instance of NavController NavHostFragment.findNavController(Fragment) Navigation.findNavController(Activity, @IdRes int viewId) Navigation.findNavController(View) Java
66. Navigate Using Destination ID
67. view.findNavController() .navigate(R.id.detailsActivity)
68. Navigate Using Action ID
69. view.findNavController() .navigate(R.id.launchMembersFragment)
70. Navigate Using URI
71. <fragment android:id=“@+id/homeFragment” … > <action android:id="@+id/launchMembersFragment" app:destination="@id/memberFragment"/> <deepLink app:uri=“android-app://xyz.vivekc.home“ /> </fragment>
72. <fragment android:id=“@+id/homeFragment” … > <action android:id="@+id/launchMembersFragment" app:destination="@id/memberFragment"/> <deepLink app:uri=“android-app://xyz.vivekc.home“ /> </fragment>
73. <fragment android:id=“@+id/homeFragment” … > <action android:id="@+id/launchMembersFragment" app:destination="@id/memberFragment"/> <deepLink app:uri=“android-app://xyz.vivekc.home“ /> </fragment> val home = Uri.parse("android-app://xyz.vivekc.home") findNavController().navigate(home)
74. BackStack Manipulation
75. popUpTo & popUpToInclusive
76. popUpTo & popUpToInclusive • Remove additional destinations from back stack using popUpTo and popUpToInclusive attributes on an <action>
77. popUpTo & popUpToInclusive • Remove additional destinations from back stack using popUpTo and popUpToInclusive attributes on an <action> • app:popUpTo is used to navigate some destinations up to a certain specified destination during a navigate() call
78. popUpTo & popUpToInclusive • Remove additional destinations from back stack using popUpTo and popUpToInclusive attributes on an <action> • app:popUpTo is used to navigate some destinations up to a certain specified destination during a navigate() call • app:popUpToInclusive is a boolean flag used to remove the duplicate destinations present when app:popUpTo is used
79. Home Page Login Screen Register Screen Stack
80. Home Page Stack Home
81. Home Page Login Screen Stack Login Home
82. Home Page Login Screen Register Screen Stack Login Home Register
83. Home Page Login Screen Register Screen Stack Home app:popUpTo=“@id/home”
84. popBackStack()
85. popBackStack() • Use NavController.navigateUp() to navigate up the backstack
86. popBackStack() • Use NavController.navigateUp() to navigate up the backstack • NavController.popBackStack() to pop the latest destination off the back stack
87. popBackStack() • Use NavController.navigateUp() to navigate up the backstack • NavController.popBackStack() to pop the latest destination off the back stack • popBackStack() returns true when successful and false when there is no destination to pop off to
88. Custom Back Navigation
89. Custom Back Navigation • OnBackPressedDispatcher from ComponentActivity
90. Custom Back Navigation • OnBackPressedDispatcher from ComponentActivity • Add an OnBackPressedCallback callback to the dispatcher and handle back stack using handleOnBackPressed() method
91. Custom Back Navigation • OnBackPressedDispatcher from ComponentActivity • Add an OnBackPressedCallback callback to the dispatcher and handle back stack using handleOnBackPressed() method • It is lifecycle aware
92. Custom Back Navigation • OnBackPressedDispatcher from ComponentActivity • Add an OnBackPressedCallback callback to the dispatcher and handle back stack using handleOnBackPressed() method • It is lifecycle aware • Event is passed based on the order of adding callbacks
93. Custom Back Navigation • OnBackPressedDispatcher from ComponentActivity • Add an OnBackPressedCallback callback to the dispatcher and handle back stack using handleOnBackPressed() method • It is lifecycle aware • Event is passed based on the order of adding callbacks • Event is passed down if the previous callback was not enabled
94. Nested Graph
95. Nested Graph • Useful to reuse a piece of flow within the app • They encapsulate the destinations and need a start destination • Select destinations and right-click and select “Move to Nested Graph”
97. <?xml version="1.0" encoding="utf-8"?> <navigation app:startDestination=“@id/homeFragment"> ... <navigation android:id="@+id/nestedGraphId" app:startDestination="@id/loginEntryScreen"> ... </navigation> </navigation>
98. Navigation Across Multiple Modules
99. <!-- nav_graph of the app module --> <navigation ...> <fragment android:id="@+id/homeScreen"...> <action android:id="@+id/action_open_login_flow" app:destination="@id/login_flow_graph" /> </fragment> <include app:graph="@navigation/login_graph" /> </navigation> <!-- login_graph from different module --> <navigation android:id="@+id/login_flow_graph"...> ... </navigation>
100. <!-- nav_graph of the app module --> <navigation ...> <fragment android:id="@+id/homeScreen"...> <action android:id="@+id/action_open_login_flow" app:destination="@id/login_flow_graph" /> </fragment> <include app:graph="@navigation/login_graph" /> </navigation> <!-- login_graph from different module --> <navigation android:id=“@+id/login_flow_graph”...> ... </navigation>
101. <!-- nav_graph of the app module --> <navigation ...> <fragment android:id="@+id/homeScreen"...> <action android:id="@+id/action_open_login_flow" app:destination="@id/login_flow_graph" /> </fragment> <include app:graph="@navigation/login_graph" /> </navigation> <!-- login_graph from different module --> <navigation android:id="@+id/login_flow_graph"...> ... </navigation>
102. Navigation Across Dynamic Feature Modules
103. repositories { maven { url "https://ci.android.com/builds/submitted/5956592/androidx_snapshot/ latest/repository/" } ... } dependencies { implementation "androidx.navigation:navigation-dynamic-features-fragment: 2.3.0-SNAPSHOT" }
104. Using Dynamic Feature Navigator
105. Using Dynamic Feature Navigator • Replace all instance of NavHostFragment with DynamicNavHostFragment
106. Using Dynamic Feature Navigator • Replace all instance of NavHostFragment with DynamicNavHostFragment • Add app:moduleName to any destination from the dynamic feature module
107. Using Dynamic Feature Navigator • Replace all instance of NavHostFragment with DynamicNavHostFragment • Add app:moduleName to any destination from the dynamic feature module • Navigator library takes care of downloading the feature when the user navigates to that screen
108. Using Dynamic Feature Navigator • Replace all instance of NavHostFragment with DynamicNavHostFragment • Add app:moduleName to any destination from the dynamic feature module • Navigator library takes care of downloading the feature when the user navigates to that screen • The download progress fragment can be customized
109. Using Dynamic Feature Navigator • Replace all instance of NavHostFragment with DynamicNavHostFragment • Add app:moduleName to any destination from the dynamic feature module • Navigator library takes care of downloading the feature when the user navigates to that screen • The download progress fragment can be customized • Use DynamicInstallMonitor to monitor the status of download
110. Linking UI With Navigation https://developer.android.com/guide/navigation/navigation-ui
111. Toolbars • Toolbar • CollapsingToolbarLayout • ActionBar
112. Toolbars • Toolbar • CollapsingToolbarLayout • ActionBar AppBarConfiguration
113. Menu Items MenuItem.onNavDestinationSelected()
114. UI Methods • NavDrawer • BottomNavigationBar setupWithNavController()
115. Listening to Navigation Changes navController.addOnDestinationChangedListener { _, destination, _ -> when(destination.id) { //do something based on the current destination } }
116. Sharing ViewModel
117. val viewModel: MyViewModel by navGraphViewModels(R.id.nav_graph) { factory } ViewModelStoreOwner owner = controller.getViewModelStoreOwner(R.id.nav_graph); MyViewModel viewModel = new ViewModelProvider(owner, factory); Java Kotlin
118. What Could Be Improved?
119. What Could Be Improved? • ViewPager support • Passing information back when doing pop operations on stack • Deep link support for dynamic features module (in 2.3.0)
120. We’re hiring!
 www.freshworks.io/careers @FreshWorksApps