Navigating the Navigation Component

Presentation for GDG Dutch Android User Group

Transcript

1. Navigating the Navigation Component Hugo Visser @botteaap hugo@littlerobots.nl
2. Navigation as a concept, declarative at the code level. “Principles of Navigation” and Navigation UI that implements this Decoupling of navigation from Activities and Fragments with NavController What the Navigation Component provides
3. Why would you need this Decouple navigation relations between destinations from code Modularise features including navigation to and from those features Reduce code to implement “Principles of Navigation”
5. Navigation supportFragmentManager.beginTransaction() .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN) .replace(R.id.fragment, MainFragment()) .commit()
6. Navigation startActivity(MyActivity.createIntent(context, ...)) MyActivity.show(this)
7. Defining navigation Navigation Graph w/ Android Studio editor Organise navigation flows in graphs New resource type: @navigation/my_navigation_graph
9. Navigation Graph Define Destinations w/ their ids Every graph has a start destination Define actions to navigate between destinations Specify transitions and backstack behaviour on actions Deeplinks
10. Implementing Navigation You can implement Navigator and Destination for you own purposes Default implementation: Fragments, many improvements made in androidx. ActivityDestination is also provided Single activity to host NavHostFragment
11. SINGLE ACTIVITY?
12. Impact on your app architecture https://www.youtube.com/watch?v=2k8x8V77CrU
13. Sharing is caring private val viewModel: EventViewModel by activityViewModels { viewModelFactory }
14. NavHostFragment <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <fragment android:id="@+id/nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="match_parent" android:layout_height="match_parent" app:defaultNavHost="true" app:navGraph="@navigation/nav_graph" /> </FrameLayout>
15. Navigate // From your Fragment you can Navigate (not from your ViewModel!) // Navigate by id, findNavController is an extension provided by // navigation-fragment-ktx findNavController().navigate(R.id.event_list) // Go back findNavController().popBackStack() // Navigate with Directions findNavController().navigate(AttendeeListFragmentDirections.actionEventList())
16. SafeArgs Gradle plugin for type safe passing of arguments Generates Kotlin or Java code Generates Direction classes, representing (global) actions Prefer Directions over using ids for navigation
17. Using args class MainFragment: Fragment() { private val args by navArgs<MainFragmentArgs>() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) doSomethingWithPersonId(args.personId) } }
18. Navigation UI “Principles of Navigation” -- Do the right thing with less code React on navigation state changes → OnDestinationChangeListener Hook up existing UI to navigation
19. Navigation UI: click listeners override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) view.findViewById<Button>(R.id.navigate).setOnClickListener { Navigation.createNavigateOnClickListener(MyFragmentDirections.myAction()) } }
20. Navigation UI @NonNull public static View.OnClickListener createNavigateOnClickListener( @NonNull final NavDirections directions) { return new View.OnClickListener() { @Override public void onClick(View view) { findNavController(view).navigate(directions); } }; }
21. Navigation UI: Toolbar & friends override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) // Use the built-in ActionBar without a drawer setupActionBarWithNavController(findNavController(R.id.nav_host_fragment), null) }
22. Navigation UI: Toolbar & friends override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val navController = findNavController(R.id.nav_host_fragment) // Configure the top level destinations (e.g. no back button) val appBarConfiguration = AppBarConfiguration(setOf(R.id.main_fragment, R.id.second_fragment)) findViewById<Toolbar>(R.id.toolbar) .setupWithNavController(navController, appBarConfiguration) }
23. Navigation UI: Toolbar & friends <fragment android:id="@+id/second_fragment" android:name="nl.littlerobots.navdemo.SecondFragment" android:label="Edit {eventName}" > <argument android:name="eventName" app:argType="string"/> </fragment>
24. Navigation UI With AppBarConfiguration with DrawerLayout Manage drawer icon (hamburger vs back button) NavView & other menu items
25. Navigation UI
26. Navigation UI
27. Navigation UI: BottomNavigationView “Principles of Navigation”
28. Navigation UI: BottomNavigationView Default implementation is “Android way” on material.io https://github.com/googlesamples/android-architecture-components/tree/master/NavigationAdvancedSam ple Requires support for multiple backstacks in Fragments
29. Current limitations (?) Navigate to DialogFragments Overlays → navigation always does a “replace” Return a result like startActivityForResult → modify ViewModel state Nothing specific provided for “master-detail”; nesting NavHostFragments works.
30. Further exploration https://developer.android.com/guide/navigation https://www.youtube.com/watch?v=2k8x8V77CrU
31. Thanks @botteaap hugo@littlerobots.nl speakerdeck.com/hugovisser