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

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.

Daniel Hartwich

September 04, 2018
Tweet

More Decks by Daniel Hartwich

Other Decks in Programming

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. Thank you! GDG September Meetup 04.09.2018 at XING - Navigation

    Architecture Component - Daniel Hartwich - @KiLLyA_ 34