Multi module navigation with the Android Architecture component
There are already plenty of articles about the new Navigation Architecture Component. It sounds awesome and I wanted to use it in one of my side projects.
The project I am working on has multiple modules that need to be able to navigate between each other which is where my problem started.
Of course you could have your :app module depend on all of the feature modules and just handle the navigation within a single navigation resource file. However, thinking about bigger apps, this can become a problem really quickly. Just imagine an app that has 20 or 30 screens, how are we going to keep an overview of the screens, what is connected with what and many other problems.
It seems natural, that we want to seperate the navigation to its feature modules. When searching for a solution I couldn’t find anything that helped me to understand the problem.
But then I found this tweet:
🤔 Seems interesting, right?
So theoretically, we can create multiple navigation graph files (one per feature module) which only represent the module internal navigation. The navigation between the modules themselves can happen by including the graphs of the feature module to the entry point of the parent module.
Wait… What?
Yea, I get it… it sounds overly complicated and it shouldn’t be. It actually isn’t.
Enough talk, let’s spin up an example.
Imagine a beautiful project with three modules for now. The main app module called :app and two feature modules called :first_feature and :second_feature.
From :app you can navigate to :first_feature, from :first_feature you can navigate to :second_feature and inside :second_feature you have multiple screens that you want to navigate to.
So, how should our graph looks like?
In our :app module’s navigation_graph.xml we need to include the graphs of our features. Just do it inside the <navigation> tag.
<include app:graph="@navigation/first_feature_graph" /> <include app:graph="@navigation/second_feature_graph" />
Now our navigation_graph.xml in the :app module should look similar to this:
In our :second_feature navigation_graph.xml we just add the internal fragments for navigation following the turorials we can find everywhere.
And that’s it ✅
With this little “trick” we can separate our navigation graphs from each other and still access them.
Unfortunately it is not possible to access the graphs of other modules without depending on them.
If you are interested in checking out an example feel free to take a look at my sample GitHub repository:
Thank you very much for reading :)
If you have any feedback, questions or comments don’t hesitate to ping me on Twitter(@KiLLyA_) or in the comments below. 👍
This story is published in Noteworthy, where 10,000+ readers come every day to learn about the people & ideas shaping the products we love.
Follow our publication to see more product & design stories featured by the Journal team.
