Downloaded 42 times
Android Navigation Component
- 1. Android Navigation Component- build your navigation flow faster and more easily Łukasz Ciupa 9.10.2018
- 2. Neversettle intive.com 2 Principles of navigation •Starting point – visible when application is started from a launcher, it's the last screen after returning by pressing back button • Navigation state is represented by a stack (start destination at the bottom, current destination at the top of the stack) • Up button takes user to hierarchical parent destination, never exits the app • Up button function identically to the system Back button in your own app's task (when back button would not exit your app) • Deep link to a destination has got the same stack as it would be by navigating from start destination (user is able to use Back or Up buttons to navigate through destinations back to the start destination). Any existing navigation stack is removed and replaced with the deep link's navigation stack.
- 3. Neversettle intive.com 3 Visual representation ofnavigation graph
- 4. Neversettle intive.com 4 Setting up navigationin a project • Android Studio 3.2 • File > Settings (Android Studio > Preferences on Mac), select the Experimental category in the left pane, check Enable Navigation Editor • Gradle: • Create a new resource file of type Navigation in res folder: - navigation resource directory is created - nav_graph.xml is created which contains navigation graph
- 5.
- 6. Neversettle intive.com 6 Destinations Destinations: ● Activities ● Fragments Canbe created in Editor as blank destination or from existing Fragments and Activities in our project.
- 7.
- 8.
- 9.
- 10. Neversettle intive.com 10 Start destination This isthe first screen the user sees when starting application. In Graph Editor it is depicted with icon: Can be set in Graph Editor with Set Start Destination button in Attributes section or in XML with app:startDestination:
- 11. Neversettle intive.com 11 Connecting destinations Destinations areconnected using actions. Lines shown in the navigation graph are visual representations of actions.
- 12.
- 13. Neversettle intive.com 13 Hosting navigation An activityhosts navigation for an application through the implementation of NavHost interface - Navigation Architecture Component’s default is NavHostFragment. It is added to the activity’s layout.
- 14. Neversettle intive.com 14 NavHostFragment To ensure thatNavHostFragment intercepts the system Back button: To support Up button there is a need to overwrite AppCompatActivity.onSupportNavigateUp(): override fun onSupportNavigateUp() = findNavController(R.id.nav_host_fragment).navigateUp() NavHostFragment swaps in and out different fragment destinations as user navigates through the navigation graph. Navigation graph is associated by navGraph attribute:
- 15. Neversettle intive.com 15 Navigation Controller Navigation toa destination is done by NavController class. A NavController can be retrieved using one of the following static methods: ● NavHostFragment.findNavController(Fragment) ● Navigation.findNavController(Activity, @IdRes int viewId) ● Navigation.findNavController(View) ● View.findNavController() navigate() method is used to navigate to a destination. It accepts ID of a destination or of an action.
- 16. Neversettle intive.com 16 Navigation Controller Useful methods: ●NavController.navigateUp() ● NavController.popBackStack() They will be translated into appropriate framework operations. For example when we navigate() to an activity destination, the NavController calls startActivity() on our behalf. Pressing Up and Back button calls these methods respectively to pop the top destination off the stack.
- 17. Neversettle intive.com 17 Navigation Actions provide alevel of abstraction. Instead of navigating to a destination you can navigate to an action. They can point to different destinations depending on the context.
- 18. Neversettle intive.com 18 Navigation - Actions Actionsare scoped to the destination they are attached to - the same action on a different destination can have different behaviour. It means the same action can have different destination it points to and also different attributes like transition animations. Thanks to this there is a possibility to build reusable code that refers to a generic action (for example “next_action”) that is valid on multiple destinations. There are also Global Actions which point to a common destinations that can be accessed by several UI elements.
- 19. Neversettle intive.com 19 Transitions between destinations Transitionscan be easily added through XML or Attributes panel.
- 20. Neversettle intive.com 20 Transitions between destinations Transitionscan be also defined through the code and passed by options attribute in navigate() method.
- 21.
- 22. Neversettle intive.com 22 Passing data betweendestinations Every destination can define what arguments it can receive. Two possible ways of passing data between destinations: ● using Bundle ● type-safe way using safeargs Gradle plugin It can be done easily in the Destination’s Attributes panel in the Arguments section.
- 23. Neversettle intive.com 23 Passing data -adding argument Destination’s Attributes: Action’s Attributes:
- 24. Neversettle intive.com 24 Passing data -adding argument
- 25. Neversettle intive.com 25 Sending and receivingargument Create Bundle and pass it to the destination using navigate() method: In the receiving destination use getArguments() to retrieve the bundle:
- 26. Neversettle intive.com 26 Pass data ina type-safe way Gradle plugin safe args It generates object and builder classes for type-safe access arguments: ● A class for the destination where the action originates in the format of ClassNameDirections ● A class for the action used to pass the arguments ● A class for the destination where the arguments are passed in the format of DestinationClassNameArgs
- 27. Neversettle intive.com 27 Pass data ina type-safe way MainFragment.kt has got action next_action defined in XML: Generated class for it is MainFragmentDirections:
- 28. Neversettle intive.com 28 Pass data ina type-safe way Destination fragment is flow_step_one fragment which can receive step argument: Generated class for it is FlowStepFragmentArgs:
- 29. Neversettle intive.com 29 Navigating using menus Totie destinations to the menu item the same id for these elements has to be set. NavigationUI and naviation-ui-ktx kotlin extensions provide static methods that associate menu items with navigation destinations. If NavigationUI finds a menu item with the same ID as a destination it make the menu item to navigate to that destination.
- 30. Neversettle intive.com 30 Navigating using menus Havingtwo destinations: Associating them to the menu items by using the same ids:
- 31. Neversettle intive.com 31 Setting up menus Setupmenus with NavigationUI: Setting up menus with NavigationUI is necessary for menus’ UI elements to stay in sync with changes to the NavController. Setting up NavController with ActionBar:
- 32. Neversettle intive.com 32 Add a listenerto navigation events OnNavigatedListener receives a callback when the controller navigates to a new destination.
- 33. Neversettle intive.com 33 Nested navigation graph Aseries of destinations can be grouped into a sub-graph within a navigation graph. Useful for organizing and reusing sections of app’s UI like a login flow. Nested graph must have a start destination. Root graph only accesses the nested graph through its starting destination
- 34.
- 35.
- 36. Neversettle intive.com 36 <include> navigation graph Innavigation graph you can reference other graph by using <include> This is the same functionality as using a nested graph It lets use graphs from other project modules or from library projects
- 37. Neversettle intive.com 37 Deep linking toa destination Deep links allow to jump in the middle of app’s navigation. It can be from an url link or pending intent. Navigation library ensures users start on the appropriate destination with the appropriate back stack. When user uses the Back button they navigate back up the navigation stack just as though they entered app from app’s entry point. When deep link is triggered, the task back stack is cleared and replaced with the deep link destination. When nesting graphs the start destination for each <navigation> level is added to the stack.
- 38. Neversettle intive.com 38 NavDeepLinkBuilder Getting builder byNavController.createDeepLink(): Destination of the given PendingIntent will receive passed arguments Navigation provides NavDeepLinkBuilder class to construct a PendingIntent that takes the user to a specific destination.
- 39. Neversettle intive.com 39 PendingIntent from Widgetand Notification
- 40. Neversettle intive.com 40 Web link Add <deepLink>element to a destination in XML or by Graph Editor <deepLink> has a single attribute app:uri Placeholder in the form of {placeholder_name} match 1 or more characters. The value of the placeholder is available in destination in the arguments Bundle with a key of the same name.
- 41.
- 42. Neversettle intive.com 42 Deep linking configuration FromAndroid Studio 3.2 add <nav-graph> to your activity: This element is replaced with the <intent-filter> elements needed to match all of the deep links in the navigation graph.
- 43.
- 44.
- 45. Neversettle intive.com 45 Thank You ! ŁukaszCiupa lukasz.ciupa@intive.com twitter: @losogitos