How do we use Jetpack Navigation Component at CitizenMe ?
We have great news for you … We have decided to share a technical post every month from our Android developers at CitizenMe. Our first blog is about Jetpack Navigation Component and how we have been using it in our project.
Overview of Navigation
First of all, Jetpack Navigation Component simplifies implementing navigation, while also helping you visualize your app’s navigation flow. As you know, there are many advantages to it, such as handling back stack, automating fragment transactions, simplifying transition animations and deep linking... The Navigation component consists of three key parts:
Navigation Graph: Navigation graph is a resource file that contains all of your destinations and actions. You can visually edit navigation graphs or directly edit the underlying XML.
NavHost: The navigation host is an empty container where destinations are swapped in and out as a user navigates through your app.
NavController: manages app navigation within a NavHost. You can retrieve a NavController by using one of the following methods:
Let’s go deeper into our app 🏃♂️
When Google announced the Jetpack Navigation Component at Google I/O 2018, we started to investigate and tried to implement it in our project. We first used navigation on the onboarding side because this module has the least interconnected pages in the project.
When you create a nav graph, you will see it divided into three parts as shown in the example above.
- Destinations panel: shows a list of your navigation host and all destinations currently in the Graph Editor.
- Graph Editor: contains a visual representation of your navigation graph. You can switch between Design view and the underlying XML representation in the Text view.
- Attributes: shows attributes for the currently-selected item in the navigation graph. You can implement animation for your action easily or you can also decide to pop behavior…
So far, we have seen that navigation works really well and have applied it to the whole project. We are currently handling the transition between all fragments with navigation. By the way, we deleted our extension function which is openFragment() thanks to the navigation component. We don’t need it anymore. Anyway, let’s continue with the example below. 😉
Actually, there are two ways to navigate in order to transition between the fragments. One of them is findNavController(); you just need to call direction what you want. Another way is Safe Args, explained in the next step.
Safe Args
Safe Args is a Gradle Plugin that generates simple object and builder classes for type-safe navigation and access to any associated arguments. Google strongly recommends using Safe Args for navigating and passing data. In our project, we created two extension functions called navigate and safeNavigate.
If we want to navigate to a fragment with an argument, we use safeNavigate function. If we want to use it without an argument, we use another function. Let’s see this in the project.
When you want to navigate another page, just call the action you want. In this way, the possibility of giving a wrong id is eliminated.
However, if you try to navigate to a fragment with an argument, you should give a parameter as you defined. In this example, we are trying to navigate from OnboardingFragment to ChangePasswordFragment with an argument.
Firstly, you need to define an argument on your graph for passing data between destinations. You can change the type with what you want such as integer, boolean, string, custom parcable, etc. So, we can set an argument for verification code as a string type in our graph.
Be careful with that, when we want to navigate from OnboardingFragment to ChangePasswordFragment, we give an argument that is coming from the live data.
Well, how do we get this argument in ChangePasswordFragment?
As you can see in the example above, you should use the getArguments() method to retrieve the Bundle.
Yeap. That’s pretty much it for this part. If you want to give more details, check out the sample project in the link below.
Just a reminder: you can click on the clap button 50 times, it’s also free. Until next post! 👋
If you want to find out more about what we do at CitizenMe, don’t hesitate to contact us at hello@citizenme.com
Resources
Official Documentation: https://developer.android.com/guide/navigation
Sample Project Source: https://github.com/okanaydin/DevFest-Istanbul-2019-Jetpack-Navigation.git
