Android: Navigation Architecture. Part-2

Solid Navigation architecture is useful to build fast prototyping within no time.

In first session we talked about basics of Navigation Architecture Setup and terminology.

Android: Navigation Architecture. Part-1

In this session we will look for practical implementation and this is what we would like to build.

We’ll create a Activity and fragments we needed and use the Navigation Component to connect them all. We’ll implement the following with the Navigation Component:

1. Navigating by destination and action
2. Working with deep links
3. Menu navigation
4. Bottom navigation

Add component in Graph.

Android Studio extension has made it very easy. You need to follow following steps to add your destination component.

Graph file design mode.

1. Open graph file mobile_navigation.xml in design mode.
2. To add new destination, tap on top ➕ icon.
3. If you already have created Activity and Fragment that you wanted to add then just search there and add.
4. If not you still can choose to “Create new destination”. This will launch flow to add new Fragment. Complete this and you are done. You will see display update in Navigation graph. And like this you can add more destinations.

From here if you check graph file, then it will display <fragment> component under the <navigation> tag.

Update layout & add navigation: You can update layout of your visual compoment by double click on that. Once this all done, time to add Action. To demonstrate we have added three fragment, Home, Login & SignUp fragment. We will add action to navigate from Home Fragment to Login and SignUp page.

To do this all you need to do drag a pointer from Home Fragment to Login Fragment and then same for SignUp fragment. At this point if you visualise then you have linked destination component with each other.

Graph visualisation. ‘A’ indicate start destination.

Mapping of action at runtime

You need to map these navigation state at runtime with button click event. Let’s see how:

So two different way to do it, you might have already observed.

1. using navigate(res_id) method.
2. and using createNavigateOnClickListener(res_id), a additional method for button event.

Both method accept res_id as action_id and as directly destination_id. There are advantge to use action_id over to use destination_id e.g.Create a transition between destinations.

Link Activity with navigation graph

So far we have craeted

1. Graph
2. Added some Fragment
3. Added Action both from graph and at runtime.

Now time to tell your parent container Activity layout about navigation graph. After all Activity layout is the place where Fragment layout get add and display in general.

To do that, we need to add <fragment> of NavHostFragment type, like this and you are done.

Assign graph to NavHostFragment in Activity layout.

Just run your application and you will be able to see, Your first fragment (IndexFrgment) screen with two button to navigate Login & Signup page.

Cool !! What is wonder here. You do not have to right single piece of code at runtime to tell Fragment Manager to add fragment in stack and all. Clean code.

Like that you can add another fragment (say Dashboard Fragment)in this prototype flow to navigate from Login Fragment. In Layout part we will keep a button to do logout, just to look another configurable feature to clear stack.

And like we did from Home Fragment to navigate Login And Signup, we will drag a pointer to navigate from Dashboard to Home Screen back.

If you look carefully text implementation, it create a action under <fragment> tag for Dashboard and defined “destination” attribute; that mean you are redirecting control by adding another Fragment instance in stack. BUT wait, we do not wants back stack once I approached to Home Screen, right !! Well, you got another feature to remove all stack, instead of “destination” you need to use “popUpTo” and you done.

Like this you can play with other atrribute as needed.

Deeplink Integration

For selected component add Deeplink URI with attribute.

Yes, it is that easy. You can play with this by creating link like http://<domain name>/<attribute_value> and you need bundle argument reading implementation inside Dashboard Fragment like we used to do.

Android manifest Configuration: As per guideline you must make additions to your manifest.xml file to enable deep linking in your app:

Configuration: Android Studio 3.2+

• For Android Studio 3.0 and 3.1, you must manually add an intent-filter element. For more information, refer to Create Deep Links to App Content.
• For Android Studio 3.2+, you can add a nav-graph element to your activity elements and you done.

Very cool so far. We could be able to build a basic application using navigation architecture component and integrated deep-link with minimum manually line of code. Next we will see how easy to integrate Manu navigaion.

Android: Navigation Architecture. Part-3

Thank you for reading. #HappyCoding #HappyLearning 🙌