Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Navigation Architecture Component | Jetpack

08b2ae4d9b56474f6cfbe79fae6688a2?s=47 Wahib Ul Haq
September 04, 2019

Navigation Architecture Component | Jetpack

This presentation was given at GDG Munich Android meetup (https://www.meetup.com/GDG-Munich-Android/events/264156274/) which was focused on "Jetpack". I was lucky to get a chance to explore and use the "Navigation" component in an existing codebase to rewrite a flow.

This talk was basically an intro of core features, main building blocks, some advance use-cases, and my overall impression. Hopefully, it was motivating enough for the audience to give it a try and get a good kick-start already :)

08b2ae4d9b56474f6cfbe79fae6688a2?s=128

Wahib Ul Haq

September 04, 2019
Tweet

More Decks by Wahib Ul Haq

Other Decks in Technology

Transcript

  1. NAVIGATION ARCHITECTURE COMPONENT Wahib-Ul-Haq @wahibhaq @DevRelMunich GDG Munich Android 04.09.2019

  2. None
  3. None
  4. None
  5. None
  6. Totally appreciate efforts of the team behind “Navigation” which is

    trying to make things easier for developers along with providing more clarity on principles
  7. Announced in Google I/O 2018 Reached stable version in March

    2019
  8. The Navigation Architecture Component is designed for apps that have…

  9. The Navigation Architecture Component is designed for apps that have…

    one main activity with multiple fragment destinations
  10. In an app with multiple activity destinations, each additional activity

    hosts its own navigation graph
  11. MOTIVATION

  12. Designed to enforce the “Principles of Navigation”

  13. Designed to enforce the “Principles of Navigation” Explicit about handling

    of “Up” ( navigateUp() ) and “Back” ( popBackStack() )
  14. Designed to enforce the “Principles of Navigation” Explicit about handling

    of “Up” ( navigateUp() ) and “Back” ( popBackStack() ) Visual navigation graph for easy overview
  15. Designed to enforce the “Principles of Navigation” Explicit about handling

    of “Up” ( navigateUp() ) and “Back” ( popBackStack() ) Visual navigation graph for easy overview Allows you to skip implementing FragmentTransactions
  16. Designed to enforce the “Principles of Navigation” Explicit about handling

    of “Up” ( navigateUp() ) and “Back” ( popBackStack() ) Visual navigation graph for easy overview Allows you to skip implementing FragmentTransactions Type-safety for arguments when using SafeArgs
  17. Designed to enforce the “Principles of Navigation” Explicit about handling

    of “Up” ( navigateUp() ) and “Back” ( popBackStack() ) Visual navigation graph for easy overview Allows you to skip implementing FragmentTransactions Type-safety for arguments when using SafeArgs Conditional navigation is possible
  18. Designed to enforce the “Principles of Navigation” Explicit about handling

    of “Up” ( navigateUp() ) and “Back” ( popBackStack() ) Visual navigation graph for easy overview Allows you to skip implementing FragmentTransactions Type-safety for arguments when using SafeArgs Conditional navigation is possible Easy handling of deep links with synthetic back stack for “Up” navigation
  19. Designed to enforce the “Principles of Navigation” Explicit about handling

    of “Up” ( navigateUp() ) and “Back” ( popBackStack() ) Visual navigation graph for easy overview Allows you to skip implementing FragmentTransactions Type-safety for arguments when using SafeArgs Conditional navigation is possible Easy handling of deep links with synthetic back stack for “Up” navigation Works with Navigation UI Patterns like NavigationView and BottomNavigationView
  20. Designed to enforce the “Principles of Navigation” Explicit about handling

    of “Up” ( navigateUp() ) and “Back” ( popBackStack() ) Visual navigation graph for easy overview Allows you to skip implementing FragmentTransactions Type-safety for arguments when using SafeArgs Conditional navigation is possible Easy handling of deep links with synthetic back stack for “Up” navigation Works with Navigation UI Patterns like NavigationView and BottomNavigationView Testing
  21. BUILDING BLOCKS

  22. NavHostFragment NavHost is an empty container where destinations are swapped

    in and out as a user navigates through your app NavHostFragment is the default NavHost implementation and handles swapping fragment destinations
  23. None
  24. None
  25. None
  26. None
  27. Graph NavGraph is a collection of destinations and actions It

    can be defined as xml file or created programmatically You can have multiple navigation graphs in your application and they can be nested
  28. None
  29. https://developer.android.com/guide/navigation/

  30. https://developer.android.com/guide/navigation/

  31. Destinations Individual screens are referred as destinations which could be

    Fragments or Activities StartDestination is the first screen in the flow or graph Activity destinations are considered terminal destinations
  32. NavController NavController, an object that manages app navigation within a

    NavHost and is used to navigate to a destination
  33. NavController NavController, an object that manages app navigation within a

    NavHost and is used to navigate to a destination When you call navigate(), it handles the rest
  34. NavController NavController, an object that manages app navigation within a

    NavHost and is used to navigate to a destination When you call navigate(), it handles the rest Various static methods to retrieve NavController
  35. None
  36. NavController NavController, an object that manages app navigation within a

    NavHost and is used to navigate to a destination When you call navigate(), it handles the rest Various static methods to retrieve NavController Each NavHost has its own corresponding NavController
  37. NavController NavController, an object that manages app navigation within a

    NavHost and is used to navigate to a destination When you call navigate(), it handles the rest Various static methods to retrieve NavController Each NavHost has its own corresponding NavController Prefer navigating via Actions over Destination Ids
  38. https://developer.android.com/guide/navigation/

  39. Actions Configuration for each Action includes destination, default arguments and

    navigation options With Safe-Args, *FragmentDirections class and *FragmentArgs class is generated Safe-Args require plugin "androidx.navigation.safeargs.kotlin" Global action enables reusable navigation and is defined at root level of graph (E.g navigating to an external activity)
  40. None
  41. None
  42. None
  43. None
  44. None
  45. Deep Links Deep links can be created programmatically (only explicit

    ones*)
  46. None
  47. Deep Links Deep links can be created programmatically (only explicit

    ones*) Add <nav-graph> reference in the Manifest under the host activity for Implicit ones (and external access)
  48. None
  49. Deep Links Deep links can be created programmatically (only explicit

    ones*) Add <nav-graph> reference in the Manifest under the host activity for Implicit ones (and external access) URIs without a scheme are assumed as http and https
  50. Deep Links Deep links can be created programmatically (only explicit

    ones*) Add <nav-graph> reference in the Manifest under the host activity for Implicit ones (and external access) URIs without a scheme are assumed as http and https Scheme needs to be explicitly defined
  51. None
  52. Deep Links Deep links can be created programmatically (only explicit

    ones*) Add <nav-graph> reference in the Manifest under the host activity for Implicit ones (and external access) URIs without a scheme are assumed as http and https Scheme needs to be explicitly defined Possible to define multiple implicit ones for single destination
  53. None
  54. Deep Links Deep links can be created programmatically (only explicit

    ones*) Add <nav-graph> reference in the Manifest under the host activity for Implicit ones (and external access) URIs without a scheme are assumed as http and https Scheme needs to be explicitly defined Possible to define multiple implicit ones for single destination Navigate programmatically using an implicit deep link
  55. None
  56. Note: When navigating using URI, the back stack is not

    reset.
  57. FUN STUFF

  58. None
  59. Conditional Navigation https://github.com/gogeta95/NavigationSplashScreen

  60. None
  61. https://developer.android.com/guide/navigation/navigation-conditional

  62. None
  63. Deep Links To handle the deep linking we need to

    add intent filter to our AndroidManifest.xml Deep links can be created programmatically Doc says that adding <nav-graph> should be enough but I still needed to add intent filters explicitly in the Manifest
  64. Deep Links

  65. https://medium.com/swlh/using-the-navigation-component-in-a-modular-world-e7578825962

  66. Multi-Graph Navigation

  67. Multi-Graph Navigation Nested graph: Sub-group of destinations which allow reusing

    section of app’s UI
  68. Multi-Graph Navigation Nested graph: Sub-group of destinations which allow reusing

    section of app’s UI Navigating between graphs across modules is possible
  69. Multi-Graph Navigation Nested graph: Sub-group of destinations which allow reusing

    section of app’s UI Navigating between graphs across modules is possible To navigate from Feature One to Feature Two graph, we can navigate using the deep link URI
  70. Multi-Graph Navigation Nested graph: Sub-group of destinations which allow reusing

    section of app’s UI Navigating between graphs across modules is possible To navigate from Feature One to Feature Two graph, we can navigate using the deep link URI Main app graph can include the feature module's graphs using <include> tag
  71. https://medium.com/swlh/using-the-navigation-component-in-a-modular-world-e7578825962

  72. Multi-Graph Multi-Module Navigation (#1) Each module has its own graph

    with all the Fragments but without Activity Single Activity defined in app module Each module refers to a bottom nav item
  73. None
  74. Multi-Graph Multi-Module Navigation (#2) https://github.com/PhilippeBoisney/ArchApp

  75. Multi-Graph Multi-Module Navigation (#2) Graphs are defined in a separate

    navigation module App module depends on navigation and includes Host Activity Each module contains Fragments and other necessary classes
  76. Working with Bottom Nav and Multi-module Simpler Implementation: https://github.com/kuuuurt/rick-and-morty-app Advance

    Implementation: https://github.com/googlesamples/android-architecture-components/tree/master/NavigationAdva ncedSample
  77. Will it work if destinations are Custom Views?

  78. Will it work if destinations are Custom Views? Yes, it

    is possible to add new Destination Type To add a custom destination, you have to implement the Navigator interface https://developer.android.com/guide/navigation/navigation-add-new
  79. https://www.raywenderlich.com/6014-the-navigation-architecture-component-tutorial-getting-started#toc-anchor-016

  80. Will it work if destinations are Custom Views? Yes, it

    is possible to add new Destination Type To add a custom destination, you have to implement the Navigator interface You pass it to the NavigationController when initializing the navigation graph https://developer.android.com/guide/navigation/navigation-add-new
  81. https://www.raywenderlich.com/6014-the-navigation-architecture-component-tutorial-getting-started#toc-anchor-016

  82. CURRENT CHALLENGE

  83. None
  84. How to make Deep Links work with dynamic scheme

  85. How to make Deep Links work with dynamic scheme

  86. Learnings Be vigilant and have a plan when you are

    refactoring/rewriting a flow inside existing codebase
  87. Learnings Be vigilant and have a plan when you are

    refactoring/rewriting a flow inside existing codebase Gladly, there is a migration doc
  88. Learnings Be vigilant and have a plan when you are

    refactoring/rewriting a flow inside existing codebase Gladly, there is a migration doc Codelabs implementation might be outdated
  89. Learnings Be vigilant and have a plan when you are

    refactoring/rewriting a flow inside existing codebase Gladly, there is a migration doc Codelabs implementation might be outdated Expect implementing transient solution if unable to use alpha or release candidate (e.g custom back navigation via OnBackPressedCallback)
  90. Learnings Be vigilant and have a plan when you are

    refactoring/rewriting a flow inside existing codebase Gladly, there is a migration doc Codelabs implementation might be outdated Expect implementing transient solution if unable to use alpha or release candidate (e.g custom back navigation via OnBackPressedCallback) Integrating Deep link in existing implementation could be a challenge, might need nested deep links
  91. Learnings Be vigilant and have a plan when you are

    refactoring/rewriting a flow inside existing codebase Gladly, there is a migration doc Codelabs implementation might be outdated Expect implementing transient solution if unable to use alpha or release candidate (e.g custom back navigation via OnBackPressedCallback) Integrating Deep link in existing implementation could be a challenge, might need nested deep links Dynamic Feature Navigation is yet to be included in the library (work-in-progress)
  92. Learnings Be vigilant and have a plan when you are

    refactoring/rewriting a flow inside existing codebase Gladly, there is a migration doc Codelabs implementation might be outdated Expect implementing transient solution if unable to use alpha or release candidate (e.g custom back navigation via OnBackPressedCallback) Integrating Deep link in existing implementation could be a challenge, might need nested deep links Dynamic Feature Navigation is yet to be included in the library (work-in-progress) Synthetic back navigation might not work out of the box with deep link
  93. None
  94. Thanks for listening! @wahibhaq @DevRelMunich