🧭 Navigation Component in a Modular App (Part 1)

For most cases Navigation Component works perfectly out of the box. But what happens when we want to do more complex navigations in a modular app?

To solve this question, we are going to develop a modular app. Let’s imagine we are the development team at Marvel and our friends at Product Development request an app with the following characteristics:

• A list of heroes.
• A details screen for each hero.
• A search screen.
• A bottom navigation bar.

As a team, we agree to develop each feature as independent modules. With that said, we determined that the modules would be as follows:

By defining this architecture, the development and organization of the project are easier. The :characters and :search modules are isolated. However, this creates two problems when navigating:

1. How do we navigate to CharactersFragment and SearchFragment using a BottomNavigationView?
2. How do we navigate from SearchFragment to DetailFragment if we have no access to the module that contains it?

To maintain clarity, I decided to divide the article into two parts. Let’s start by solving the first question.

🤔 How do we navigate to CharactersFragment and SearchFragment using a BottomNavigationView?

To solve this problem, we want to configure our BottomNavigationView to send the user to the correct navigation graph. If we click on Characters, we expect to enter characters_graph.xml’s navigation; if we click on Search, it should send us to search_graph.xml.

We can achieve this behavior in four steps:

1. Create a menu for our BottomNavigationView.
2. Configure MainActivity’s XML.
3. Include :characters & :search navigation graphs to the app.
4. Configure BottomNavigationView to automatically update the fragment it should show.

Let’s start by creating the XML for our BottomNavigationView in res/menu. Fortunately, Navigation Component knows how to handle routes automatically. We just have to make sure that the id of the item is the same as that of the destination graph.

Now let’s check that we actually have the same id in its respective graph.

Once our bottom_nav_menu.xml is ready, we can assign it in activity_main.xml. We also take the opportunity to configure our FragmentContainerView.

Now we can move on to include characters_graph.xml and search_graph.xml into nav_graph.xml. nav_graph.xml being the graph that we defined as default in the previous step.

⚠️ Do not forget to define characters_graph as the startDestination for the app to open directly in CharactersFragment.

Finally, we configure our BottomNavigationView with the setupWithNavController() function.

🎉 And voilà! Now we can navigate to the graphs of other modules from our BottomNavigationView. Let’s see the result 👀:

🙏🏼 Thank you for staying until the end. This is my first written work, and I would love to know what you think about it in the comments. Also, if you have any questions, feel free to contact me on Twitter or Instagram at @soyllamas.

Wait for the second part, where we’ll see how to 📲 navigate from SearchFragment to DetailFragment even when their modules are isolated.