Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Navigating the Navigation Component

Navigating the Navigation Component

Presentation for GDG Dutch Android User Group

Hugo Visser

March 26, 2019
Tweet

More Decks by Hugo Visser

Other Decks in Technology

Transcript

  1. 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
  2. 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”
  3. Defining navigation Navigation Graph w/ Android Studio editor Organise navigation

    flows in graphs New resource type: @navigation/my_navigation_graph
  4. 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
  5. 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
  6. 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>
  7. 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())
  8. 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
  9. Using args class MainFragment: Fragment() { private val args by

    navArgs<MainFragmentArgs>() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) doSomethingWithPersonId(args.personId) } }
  10. Navigation UI “Principles of Navigation” -- Do the right thing

    with less code React on navigation state changes → OnDestinationChangeListener Hook up existing UI to navigation
  11. 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()) } }
  12. 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); } }; }
  13. 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) }
  14. 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) }
  15. 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
  16. 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.