Android: Navigation Architecture. Part-1
Switching between Android application part is really mess and need lot of managment. Navigation architecture can help to fix this with a lot simple solution.
Purpose of this series to make you understand about Android Navigation Architecure component from In Android Jetpack library collection.
Android Navigation Architecture Component simplifies the implementation of navigation in Android app using navigation graph and visualisation.
It give you lot of reason to think about it’s benefit. Most exciting part is navigation component configuration that help in following way:
- Navigation graph visualising.
- Handling Fragment transaction, a very simple one.
- Handling up and back correctly by default.
- Navigation pattern like Navigation Drawer and Bottom Navigation binding.
- Type safety while passing data between component.
- Reusability of created sub-graphs.
- Helped to build single Activity architecture.
- Deep linking integration.
- And last but not the least remove lot of boilerplate code.
Less code at runtime that mean less Runtime exception scenario.
Setup Prerequisites
Note: Navigation architecture component is still in preview release. You will be require update with following to start.
- Android Studio 3.2 Canary 14
- Emulator or device running API 14+
IDE Setup
If you are using as recommended Android Studio IDE(3.2+ preview) then you do not need to anything extra, eveything is ready as part of default setup.
But if not then enable Navigation Editor by following preference>experimental>Enable Navigation Editor and then restart IDE.
Project Setup
If you are using recommended IDE and creating new project, minimal setup is already ready as part of default configuration. If not,
- Add the following Navigation Architecture Component to your app or modules build.gradle file. Adding components to your project.
- Create navigation resource by following New > Android Resource File. The New Resource File dialog appears, Select Navigation from the Resource type drop-down list.
- It will generate navigation/ resource directory in res/ directory, and that will contain navigation graph xml file with given name.
If you have reached till this level that mean you are ready for first navigation component configuration 💥.
Navigation components
Time to get familiar with component terminology.
Navigation Graph: A graph that represent navigation flow of your application. In general file generated under res/navigation ‘mobile_navigation’ is the graph file you will work on.
Destination: For end user ‘A destination is any place he can navigate to’. While destinations are usually Fragments representing specific screens but it can be Activity or any other graph/subgraph.
<navigation>: This is root tag of navigation graph. This is also use to create sub-graph.
startDestination: It’s attribute used by ‘navigation’ tag to navigate first screen to display. e.g. Home Page, Splash Screen.
<fragment>: As stated, it’s generate when you add any fragment as navigation component destination. Similar <activity> if you adding Activity as destination.
<action>: This is used to perform navgation action. Let’s say you wanted to navigate from Home Page to Login Page and SignUp page then Home Page fragment will be have two action tag. Inside this you defined next destination under ‘destination’ attribute, you can change it as your app requirement.
Back stack navigation: Usually back-stack navigation work as expected but what if you wanted to skip and wanted to reach particular destination(say on logout directly to Home Fragment).
This even can be configured from here by adding popUpTo attribute with given destination name and you done.
Like popUpTo you can find other properties e.g. popUpToInclusive, clearTask.
Cool so far !! This is really nice if you are able to setup and understand these basic terminology. Next session will help you to take it more clear with practical implementation.
What we will build.
We’ll start with creating Activity and fragments we needed and use as Navigation Component to connect them all. We’ll implement the following with the Navigation Component:
- Navigating by destination and action
- Working with deep links
- Menu navigation
- Bottom navigation
Join me there. #HappyCoding #HappyLearning 🙌