Android JetPack: easy navigation with the new Navigation Controller

In the past few years implementing in-app navigation was always a pain. Google wants to change that and with this talk, we'll explore the new architecture component included in Android JetPack: The Navigation Controller.

Transcript

1. Android JetPack: Easy navigation with the new Navigation Controller Leonardo Pirro Android Developer @ IQUII @lpirro93
2. Who Am I? Hi, I’m Leo. Android Developer @ IQUII
3. The Navigation Problem
4. The Navigation Problem • Android Framework never had a concise and real solution to manage a common problem like Navigation • Navigation is “hard” and there are a lot things that you have to solve by your own • A lot of boilerplate code = A LOT of bugs and crash
6. Android JetPack to the rescue
9. The Navigation Architecture Component
10. What Navigation is trying to solve Fragment Transactions Testing Deep Links Passing Arguments Up and Back
11. Navigation Graph A navigation graph is a blueprint of possible navigation destinations and the actions that link them.
12. Navigation Graph
13. Define the Navigation Graph
14. Navigation Graph The navigation Graph is defined under res/navigation/navgraph_name.xml
15. Navigation Graph <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" app:startDestination="@id/signinFragment"> ... </navigation> • <navigation> is the root node of the navigation graph • <navigation> can contains one or more destination represented by <activity> or <fragment> • app:startDestination is an attribute which controls what destination is launched by default when the user first opens the app.
16. Adding a new destination
17. Navigation Graph <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" app:startDestination="@id/signinFragment"> <fragment android:id="@+id/homeFragment" android:name=“com.lpirro.navigation.HomeFragment” tools:layout="@layout/fragment_home" /> </navigation> • android:id is the ID of the fragment that you can use to destination elsewhere in xml or code • android:name is your fragment class that will be instantiated when you navigate to that destination • tools:layout defines the layout xml file that should be shown in the graph editor
18. The role of the Activity
19. The role of the Activity An entry-point to your app The activity manages any global navigation (BottomNavigation, NavigationDrawer, etc), but delegates to a NavHost for content
20. The role of the Activity The activity manages any global navigation (BottomNavigation, NavigationDrawer, etc), but delegates to a NavHost for content
21. The role of the Activity The activity manages any global navigation (BottomNavigation, NavigationDrawer, etc), but delegates to a NavHost for content
22. <fragment android:id="@+id/navHostHome" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/nav_graph" app:defaultNavHost="true" android:layout_width="match_parent" android:layout_height="0dp" /> activity_main.xml
23. activity_main.xml <fragment android:id="@+id/navHostHome" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/nav_graph" app:defaultNavHost="true" android:layout_width="match_parent" android:layout_height="0dp" /> android:name defines the fragment class of the NavHostFragment from the navigation-fragment dependency
24. activity_main.xml <fragment android:id="@+id/navHostHome" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/nav_graph" app:defaultNavHost="true" android:layout_width="match_parent" android:layout_height="0dp" /> android:navGraph associates a navigation graph to the NavHostFragment
25. activity_main.xml <fragment android:id="@+id/navHostHome" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/nav_graph" app:defaultNavHost="true" android:layout_width="match_parent" android:layout_height="0dp" /> android:defaultNavHost=“true” connects the system back button to the NavHostFragment
26. Navigate to a destination
27. Navigate to a destination buttonQuiz.setOnClickListener { view.findNavController().navigate(R.id.quizFragment) }
28. Navigate to a destination val options = NavOptions.Builder() .setEnterAnim(R.anim.slide_in_right) .setExitAnim(R.anim.slide_out_left) .setPopEnterAnim(R.anim.slide_in_left) .setPopExitAnim(R.anim.slide_out_right) .build() buttonQuiz.setOnClickListener { view.findNavController().navigate(R.id.quizFragment, null, options) }
29. navigation-ui A set of static methods to connects Navigation with Material Design UI components
30. BottomNavigation example
31. MainActivity.kt bottomNavigationView.setOnNavigationItemSelectedListener { when(it.itemId){ R.id.homeFragment -> { navController.navigate(R.id.homeFragment) true } R.id.quizFragment -> { navController.navigate(R.id.quizFragment) true } else -> false } }
32. MainActivity.kt bottomNavigationView.setOnNavigationItemSelectedListener { when(it.itemId){ R.id.homeFragment -> { navController.navigate(R.id.homeFragment) true } R.id.quizFragment -> { navController.navigate(R.id.quizFragment) true } else -> false } } BAD
33. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ...> <android.support.v7.widget.Toolbar ... /> <fragment android:id="@+id/navHostHome" android:name=“androidx.navigation.fragment.NavHostFragment" ... /> <android.support.design.widget.BottomNavigationView android:id="@+id/bottomNavigationView" app:menu="@menu/bottom_navigation_main" /> </android.support.constraint.ConstraintLayout> res/layout/activity_main.xml
34. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ...> <android.support.v7.widget.Toolbar ... /> <fragment android:id="@+id/navHostHome" android:name=“androidx.navigation.fragment.NavHostFragment" ... /> <android.support.design.widget.BottomNavigationView android:id="@+id/bottomNavigationView" app:menu="@menu/bottom_navigation_main" /> </android.support.constraint.ConstraintLayout> res/layout/activity_main.xml
35. <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout ...> <android.support.v7.widget.Toolbar ... /> <fragment android:id="@+id/navHostHome" android:name=“androidx.navigation.fragment.NavHostFragment" ... /> <android.support.design.widget.BottomNavigationView android:id="@+id/bottomNavigationView" app:menu="@menu/bottom_navigation_main" /> </android.support.constraint.ConstraintLayout> Uses the same IDs of the destinations defined in the Navigation Graph res/layout/activity_main.xml KF
36. <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" app:startDestination="@id/homeFragment"> <fragment android:id="@+id/quizFragment" android:name=“com.lpirro.navigationtalk.QuizFragment" android:label="Quiz" tools:layout="@layout/fragment_quiz" > </fragment> <fragment android:id="@+id/homeFragment" android:name=“com.lpirro.navigationtalk.HomeFragment" android:label="Home" /> <fragment android:id="@+id/filmFragment" android:name=“com.lpirro.navigationtalk.FilmFragment" android:label="Film" /> <fragment android:id="@+id/cinemaFragment" res/navigation/nav_graph.xml
37. res/menu/bottomnav_menu.xml <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/homeFragment" android:icon="@drawable/ic_nav_home" android:title="@string/nav_home" /> <item android:id="@+id/filmFragment" android:icon="@drawable/ic_nav_movies" android:title="@string/nav_movies" /> <item android:id="@+id/cinemaFragment" android:icon="@drawable/ic_nav_theatre" android:title="@string/nav_cinema" /> <item android:id="@+id/quizFragment" android:icon="@drawable/ic_nav_quiz" android:title="@string/nav_quiz"/> </menu>
38. MainActivity.kt override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setSupportActionBar(toolbar) val navController = Navigation.findNavController(this, R.id.navHost) NavigationUI.setupWithNavController(toolbar, navController) bottomNavigationView.setupWithNavController(navController) }
42. Actions
43. Create an action
44. Create an action <fragment android:id="@+id/homeFragment" android:name=“com.lpirro.app.home.HomeFragment" android:label="HomeFragment" > <action android:id="@+id/action_homeFragment_to_articleDetailFragment" app:destination="@id/articleDetailFragment" app:enterAnim="@anim/slide_in_right" app:exitAnim="@anim/slide_out_left" app:popEnterAnim=“@anim/slide_in_left" app:popExitAnim="@anim/slide_out_right" /> </fragment>
45. Navigate using an action button.setOnClickListener { it.findNavController() .navigate(R.id.action_signinFragment_to_homeFragment) }
46. Safe Args
47. Passing data via SafeArgs
48. <fragment android:id="@+id/articleDetailFragment" android:name=“com.lpirro.app.articledetail.ArticleDetailFragment” android:label="ArticleDetailFragment" > <argument android:name="article" app:argType=“com.lpirro.app.data.models.Article” /> </fragment> Passing data via SafeArgs
49. HomeFragment.kt val directions = HomeFragmentDirections .actionHomeFragmentToArticleDetailFragment(article) view?.findNavController()?.navigate(directions) ArticleDetailFragment.kt article = ArticleDetailFragmentArgs.fromBundle(arguments).article
50. Deep links
51. Explicit Notifications App widgets App shortcut Actions Implicit Web URLs Custom scheme URIs
52. Explicit deep links With NavDeepLinkBuilder Link to a specific destination in your app by its ID
53. MyFirebaseService.kt val bundle = Bundle() bundle.putParcelable("article", Article(id)) val deepLinkBuilder = NavDeepLinkBuilder(this) .setGraph(R.navigation.nav_graph) .setDestination(R.id.articleDetailFragment) .setArguments(bundle) val pendingIntent = deepLinkBuilder.createPendingIntent()
54. Implicit deep links With <deeplink> in your navigation graph
55. Implicit deep links
56. nav_graph.xml <fragment android:id="@+id/quizFragment" android:name=“com.lpirro.navigationtalk.QuizFragment” android:label="Quiz" tools:layout="@layout/fragment_quiz" > <deepLink app:uri="www.example.com"/> </fragment>
57. nav_graph.xml <fragment android:id="@+id/quizFragment" android:name=“com.lpirro.navigationtalk.QuizFragment” android:label="Quiz" tools:layout="@layout/fragment_quiz" > <deepLink app:uri="www.example.com"/> <deepLink app:uri="www.example.com/content/{myArgs}"/> </fragment>
58. nav_graph.xml <fragment android:id="@+id/quizFragment" android:name=“com.lpirro.navigationtalk.QuizFragment” android:label="Quiz" tools:layout="@layout/fragment_quiz" > <deepLink app:uri="www.example.com"/> <deepLink app:uri=“www.example.com/content/{myArgs}"/> <deepLink app:uri=“android-app://example/content/{id}”/> </fragment>
59. http://www.androiddevs.it Slack community - Android Developers Italia
60. Keep in touch! lpirro lpirro93 linkedin.com/in/lpirro medium.com/@lpirro
61. Thank You Leonardo Pirro Android Developer @ IQUII @lpirro93