Finding your whey

An introductory talk around Navigation in Android featuring the new Navigation Architecture Component

Transcript

1. Finding your whey Quirijn Groot Bluemink @quirijngb https://speakerdeck.com/quirijngb/finding-your-whey
2. Navigation Photo by Aaron Burden on Unsplash
3. Navigation • Changing screens • Sharing data • Up vs Back handling • Deeplinking
4. Navigation Architecture Component
5. • Creating a consistent experience for users • Simplifying navigation for you • Do a lot of heavy lifting for you Navigation Architecture Component
6. Navigation Editor
10. Navigation XML <?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/main_nav" app:startDestination="@id/catalogFragment"> <fragment android:id="@+id/catalogFragment" android:name="com.quirijngb.navigationsample.CatalogFragment" android:label="Catalog" tools:layout="@layout/catalog_fragment"> <deepLink app:uri="baking.quirijngb.com"/> <action android:id="@+id/goToDetail" app:destination="@id/detailFragment"/> </fragment> <fragment android:id="@+id/profileFragment" android:name="com.quirijngb.navigationsample.ProfileFragment" android:label="Profile" tools:layout="@layout/profile_fragment"> </fragment> <fragment android:id="@+id/wishlistFragment" android:name="com.quirijngb.navigationsample.WishlistFragment" android:label="Wishlist" tools:layout="@layout/wishlist_fragment"> </fragment> <fragment android:id="@+id/detailFragment" android:name="com.quirijngb.navigationsample.ui.detail.DetailFragment" android:label="Detail" tools:layout="@layout/detail_fragment"> <argument android:name="cheese" app:argType="com.quirijngb.navigationsample.CatalogFragment.Cheese"/> <argument android:name="amount" app:argType="integer" android:defaultValue="0"/> </fragment> </navigation>
11. Activity • Container • Entrypoint • Global navigation • NavHostFragment
12. Activity <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout> <android.support.constraint.ConstraintLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" … /> <fragment android:id="@+id/my_nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/main_nav" app:defaultNavHost="true"/> </android.support.constraint.ConstraintLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_view" app:menu="@menu/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true"/> </android.support.v4.widget.DrawerLayout>
13. Activity <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout> <android.support.constraint.ConstraintLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" … /> <fragment android:id="@+id/my_nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/main_nav" app:defaultNavHost="true"/> </android.support.constraint.ConstraintLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_view" app:menu="@menu/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true"/> </android.support.v4.widget.DrawerLayout>
14. Activity <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout> <android.support.constraint.ConstraintLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" … /> <fragment android:id="@+id/my_nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/main_nav" app:defaultNavHost="true"/> </android.support.constraint.ConstraintLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_view" app:menu="@menu/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true"/> </android.support.v4.widget.DrawerLayout>
15. Activity <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout> <android.support.constraint.ConstraintLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" … /> <fragment android:id="@+id/my_nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/main_nav" app:defaultNavHost="true"/> </android.support.constraint.ConstraintLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_view" app:menu="@menu/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true"/> </android.support.v4.widget.DrawerLayout>
16. Activity <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout> <android.support.constraint.ConstraintLayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" … /> <fragment android:id="@+id/my_nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/main_nav" app:defaultNavHost="true"/> </android.support.constraint.ConstraintLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_view" app:menu="@menu/navigation" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true"/> </android.support.v4.widget.DrawerLayout>
17. Navigation UI class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setSupportActionBar(toolbar) } }
18. Navigation UI class MainActivity : AppCompatActivity() { private val navController by lazy { findNavController(R.id.my_nav_host_fragment) } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setSupportActionBar(toolbar) } }
19. Navigation UI class MainActivity : AppCompatActivity() { private val navController by lazy { findNavController(R.id.my_nav_host_fragment) } private val appBarConfiguration by lazy { AppBarConfiguration(navController.graph, drawer_layout) } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setSupportActionBar(toolbar) } }
20. Navigation UI class MainActivity : AppCompatActivity() { private val navController by lazy { findNavController(R.id.my_nav_host_fragment) } private val appBarConfiguration by lazy { AppBarConfiguration(navController.graph, drawer_layout) } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setSupportActionBar(toolbar) setupActionBarWithNavController(navController, appBarConfiguration) nav_view.setupWithNavController(navController) } }
21. Navigation UI class MainActivity : AppCompatActivity() { private val navController by lazy { findNavController(R.id.my_nav_host_fragment) } private val appBarConfiguration by lazy { AppBarConfiguration(navController.graph, drawer_layout) } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setSupportActionBar(toolbar) setupActionBarWithNavController(navController, appBarConfiguration) nav_view.setupWithNavController(navController) } override fun onSupportNavigateUp() = navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp() }
22. Manual navigation
23. Navigation XML <?xml version="1.0" encoding="utf-8"?> <navigation android:id="@+id/main_nav" app:startDestination="@id/catalogFragment"> <fragment android:id="@+id/catalogFragment" android:name="com.quirijngb.navigationsample.CatalogFragment" android:label="Catalog"> </fragment> <fragment android:id="@+id/detailFragment" android:name="com.quirijngb.navigationsample.ui.detail.DetailFragment" android:label="Detail"> </fragment> </navigation>
24. Navigation XML <?xml version="1.0" encoding="utf-8"?> <navigation android:id="@+id/main_nav" app:startDestination="@id/catalogFragment"> <fragment android:id="@+id/catalogFragment" android:name="com.quirijngb.navigationsample.CatalogFragment" android:label="Catalog"> <action android:id="@+id/goToDetail" app:destination="@id/detailFragment"/> </fragment> <fragment android:id="@+id/detailFragment" android:name="com.quirijngb.navigationsample.ui.detail.DetailFragment" android:label="Detail"> </fragment> </navigation>
25. Navigating class CatalogFragment : Fragment() { fun onShowDetails(){ findNavController().navigate(R.id.goToDetail) } }
26. Navigating class CatalogFragment : Fragment() { … holder.view.setOnClickListener { holder.view.findNavController().navigate(R.id.goToDetail) } … }
27. Navigating class CatalogFragment : Fragment() { … holder.view.setOnClickListener { val directions = CatalogFragmentDirections.goToDetail() holder.view.findNavController().navigate(directions) } … }
28. Navigation XML <?xml version="1.0" encoding="utf-8"?> <navigation android:id="@+id/main_nav" app:startDestination="@id/catalogFragment"> <fragment android:id="@+id/catalogFragment" android:name="com.quirijngb.navigationsample.CatalogFragment" android:label="Catalog"> <action android:id="@+id/goToDetail" app:destination="@id/detailFragment"/> </fragment> <fragment android:id="@+id/detailFragment" android:name="com.quirijngb.navigationsample.ui.detail.DetailFragment" android:label="Detail"> </fragment> </navigation>
29. Navigation XML <?xml version="1.0" encoding="utf-8"?> <navigation android:id="@+id/main_nav" app:startDestination="@id/catalogFragment"> <fragment android:id="@+id/catalogFragment" android:name="com.quirijngb.navigationsample.CatalogFragment" android:label="Catalog"> <action android:id="@+id/goToDetail" app:destination="@id/detailFragment"/> </fragment> <fragment android:id="@+id/detailFragment" android:name="com.quirijngb.navigationsample.ui.detail.DetailFragment" android:label="Detail"> <argument android:name="cheese" app:argType="com.quirijngb.navigationsample.CatalogFragment.Cheese"/> <argument android:name="amount" app:argType="integer" android:defaultValue="0"/> </fragment> </navigation>
30. Navigating class CatalogFragment : Fragment() { … holder.view.setOnClickListener { val directions = CatalogFragmentDirections.goToDetail() holder.view.findNavController().navigate(directions) } … }
31. Navigating class CatalogFragment : Fragment() { … holder.view.setOnClickListener { val directions = CatalogFragmentDirections.goToDetail(cheese) holder.view.findNavController().navigate(directions) } … }
32. Navigating class CatalogFragment : Fragment() { … holder.view.setOnClickListener { val directions = CatalogFragmentDirections.goToDetail(cheese) directions.setAmount(2) holder.view.findNavController().navigate(directions) } … }
33. Navigating class DetailFragment : Fragment() { override fun onStart() { super.onStart() } }
34. Navigating class DetailFragment : Fragment() { override fun onStart() { super.onStart() val args = DetailFragmentArgs.fromBundle(arguments) } }
35. Navigating class DetailFragment : Fragment() { override fun onStart() { super.onStart() val args = DetailFragmentArgs.fromBundle(arguments) val cheese: Cheese = args.cheese val amount: Int = args.amount } }
36. Navigating class DetailFragment : Fragment() { override fun onStart() { super.onStart() val args = DetailFragmentArgs.fromBundle(arguments) val cheese: Cheese = args.cheese val amount: Int = args.amount message.text = cheese.name imageView.setImageDrawable(resources.getDrawable(cheese.resourceId)) } }
37. Deeplinking <activity android:name="com.quirijngb.navigationsample.MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="http" /> <data android:scheme="https" /> <data android:host="cheesy.quirijngb.com" /> <data android:path="/" /> </intent-filter> </activity>
38. Deeplinking <fragment android:id="@+id/catalogFragment" android:name="com.quirijngb.navigationsample.CatalogFragment" android:label="Catalog" tools:layout="@layout/catalog_fragment"> <deepLink app:uri="cheesy.quirijngb.com"/> <action android:id="@+id/goToDetail" app:destination="@id/detailFragment"/> </fragment>
39. Deeplinking <fragment android:id="@+id/catalogFragment" android:name="com.quirijngb.navigationsample.CatalogFragment" android:label="Catalog" tools:layout="@layout/catalog_fragment"> <deepLink app:uri=“cheesy.quirijngb.com"/> <deepLink app:uri=“cheesy.quirijngb.com/{cheese}”/> <action android:id="@+id/goToDetail" app:destination="@id/detailFragment"/> </fragment>
40. Deeplinking <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> <nav-graph android:value="@navigation/main_nav"/> </activity> </application>
41. Deeplinking <activity android:name="com.quirijngb.navigationsample.MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="http" /> <data android:scheme="https" /> <data android:host="cheesy.quirijngb.com" /> <data android:path="/" /> </intent-filter> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="http" /> <data android:scheme="https" /> <data android:host="cheesy.quirijngb.com" /> <data android:pathPrefix="/" /> </intent-filter> </activity>
42. Explicit deeplinking val pendingIntent = NavDeepLinkBuilder(context) .setGraph(R.navigation.main_nav) .setDestination(R.id.goToDetail) .setArguments(bundle) .createPendingIntent()
43. Nested graphs • Encapsulates nested graph • Re-use • Modularisation
44. Navigation Architecture Component • Nice API • Centralises all things navigation • Single Activity app • Navigation Editor still Experimental in AS 3.2 • Still Alpha, release Soon™
45. Resources • https://d.android.com/topic/libraries/architecture/navigation/ • https://codelabs.developers.google.com/codelabs/android-navigation/ • https://www.youtube.com/watch?v=2k8x8V77CrU • https://www.youtube.com/watch?v=8GCXtCjtg40
46. Finding your whey Quirijn Groot Bluemink @quirijngb https://speakerdeck.com/quirijngb/finding-your-whey