Recommended
More Related Content
What's hot
What's hot (20)
Similar to A Single activity app with Jetpack's Navigation Component
Similar to A Single activity app with Jetpack's Navigation Component (20)
A Single activity app with Jetpack's Navigation Component
- 1. A Single Activity App with Jetpack’s Navigation Component By Boonya Kitpitak
- 2. There is a problem in Activity transition?
- 5. How to share data between Activities?
- 6. Application Scope Activity 1 Fragment Activity 2 Fragment Activity 3 Fragment Service Content Provider Singleton Data holder
- 7. Application Scope Activity Fragment Fragment Fragment SharedViewModelSharedViewModel Service Content Provider
- 8. It’s time to try Single Activity… How?
- 10. Outline ➔ 3 Essential Navigation Component Concepts ➔ Features of Android Jetpack’s Navigation Component ➔ Additional Note ➔ Conclusion ➔ Q/A
- 11. Pokemon Info App
- 13. 3 Essential Concepts of Navigation Component
- 14. 1. Navigation Graph A navigation graph is a new type resource file that contains all of your destinations and actions. The graph represents all of your app's navigation paths.
- 15. Location
- 19. Animation
- 20. Argument
- 21. Pop Behavior
- 22. Launch Options
- 23. XML Version
- 24. 2. NavHostFragment An empty container where destinations are swapped in and out as a user navigates through your app.
- 25. <androidx.drawerlayout.widget.DrawerLayout …> <androidx.appcompat.widget.LinearLayoutCompat …> <androidx.appcompat.widget.Toolbar …/> <fragment android:id="@+id/mainHostFragment" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="match_parent" android:layout_height="match_parent" app:defaultNavHost="true" app:navGraph="@navigation/main_navigation" /> </androidx.appcompat.widget.LinearLayoutCompat> <com.google.android.material.navigation.NavigationView …/> </androidx.drawerlayout.widget.DrawerLayout>
- 27. 3. NavController An object that manages app navigation within a NavHost. Each NavHost has its own corresponding NavController. NavController can be retrieved by Fragment, Activity, or View
- 30. Navigate Direction val direction = BerryListFragmentDirections .actionBerryListFragmentToBerryDetailFragment() navController.navigate(direction)
- 32. 1. Passing data with Safe Args Gradle Plugin Plugin that generates simple object and builder classes for type- safe access to arguments specified for destinations and actions.
- 33. fun newInstance( obj: Object1? = null, id: Int, minimumPrice: Int? = null, promotionId: Int? = null, selectionId: Int? = null, itemPosition: Int? = null ): SomeFragment { val fragment = PizzaOptionFragment() fragment.arguments = Bundle().apply { putParcelable(Constants.Intent.Obj1, obj) putInt(Constants.Intent.ID, id) minimumPromotionPrice?.let { putInt(Constants.Intent.Promotion.MINIMUM_PRICE, it)} promotionId?.let { putInt(Constants.Intent.Promotion.PROMOTION_ID, it) } selectionId?.let { putInt(Constants.Intent.Promotion.SELECTION_ID, it) } itemPosition?.let { putInt(Constants.Intent.Promotion.ITEM_POSITION, it) } } return fragment }
- 34. BerryFragment to BerryDetailFragment url Argument can be either optional or mandatory
- 35. Passing Data val direction = BerryListFragmentDirections .actionBerryListFragmentToBerryDetailFragment(item.url) navController.navigate(direction)
- 36. Getting Data val args: BerryDetailFragmentArgs = arguments?.let{ BerryDetailFragmentArgs.fromBundle(it) } val berryUrl: String = args.url
- 38. Getting Data val berryUrl: String = args.url
- 39. ➔ 2. Navigation UI Libs Help managing navigation with the top app bar, the navigation drawer, and bottom navigation.
- 41. //navigation implementation "androidx.navigation:navigation-runtime-ktx:2.1.0-alpha05" implementation ‘androidx.navigation:navigation-fragment-ktx:2.1.0-alpha05' implementation 'androidx.navigation:navigation-ui-ktx:2.1.0-alpha05'
- 42. XML LAYOUT
- 46. Menu
- 49. Navigation Graph
- 50. <navigation …app:startDestination=“@id/pokemonListFragment”> <fragment android:id=“@+id/berryListFragment" …/> <fragment android:id=“@+id/pokemonListFragment” …/> <dialog android:id=“@+id/pokemonDetailBottomSheet” …/> <fragment android:id=“@+id/berryDetailFragment” …/> </navigation>
- 51. <fragment android:id=“@+id/berryListFragment" …/> <fragment android:id=“@+id/pokemonListFragment” …/>
- 52. Activity
- 53. class MainActivity : AppCompatActivity() { private val navController: NavController by lazy { Navigation.findNavController(this, R.id.mainHostFragment) } … override fun onCreate(savedInstanceState: Bundle?) { … with(binding) { val appBarConfiguration = AppBarConfiguration( setOf( R.id.pokemonListFragment, R.id.berryListFragment, R.id.pokemonDetailBottomSheet ), drawerLayout ) toolbar.setupWithNavController(navController, appBarConfiguration) navView.setupWithNavController(navController) } } }
- 54. private val navController: NavController by lazy { Navigation.findNavController(this, R.id.mainHostFragment) }
- 55. val appBarConfiguration = AppBarConfiguration( setOf( R.id.pokemonListFragment, R.id.berryListFragment, R.id.pokemonDetailBottomSheet ), drawerLayout )
- 59. 3. Deeplink The Navigation component lets you create two different types of deep links: explicit and implicit.
- 60. Explicit Deeplink: Navigating within the app by PendingIntent NavDeepLinkBuilder(context).setGraph(R.navigation.main_navigation) .setDestination(R.id.berryDetailFragment) .setArguments(url) .createPendingIntent() .send()
- 61. Implicit Deep link: Navigating from outside of the app 2 Steps ➔ Declare Deeplink in Navigation Graph ➔ Declare NavGraph in Manifest
- 63. 1. Navigation Graph <navigation …> <fragment android:id="@+id/berryListFragment" …> <action android:id="@+id/action_berryListFragment_to_berryDetailFragment" app:enterAnim="@anim/slide_in_right" app:exitAnim="@anim/slide_out_left" app:popEnterAnim="@anim/slide_in_left" app:popExitAnim="@anim/slide_out_right" app:destination=“@id/berryDetailFragment"/> <deepLink app:uri="www.pokemoninfo.com/berrylist" /> </fragment> </navigation>
- 64. 1. Navigation Graph <deepLink app:uri="www.pokemoninfo.com/berrylist" /> </fragment> </navigation>
- 65. 2. Manifest <manifest …> <uses-permission android:name="android.permission.INTERNET"/> <application …> <activity …> <nav-graph android:value=“@navigation/main_navigation"/> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> </activity> </application> </manifest>
- 67. Additional Note ➔ Where is startActivityForResult? ➔ How to handle a complex navigation flow? ➔ Are there any problems?
- 69. Conclusion
- 70. Ben (Boonya Kitpitak) Android Developer at Oozou Medium: https://medium.com/@boonya.kitpitak Github: https://github.com/BenBoonya
- 73. Promocode For Java to Kotlin for Android Dev at Skooldio https://v1.skooldio.com/courses/kotlin-for-android-2 Discount Code: ANDROIDCONF
- 74. Q/A
Editor's Notes
- How many of you experience … I’ve playing around with Jetpack… it would say it makes a lot of thing easier. This architecture only have one activity .. Start problem statement
- In this video, it uses shared element transition to animate between activity.
- The way to fix this is not intuitive. From what I’ve heard there won’t be a release to fix this problem. we might need to add these line of code forever. But this problem won’t occur in the transition between Fragments.
- We can treat activity as bigger component
- By the reason I’ve told you some of you might wanna try Single Activity but how?
- By using JetPack Navigation component, we can implement single activity app really easy.
- First of all I would like to show you the little application that I build as a demo for this talk.
- There’ll be a link to the source code of this project in my Github repo at the end of this talk. As the talk goes you’ll see how I built this app by navigation component.
- This is a new type resource previously we have drawable, menu now we have navigation graph. Navigation graph represent the screens and navigation path in your app.
- navigation graph file is in the resource directory under navigation folder. When you open it the file you’ll navigation editor like this.
- Navigation graph come with Nav editor. You can either choose to edit in design view or raw xml file.Let’s take a closer look.
- We call each screen a destination. The destination can be Fragment, Dialog, or BottomSheetDialogFragment. And each destination can be connected by action represented as arrow in the graph.
- Here are the things that we can do with the editor. First thing is action animation.
- we can add argument to each destination. It can be parcelable or primitive things like Int or string.
- specify pop to destination.
- Like SingleTop Flag when start an activity.
- Build the app when finishing creating your graph. There’ll be some auto generated class created to comfort our development.
- After we have our graph set up. How could we display this graph in our activity
- This is the layout file of main_activity.xml
- The app:defaultNavHost="true" attribute ensures that your NavHostFragment intercepts the system Back button. navGraph is where you put the graph that you have defined in the previous step in.
- Here come the third essential element we have destination and action defined then we have a container for them to display now what left is the thing to manage all of them. That thing called NavController
- In activity you have to specify id of NavHost. In case there’re multiple NavHost in an activity.
- We can navigate to destination by ID like this.
- Or we can use direction it’s auto-generated class which create base on the navigation graph. But why can’t we just navigate with ID. The reason is we need to use direction for passing data between destination. I will talk about this in the next topic.
- This plugin will auto generate some classes to make passing data between destination safer and easier. Previously, we need to pass the data to fragment by newInstance method right?
- Some are optional some are not you have to check in again before putting in argument. SafeArg can safe from this mess.
- Click on destination to add argument. It can be optional or mandatory.
- if there’s more param it can be pass via function. In this case I define url as mandatory param so the function actionBerryListFragment… won’t be able to compile if I don’t pass item url in.
- The data can be retrieved via BerryDetailFragmentArgs
- Basically use can deal with every argument the BerryDetailFragmentArg
- If you have worked with navigation drawer or bottom navigation, you may notice that there’re some overhead. Navigation UI libs help get rid of it.
- You need to add one more dependency
- I’ll show you the step to set up navigation drawer with navigation ui Lib.
- create navHostFragment like what we did before.
- In addition, you need to add NavigationView with menu specified.
- It’s the typical menu resource but the id need to be exactly the same as fragment id in navigation graph.
- As you can see that it has exactly the same name as in menu resource.
- We have everything set up now we need to bind them all together.
- Navigation controller going to bind them all together.
- create appBarConfiguration to control the behavior of hamburger icon and back button.
- set up toolbar with NavController for showing correct toolbar label
- Navigation component libs also provide the way to handle deep link
- can navigate from destination in one graph to destination in another graph. We didn’t use it in our example
- In our example we use implicit deeplink to navigate from outside of the app like browser or other apps.
- Jetpack navigation component make my life a lot easier. I can visualize the navigation in the app and compare side by side with the flow from the designer. as well as passing the data safely between screen. I understand that this architecture is not for everyone. Just like any other new architecture if the old architecture work well for you. You don’t need to change it. But if you want to start new project it might worth a try.