Step by Step to Bottom Navigation with Jetpack’s Navigation Component and multiple nav graphs
This is a simple guide that shows how to implement within a new android app, bottom navigation view along with navigation component supporting multiple navigation graphs. This is a simple way and one among others but is the one I feel comfortable with and so far, it covers all what I currently need.
Note: I’m gonna be using this project in different articles, then all the code I’m gonna share is gonna be available through a specific branch. Ah! and the app uses databinding as well!
The Steps
1. Update the dependencies in app/build.gradle file:
2. Under res folder create “nav_graph_home.xml” and “nav_graph_info.xml” files with type Navigation, these files will have all navigation configuration (stacks) and initially will be empty (no fragments yet) but later they are gonna be updated with them. The idea with this is to have every section of the app with its own fragment stack.
3. Taking into consideration that this new project was created using an empty activity, then modify the “activity_main.xml” file with the BottomNavigationView. An important hint here is to create BottomNavigationView’s menu items ids with the same name of the navigation graphs. This is key!
Also add the container (FragmentContainerView -> implementation “androidx.fragment:fragment-ktx:$fragment_version”) to host the navigation graphs.
4. Create all fragments of the app, for this particular app I have a Home Fragment to show a list, then a Fragment to display the Details of every item.
5. Open “nav_graph_home.xml” in design view and add Home Fragment and Details Fragment, then create an Action dragging the arrow from Home to Details. Check the text tab to see how the code was automatically generated. The same must be done to “nav_graph_info.xml”
6. Once we already have the adapter created for the Home list, then within the bind method in the ViewHolder, we tell every item where to navigate to. Take into consideration that we are referencing the navigation controller defined in step 5 to navigate to a defined destination.
7. By default Navigation Component doesn’t have support to multiple navigation graphs, then using a workaround used by Android’s team in their projects we make use of a Navigation Extension and within the Main Activity tie all the wires. To highlight: with this navigation extension the fragment state is saved as well which is very important.
7. And in general that’s all, we can check this Github’s repo in this particular branch to see all the artifacts. Feel free to clone it and play a little or use it as an starting point in your next pet project. I have only two sections, but you can create more (up to 5 according to Bottom Nav guidelines) and every one with its own stack, such as Youtube or IG app.
P.S: take a look to this Android codelab of Navigation Component and this video from Coding with Mitch to have all the landscape and details regarding Navigation Component such as deep linking, animation bundle args and navigation from/to activities among others.
Have fun and keep learning!
