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.

Transcript

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

   View 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 Slide

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

   View 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 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 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 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 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 Slide

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

   View 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 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 Slide

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

    View 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 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 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 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 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 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 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 Slide

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

    View 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 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 Slide

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

    View 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 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 Slide

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

    View 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 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 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 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 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 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 Slide

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

    View Slide

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

    View Slide