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

Navigation Architecture Component | Jetpack

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 :)

Wahib Ul Haq

September 04, 2019
Tweet

More Decks by Wahib Ul Haq

Other Decks in Technology

Transcript

  1. Totally appreciate efforts of the team behind “Navigation” which is

    trying to make things easier for developers along with providing more clarity on principles
  2. The Navigation Architecture Component is designed for apps that have…

    one main activity with multiple fragment destinations
  3. Designed to enforce the “Principles of Navigation” Explicit about handling

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

    of “Up” ( navigateUp() ) and “Back” ( popBackStack() ) Visual navigation graph for easy overview
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. NavController NavController, an object that manages app navigation within a

    NavHost and is used to navigate to a destination
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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)
  20. 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)
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. Multi-Graph Navigation Nested graph: Sub-group of destinations which allow reusing

    section of app’s UI Navigating between graphs across modules is possible
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. Learnings Be vigilant and have a plan when you are

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

    refactoring/rewriting a flow inside existing codebase Gladly, there is a migration doc
  36. 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
  37. 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)
  38. 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
  39. 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)
  40. 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