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