Designing effective navigation in Android

From principles to implementation, the new Navigation Architecture Component helps to design the interactions that allow users to navigate across, into, and back out from the different pieces of content within the app.

Renaud will explore the basics and then dive into specific use cases such as deep-linking, manipulating the back-stack or even providing safe arguments.

Transcript

1. Designing effective navigation in Android @DevFestBdM Renaud Mathieu renaud_mathieu
2. The act of moving between screens of an app to complete tasks. 
 Navigation
3. le shopping libéré
4. 1. Designing effective navigation 2. Android fundamentals 3. Navigation Architecture Component 4. Practical navigation
5. Designing effective navigation Simplify the user journey
6. Highlight the core functions Scan Payment
7. Define a screen map and your critical path
8. Define a screen map and your critical path Scan Review Receipt
9. Define a screen map and your critical path
10. Android fundamentals User navigation
11. Types of navigation Lateral navigation Forward navigation Reverse navigation
12. Lateral Navigation Component Use for # destinations Navigation drawer Top-level destinations 5+ Bottom navigation bar Top-level destinations 2-5 Tabs Any level of hierarchy 2+
13. Lateral Navigation
14. Forward Navigation Component Cards Buttons In-App Search List items …
15. Back vs Up Reverse navigation
16. Navigation is a complex task that is usually overlooked by developers.
17. Navigation is a complex task that is usually overlooked by developers. Pass data between screens Deep linking Transitions Up and back actions Navigation UI patterns Fragment transactions
18. Navigation Architecture Component
19. A framework for navigating between ‘destinations’ within an Android application. Navigation architecture component
20. Navigation component basics • Fixed start destination • Navigation state should be represented via a stack of destinations • The Up button never exits your app • Up and Back are identical within your app's task (stack) • Deep linking and navigating to a destination should yield the same stack
21. 1 2 3
22. Avoid specifying reverse navigation.
23. Recipe 1. Create a navigation graph 2. Add a NavHostFragment 3. Navigate
24. Create a navigation graph <?xml version="1.0" encoding="utf-8"?> <navigation xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/navigation_authentication" app:startDestination=“@id/splashFragment"> <fragment android:id="@+id/splashFragment" android:name="com.alephom.android.presentation.authentication.splash.SplashFragment" android:label="SplashFragment" tools:layout="@layout/fragment_splash"> <action android:id="@+id/action_splashFragment_to_loginFragment" app:destination="@id/logInFragment"/> <action android:id="@+id/action_splashFragment_to_mainActivity" app:destination="@id/mainActivity" /> </fragment> … </navigation>
25. Add a NavHostFragment <fragment android:id=“@+id/main_host_fragment” android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width=“match_parent" android:layout_height="match_parent" app:defaultNavHost="true" app:navGraph="@navigation/navigation_authentication" />
26. Navigate awesomeButton.setOnClickListener { findNavController().navigate(R.id.awesomeFragment) }
27. Practical navigation
28. Navigation is a complex task that is usually overlooked by developers. Pass data between screens Deep linking Transitions Up and back actions Navigation UI patterns Fragment transactions
29. Migrate to the Navigation Architecture Component step by step. Activity A Navigation Graph A Activity B Navigation Graph B
30. Migrate to the Navigation Architecture Component step by step. Activity A Navigation Graph A Activity B Navigation Graph B
31. Migrate to the Navigation Architecture Component step by step. Activity A Navigation Graph A Navigation Graph B
32. Pass data between destinations <fragment android:id="@+id/searchProductsFragment" android:name=“com.alephom.android.SearchProductsFragment" android:label="@string/weighted_products_toolbar_title" tools:layout="@layout/fragment_weighted_products"> <argument android:name="storeId" app:argType="string" /> </fragment>
33. Pass data between destinations apply plugin: 'androidx.navigation.safeargs.kotlin'
34. Pass data between destinations val action = ScanFragmentDirections .actionScanFragmentToSearchProductsFragment(storeId) findNavController().navigate(action) ORIGIN
35. Pass data between destinations arguments?.let { this.storeId = SearchProductsFragmentArgs.fromBundle(it).storeId } DESTINATION
36. Pass data between destinations private val fragmentArgs by navArgs<SearchProductsFragmentArgs>() // later in code, access properties from args storeId = fragmentArgs.storeId DESTINATION
37. Pass data between destinations <argument android:name="validatedCartModel" android:defaultValue="@null" app:argType="com.alephom.android.models.ValidatedCartModel" app:nullable="true" />
38. Conditional navigation
39. Conditional navigation popBackStack() popBackStack() popBackStack()
40. Listen for navigation events. findNavController(R.id.hostFragment).addOnDestinationChangedListener { _, destination, _ -> KeyboardUtils.hideSoftKeyboard(this, window.decorView) when (destination.id) { R.id.profileFragment, R.id.purchasesFragment, R.id.homeFragment -> showBottomNavigation(true) else -> showBottomNavigation(false) } }
41. Navigation is a complex task that is usually overlooked by developers. Pass data between screens Deep linking Transitions Up and back actions Navigation UI patterns Fragment transactions
42. Keep it simple Pass data between screens Deep linking Transitions Up and back actions Navigation UI patterns Fragment transactions
44. Intents override fun onActivityResult( requestCode: Int, resultCode: Int, data: Intent? ) { super.onActivityResult(requestCode, resultCode, data) if (requestCode == REQUEST_CODE && resultCode == RESULT_OK) { // DO SOMETHING } } … startActivityForResult(intent, REQUEST_CODE)
45. FragmentTransaction childFragmentManager().beginTransaction() .hide(FragmentA) .show(FragmentB) .addToBackStack(FRAGMENT_A_TAG) .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN) .commit()
46. Support library
47. Binding to UI component