Save 37% off PRO during our Black Friday Sale! »

Android Architecture Navigation Component - Getting along!

Android Architecture Navigation Component - Getting along!

A presentation about the new Android Architecture Navigation component, how to use it, which best practices to follow, and how to migrate your exsiting app.

E6c588d38d6b83e77c58e9b603635c1a?s=128

Daniel Hartwich

September 04, 2018
Tweet

Transcript

  1. Navigation Architecture Component Daniel Hartwich GDG September Meetup 04.09.2018 at

    XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 1
  2. Agenda • Principles of Navigation • Implement navigation using architecture

    component + Demo • Migrating existing projects • Implement support for new destinations • Conditional navigation • Global actions / common destinations GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 2
  3. Principles of navigation GDG September Meetup 04.09.2018 at XING -

    Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 3
  4. Principles of navigation "The app should have a fixed starting

    destination" GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 4
  5. Principles of navigation "A stack is used to represent the

    "navigation state" of an app" GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 5
  6. Principles of navigation "The Up button never exits your app"

    GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 6
  7. Principles of navigation "Up and Back are equivalent within your

    app's task" GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 7
  8. Principles of navigation "Deep linking to a destination or navigating

    to the same destination should yield the same stack" GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 8
  9. Implement navigation using architecture component GDG September Meetup 04.09.2018 at

    XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 9
  10. Implement navigation using architecture component • Simplify navigation between destinations

    of your app • Set of destinations compose app's navigation graph • A destination is any place you can navigate to in your app GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 10
  11. Implement navigation using architecture component • Destinations are usually fragments

    • Activities • different navigation graphs / subgraphs • Custom destination types • Connections between different destinations are called actions GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 11
  12. Example Navigation Graph GDG September Meetup 04.09.2018 at XING -

    Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 12
  13. Demo Set up navigation component in Android Studio Android Studio

    https://developer.android.com/topic/libraries/architecture/ navigation/navigation-implementing GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 13
  14. Add the dependencies to the navigation component implementation 'android.arch.navigation:navigation-fragment:1.0.0-alpha05' implementation

    'android.arch.navigation:navigation-ui:1.0.0-alpha05' implementation 'android.arch.navigation:navigation-fragment-ktx:1.0.0-alpha05' implementation 'android.arch.navigation:navigation-ui-ktx:1.0.0-alpha05' GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 14
  15. Declare an activity as the Navigation Host activity_main.xml <?xml version="1.0"

    encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/my_nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/mobile_navigation" app:defaultNavHost="true" /> </androidx.constraintlayout.widget.ConstraintLayout> GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 15
  16. Create blank destination • In the "Design" Tab of the

    navigation resource. Click on 'Create blank destination' GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 16
  17. Create links between destinations • Create actions by dragging connections

    between two destinations GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 17
  18. Use Actions to navigate between two destinations • Create actions

    by dragging connections between two destinations GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 18
  19. Call the actions to execute navigation view.seeArticlesButton.setOnClickListener { view.findNavController().navigate(R.id.action_lastPurchasesFragment_to_articleDetailFragment) }

    or view.seeArticlesButton.setOnClickListener(Navigation.createNavigateOnClickListener(R.id.overviewFragment)) GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 19
  20. Migrating existing projects GDG September Meetup 04.09.2018 at XING -

    Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 20
  21. Migrating existing projects • NavController + navigation graph are contained

    within a single activity • When migrating, migrate one activity at a time • To migrate create a navigation graph for all destinations inside an activity GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 21
  22. Migrating existing projects • Add activity destinations in the navigation

    graph • Replace existing usages of startActivity() • Ideally, migrate activities to fragments • --> Single Activity Applications GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 22
  23. Implement support for new destinations GDG September Meetup 04.09.2018 at

    XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 23
  24. Implement support for new destinations • NavControllers rely on one

    or more Navigator objects to perform navigation. • By default only Activities and Fragments are supported • Subclass Navigator to implement navigation to your custom destination • Use getNavigatorProvider() to add your custom Navigator using addNavigator() GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 24
  25. Implement support for new destinations val customNavigator = CustomNavigator() navController.navigatorProvider

    += customNavigator • Most Navigator classes have a nested destination subclass • It's used to specify additional attributes unique to the custom destination GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 25
  26. Conditional navigation GDG September Meetup 04.09.2018 at XING - Navigation

    Architecture Component - Daniel Hartwich - @KiLLyA_ 26
  27. Conditional navigation • Destinations that can only be reached under

    certain conditions should still be an own destination • e.g. Profile screen behind a Log In mechanic • Login is presented after the user tries to access 'Profile' without log in • After login is completed we call popBackStack() to dismiss the login screen and show the profile again. GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 27
  28. Global actions / common destinations • An action that is

    accessible from multiple screens • Example: A 'cancel' button in a multi step process that should go back to the first screen • Right Click a destination and add a global action. • This action is now accessible from everywhere and can be called the same way as other actions. GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 28
  29. Navigating to a global action viewTransactionButton.setOnClickListener { view -> view.findNavController().navigate(R.id.action_global_mainFragment)

    } GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 29
  30. Additional notes • Unit Tests not possible, without further abstraction

    • Compatible with known architecture patterns • It's possible to navigate between two modules through <include> in the navigation graph GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 30
  31. Additional notes • Support for navigation drawer and overflow menu

    possible through matching IDs (fragment + menu.xml) Set up the navigation view with the NavController: val navigationView = findViewById<NavigationView>(R.id.nav_view) navigationView.setupWithNavController(navController) GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 31
  32. Sources • Official documentation • Medium article about multi module

    navigation • dhartwich1991/navigation-component • googlesamples/android-sunflower • NavController documentation GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 32
  33. Questions? GDG September Meetup 04.09.2018 at XING - Navigation Architecture

    Component - Daniel Hartwich - @KiLLyA_ 33
  34. Thank you! GDG September Meetup 04.09.2018 at XING - Navigation

    Architecture Component - Daniel Hartwich - @KiLLyA_ 34