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

    View full-size slide

  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

    View full-size slide

  3. Principles of navigation
    GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 3

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  9. Implement navigation using architecture component
    GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 9

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  12. Example Navigation Graph
    GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 12

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  15. Declare an activity as the Navigation Host
    activity_main.xml

    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">
    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"
    />

    GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 15

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  20. Migrating existing projects
    GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 20

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  23. Implement support for new destinations
    GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 23

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  26. Conditional navigation
    GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 26

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  30. Additional notes
    • Unit Tests not possible, without further abstraction
    • Compatible with known architecture patterns
    • It's possible to navigate between two modules through
    in the navigation graph
    GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 30

    View full-size slide

  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(R.id.nav_view)
    navigationView.setupWithNavController(navController)
    GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 31

    View full-size slide

  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

    View full-size slide

  33. Questions?
    GDG September Meetup 04.09.2018 at XING - Navigation Architecture Component - Daniel Hartwich - @KiLLyA_ 33

    View full-size slide

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

    View full-size slide