Android Navigation Components

Building on the Navigation components Code Lab, this talk is intended to give insights into working with the new Navigation components. It shows how to work with the UI editor as well as the XML structure. It also gives some help in how to migrate an existing codebase to Navigation components and how to deal with some issues you may run into when trying this out.

Transcript

1. NAVIGATION @petertornhult
2. PETER TÖRNHULT @petertornhult medium.com/@peter.tornhult
3. 1. Add gradle dependencies + safe args 2. Create a navigation graph 3. Add NavHostFragment to an Activity 4. Add destinations + actions to the nav graph 5. Navigate to destination NAVIGATION BASICS https://developer.android.com/guide/navigation/navigation-getting-started
4. <LinearLayout .../> <androidx.appcompat.widget.Toolbar .../> <fragment android:id="@+id/my_nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/mobile_navigation" app:defaultNavHost="true" .../> <com.google.android.material.bottomnavigation.BottomNavigationView .../> </LinearLayout> Main Activity
6. NAV GRAPH LIVE DEMO
7. <fragment android:id="@+id/flow_step_one_dest" android:name="com.example.android.codelabs.navigation.FlowStepFragment" tools:layout="@layout/flow_step_one_fragment"> <argument android:name="flowStepNumber" app:argType="integer" android:defaultValue="1"/> SAFE ARGUMENTS
8. // Old unsafe args val flowStepNumber = arguments?.getInt("flowStepNumber") // New safe args val safeArgs: FlowStepFragmentArgs by navArgs() val flowStepNumberSafe = safeArgs.flowStepNumber SAFE ARGUMENTS
9. view.findViewById<Button>(R.id.navigate_destination_button)?.setOnClickListener { findNavController().navigate(R.id.flow_step_one_dest, null, options) } view.findViewById<Button>(R.id.navigate_action_button)?.setOnClickListener( Navigation.createNavigateOnClickListener(R.id.next_action, null) ) view.findViewById<Button>(R.id.navigate_action_button2)?.setOnClickListener { val action = HomeFragmentDirections.nextAction() findNavController().navigate(action) } NAVIGATE TO DESTINATION
10. NAVIGATE BACK
11. 1. navigateUp == Home NAVIGATE BACK
12. 1. navigateUp == Home 2. popBackStack == Back NAVIGATE BACK
13. 1. navigateUp == Home 2. popBackStack == Back 3. navigate + popTo / inclusive action NAVIGATE BACK
14. SOME HISTORY
15. SOME HISTORY Activity based navigation
16. SOME HISTORY Activity based navigation Fragments (Android 3.0, API 11)
17. SOME HISTORY Activity based navigation Fragments (Android 3.0, API 11) Navigation 1.x -> 2.x
18. MIGRATING TO NAVIGATION
19. MIGRATING TO NAVIGATION Java -> Kotlin
20. MIGRATING TO NAVIGATION Java -> Kotlin Activity -> Fragment
21. MIGRATING TO NAVIGATION Java -> Kotlin Activity -> Fragment Architecture Components
22. MIGRATION Activities -> Fragments
23. 1. Add a root activity with a container
24. 1. Add a root activity with a container 2. Set your manifest to start with the root activity
25. 1. Add a root activity with a container 2. Set your manifest to start with the root activity 3. Duplicate your 1st Activity class as a Fragment
26. 1. Add a root activity with a container 2. Set your manifest to start with the root activity 3. Duplicate your 1st Activity class as a Fragment 4. setContentView -> onCreateView
27. 1. Add a root activity with a container 2. Set your manifest to start with the root activity 3. Duplicate your 1st Activity class as a Fragment 4. setContentView -> onCreateView 5. View setup in onCreate -> onViewCreated
28. 1. Add a root activity with a container 2. Set your manifest to start with the root activity 3. Duplicate your 1st Activity class as a Fragment 4. setContentView -> onCreateView 5. View setup in onCreate -> onViewCreated 6. Fix other issues (usually activity/context refs)
29. 1. Add a root activity with a container 2. Set your manifest to start with the root activity 3. Duplicate your 1st Activity class as a Fragment 4. setContentView -> onCreateView 5. View setup in onCreate -> onViewCreated 6. Fix other issues (usually activity/context refs) 7. In root activity, load the fragment into the container
30. 1. Add a root activity with a container 2. Set your manifest to start with the root activity 3. Duplicate your 1st Activity class as a Fragment 4. setContentView -> onCreateView 5. View setup in onCreate -> onViewCreated 6. Fix other issues (usually activity/context refs) 7. In root activity, load the fragment into the container 8. Cleanup: remove old activity + Manifest ref
31. MIGRATION PROBLEMS
32. MIGRATION PROBLEMS Intent params -> Arguments -> Safe args
33. MIGRATION PROBLEMS Intent params -> Arguments -> Safe args Activity context -> requireActivity()
34. MIGRATION PROBLEMS Intent params -> Arguments -> Safe args Activity context -> requireActivity() Context -> requireContext()
35. MIGRATION PROBLEMS Intent params -> Arguments -> Safe args Activity context -> requireActivity() Context -> requireContext() startActivityForResult
36. startActivityForResult options
37. startActivityForResult options Use broadcasts
38. startActivityForResult options Use broadcasts Set data on activity
39. startActivityForResult options Use broadcasts Set data on activity setTargetFragment / getTargetFragment
40. startActivityForResult options Use broadcasts Set data on activity setTargetFragment / getTargetFragment Set data on parentFragment (listener callbacks)
41. class ShareGameDialog : DialogFragment() { private lateinit var listener: ShareGameDialogListener internal interface ShareGameDialogListener { fun shareScoreAsImage (game: Game) fun shareScoreOnline (game: Game) } override fun onAttach(context: Context) { super.onAttach(context) listener = activity as ShareGameDialogListener } ... shareOnline.setOnClickListener { dismiss() listener.shareScoreOnline(game) }
42. class ShareGameDialog : DialogFragment() { private lateinit var listener: ShareGameDialogListener internal interface ShareGameDialogListener { fun shareScoreAsImage (game: Game) fun shareScoreOnline (game: Game) } override fun onAttach(context: Context) { super.onAttach(context) listener = parentFragment as ShareGameDialogListener } ... shareOnline.setOnClickListener { dismiss() listener.shareScoreOnline(game) }
43. startActivityForResult options Use broadcasts Set data on activity setTargetFragment / getTargetFragment Set data on parentFragment (listener callbacks) Shared prefs, local storage or DB
44. startActivityForResult options Use broadcasts Set data on activity setTargetFragment / getTargetFragment Set data on parentFragment (listener callbacks) Shared prefs, local storage or DB ViewModel
45. DEEP LINKS
46. val args = Bundle() args.putString("myarg", "From Widget"); val pendingIntent = NavDeepLinkBuilder(context) .setGraph(R.navigation.mobile_navigation) .setDestination(R.id.deeplink_dest) .setArguments(args) .createPendingIntent() remoteViews.setOnClickPendingIntent(R.id.deep_link_button, pendingIntent) Deep link destination (Widget)
47. <fragment android:id="@+id/deeplink_dest" android:name="com.example.android.codelabs.navigation.DeepLinkFragment" android:label="@string/deeplink" tools:layout="@layout/deeplink_fragment"> <argument android:name="myarg" android:defaultValue="Android!"/> <deepLink app:uri="www.example.com/{myarg}" /> </fragment> Deep link destination (URL) <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> <nav-graph android:value="@navigation/mobile_navigation" /> </activity>
48. NavDrawer + BottomNavigationView
49. QUESTIONS ? @petertornhult
50. REFERENCES https://codelabs.developers.google.com/codelabs/android-navigation https://developer.android.com/guide/navigation/navigation-getting-started https://github.com/android/architecture-components-samples @petertornhult
51. THANK YOU PETER TÖRNHULT @petertornhult medium.com/@peter.tornhult