Mastering the Bottom Navigation with the new Navigation Architecture Component
Bottom Navigation
The bottom navigation was introduced 2 years ago as a material design pattern. The goal was to give the user quick access to 3–5 top-level destinations in an Android app, but an appropriate implementation was missing for long time. Meanwhile Google introduced the Bottom Navigation bar as an implementation.
The common architectural approach for such a top level navigation would be to make use of Fragments which are added/replaced in a FrameLayout serving as a holder in the Activity's view hierarchy. The FragmentManager used for dealing with fragments within an Activity only knows one backstack. Building up a backstack for each single view section accessible by the Bottom Navigation bar was impossible. Therefore the "old" pattern behavior was about to remove the whole backstack when the user switched from one section to another.
But this wasn’t the best user experience. Other approaches popped up, like the Conductor framework making it possible to maintain different controller-based backstacks attached to different Router’s used in one Activity.
The “new” pattern behavior is about to maintain the view state a user left in one section when navigating back to it.
Navigation Architecture Component
With the new Navigation Architecture Component Google introduces a similar concept which uses a NavHostFragment hosting a NavController operating on a navigation graph.
Placing this xml snippet into your Activity gives you access to it’s NavController managing the navigation within the NavHost. Based on the navigation graph it allows to navigate to another fragment defined as an action or to pop the backstack.
Mastering several view sections of the Bottom Navigation bar
To maintain a fragment backstack for each view section of the Bottom Navigation bar a possible solution would be to use several NavHostFragments:
Each navigation host (NavHostFragment) contains its own NavController based on a specific Navigation Graph and maintains its own Fragment backstack. Initially only the first FrameLayout containing the home section will be visible to the user. When switching view sections the appropriate FrameLayout will be shown to the user, the others hidden. The view state of each view section backed by a NavHostFragment and its NavController will be maintained and not changed.
Android Studio 3.2
The Android Studio 3.2 provides a nice graphical editor for designing a Navigation Graph.
Finally, Google comes up with a useful architecture component for implementing a Navigation Graph programmatically and visually, too.
The Demo project
The full project code is accessible on GitHub.
Originally published at gist.github.com.
