The Navigation Architecture Component

85b0d08ca3a40c51cd342dd14ad6edab?s=47 Laurence de Villers
June 20, 2018

The Navigation Architecture Component

This is a deck about the new Navigation Architecture Component.


Laurence de Villers

June 20, 2018


  1. The Navigation Architecture Component Laurence de Villers @L_de_V

  2. None
  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( ... }
  12. Create your graph By default, android studio will find all

    the fragment that you have in your application.
  13. None
  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( 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( NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout) } < > <LinearLayout> < android:id="@+id/toolbar" /> <fragment android:id="@+id/my_nav_host_fragment"/> </LinearLayout> < android:id="@+id/nav_view" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer" /> </>
  17. Action v.findViewById<Button>( { view -> view.findNavController().navigate( }

  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>( { val navController = v.findNavController() val bundle = Bundle().also { it.putString("ARG_ACTION1","GDG is cool" ) } navController.navigate(, 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>( { 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 : go Navigation and give feedback

    Podcast : The Episode Navigation Controller Documentation : Code lab :
  29. THE END! Questions? Laurence de Villers @L_de_V