Navigating the Navigation Component Hugo Visser @botteaap [email protected] 

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 

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” 

No content

Navigation supportFragmentManager.beginTransaction() .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN) .replace(R.id.fragment, MainFragment()) .commit() 

Navigation startActivity(MyActivity.createIntent(context, ...)) MyActivity.show(this) 

Defining navigation Navigation Graph w/ Android Studio editor Organise navigation flows in graphs New resource type: @navigation/my_navigation_graph 

No content

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 

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 

SINGLE ACTIVITY? 

Impact on your app architecture https://www.youtube.com/watch?v=2k8x8V77CrU 

Sharing is caring private val viewModel: EventViewModel by activityViewModels { viewModelFactory } 

NavHostFragment 

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

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 

Using args class MainFragment: Fragment() { private val args by navArgs() override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) doSomethingWithPersonId(args.personId) } } 

Navigation UI “Principles of Navigation” -- Do the right thing with less code React on navigation state changes → OnDestinationChangeListener Hook up existing UI to navigation 

Navigation UI: click listeners override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) view.findViewById(R.id.navigate).setOnClickListener { Navigation.createNavigateOnClickListener(MyFragmentDirections.myAction()) } } 

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); } }; } 

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

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(R.id.toolbar) .setupWithNavController(navController, appBarConfiguration) } 

Navigation UI: Toolbar & friends 

Navigation UI With AppBarConfiguration with DrawerLayout Manage drawer icon (hamburger vs back button) NavView & other menu items 

Navigation UI 

Navigation UI 

Navigation UI: BottomNavigationView “Principles of Navigation” 

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 

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. 

Further exploration https://developer.android.com/guide/navigation https://www.youtube.com/watch?v=2k8x8V77CrU 

Thanks @botteaap [email protected] speakerdeck.com/hugovisser