The Navigation Architecture Component by Laurence de Villers

This is a deck about the new Navigation Architecture Component.

1. The Navigation Architecture Component Laurence de Villers @L_de_V
3. Challenges for navigation • Passing Arguments • Deep Links • Fragment Transactions • Testing
4. Why navigation component? • Visual editor • Animation between view • Safe arguments passings • Default arguments • Handling deep links • Automatic setup with BottomNavigationView and side NavigationView
5. Navigation component is scoped to a single Activity WHY ? - Activities are limited for animations You can have a fragment that will start another activity with another flow of navigation component.
6. Fragmentmanager No need to play with the fragmentmanager, The navigation view will do the management by itself.
7. How to start ?
8. Gradle navigationVersion = "1.0.0-alpha02"
9. Create the navigation graph New → Android resource file
10. Adding a Navigation Host
11. NavigationUp() will setup class MainActivity : AppCompatActivity() { ... override fun onSupportNavigateUp() = findNavController(R.id.my_nav_host_fragment).navigateUp() ... }
12. Create your graph By default, android studio will find all the fragment that you have in your application.
14. Starting destination Destinations Action is the route between two fragments with all the details for animations, destination and popUpTo Define the argument that this fragment will received and an default value for it.
15. Automatic setup with BottomNavigationView / NavigationView Use the same ID in your app:menu of the one in the navigation graph. class MainActivity : AppCompatActivity() { … private fun setupBottomNavigationView() { val navController = findNavController(R.id.my_nav_host_fragment) bottomNavigationView?.setupWithNavController(navController) } }
16. DrawerLayout and navigation Make ActionBar and drawers • No need of onNavigationItemSelected private fun setupNavigationMenu(navController: NavController) { NavigationUI.setupWithNavController(navigationView, navController) } private fun setupActionBar(navController: NavController) { drawerLayout = findViewById(R.id.drawer_layout) NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout) } <android.support.v4.widget.DrawerLayout > <LinearLayout> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" /> <fragment android:id="@+id/my_nav_host_fragment"/> </LinearLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_view" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer" /> </android.support.v4.widget.DrawerLayout>
17. Action v.findViewById<Button>(R.id.button)?.setOnClickListener { view -> view.findNavController().navigate(R.id.action_home_to_action1) }
18. Change pop behavior in the navigation graph!
19. Safe arguments It generates a class named [Destination Fragment Name]Args. With actions override fun onViewCreated(view: View, savedInstanceState: Bundle?) { arguments?.let { actionTextView.text = getArguments()?.getString("ARG_ACTION1"); } } v.findViewById<Button>(R.id.button)?.setOnClickListener { val navController = v.findNavController() val bundle = Bundle().also { it.putString("ARG_ACTION1","GDG is cool" ) } navController.navigate(R.id.action_home_to_action1, bundle) } Before
20. Safe arguments It generates two class : One class named [Destination Fragment Name]Args. With actions The other one class named [Current fragment name]Directions. override fun onViewCreated(view: View, savedInstanceState: Bundle?) { arguments?.let { val passedArguments = Action1Args.fromBundle(it) actionTextView.text = passedArguments.ARG_ACTION1 } } v.findViewById<Button>(R.id.button)?.setOnClickListener { val navController = v.findNavController() val action = HomeDirections.action_home_to_action1() action.setARG_ACTION1("GDG is COOL") navController.navigate(action) }
21. DeepLink Do all the logic of stack between starting point and destination.
22. Implicit Deeplink Define in the navigation_graph.xml Wildcare supported, detect argument from { }
23. Manifest Deeplink are automatically added when you specify the graph for an activity. <activity> ... <nav-graph android:value="@navigation/nav_graph"/> </activity>
24. Nested Graph Group destinations into a nested graph Separated graph into groups Move to Nested Graph > New Graph
25. What next ?
26. ALPHA !!!!!!! • A lots of small issues need to be fix Ex : Issues with toolbar arrow navigation • WILL CHANGE WITH THE COMMENTS OF APHA USER • NOT API STABLE
27. Migrate to the Navigation Architecture Component Activity A Activity B Nav Graph A Nav Graph B Link activities by adding an activity destination in the graph. To navigate to another activity use ActivityNavigator ActivityNavigator(Context context).navigate(ActivityNavigator.Destination destination, Bundle args, NavOptions navOptions)
28. Ressources See issues : https://issuetracker.google.com/issues go Navigation and give feedback Podcast : http://androidbackstage.blogspot.com/ The Episode Navigation Controller Documentation : https://developer.android.com/topic/libraries/architecture/navigation/navigation-principles Code lab : https://codelabs.developers.google.com/codelabs/android-navigation
29. THE END! Questions? Laurence de Villers @L_de_V