Announcing Bottom Navigator
An Android Multiple Backstack Bottom Navigation Library
Pandora’s latest mobile redesign brings the bottom navigation pattern to our apps. Bottom navigation has become a popular design choice for many apps due to its many advantages including easy one-handed use and enhanced discoverability of top app destinations.
When Pandora embarked on this project our designers had a clear vision of how navigation should work, a vision that in many ways is familiar to users of other popular apps like Instagram, YouTube and Netflix that use bottom navigation.
In Pandora’s Android dev team we surveyed the open source library ecosystem and were unable to find a good fit for these requirements. We realized we would have to build our own. Thus, Bottom Navigator was born. We are happy to open source it and contribute back to the Android development community from which we have benefited so much. The library is opinionated and fits our tech stack, but we believe many other apps share the same opinions and similar tech stacks.
Bottom Navigation on Android
For many years Google discouraged bottom navigation on Android, it was seen as an iOS-only pattern. That has changed over the last few years, and bottom navigation has now been added to the Material Design guidelines. But Material Design has unusual recommendations for bottom navigation on Android with which we strongly disagree; specifically, it recommends that switching to a previous tab should reset that tab’s state and clear its backstack.
Since other popular apps, including Google’s own, do not follow this recommendation, we believe that doing so would be unintuitive to users and could cause unexpected data loss. Hence, Bottom Navigator ignores this advice and maintains the state of the multiple backstacks across tab switches.
Why not Jetpack Navigation
One of the questions we’ve been asked is why we don’t just use Google’s Jetpack Navigation library. Jetpack Navigation was announced with great fanfare at Google I/O 2018. It is designed around the concept of a hierarchical navigation graph with one entry point. Unfortunately, this concept doesn’t mesh well with the idea of switching between multiple backstacks. Jetpack Navigation’s lack of multiple backstacks makes it unsuitable for our use. The developer community’s expectation that bottom navigation should consist of multiple backstacks has made it one of the most requested features of the Jetpack Navigation library, so Google has provided some workarounds and they are working on adding the feature to their library. When that is released there might be less need for Bottom Navigator, but other issues still make us wary of Jetpack Navigation.
When comparing iOS and Android navigation the main difference is that on Android we have to take the system’s back button into account. With bottom navigation this brings up the question of what to do when the user is at the root of a tab’s stack and they press the system back button. Bottom Navigator maintains a history of previous tabs that the user has navigated to so that on back press it can switch to previous tabs before it ever exits the app. It won’t exit the app until all stacks on each previous tab have been exhausted. This means that the app can be exited from any tab, not just the initial tab. This functionality is difficult with Jetpack Navigation because of their reliance on a graph with one entry point which is also the single exit point out of the app. As they explain in their documentation “the first screen that a user sees … is also the last screen they see before exiting the app.”
Besides these specific issues we also have concerns that Jetpack Navigation is a large library with a large API. It introduces many new concepts and leaky abstractions. It has a compiler plugin, IDE integration, custom Fragments, custom Fragment containers, special XML files and tags, and many other features and nuances that developers will have to learn, maintain and debug.
Conversely, Bottom Navigator strives to have a small, simple and unobtrusive API. In essence, it wraps FragmentManager and adds the concept of multiple backstacks. It does one thing and tries to do it well, while following UX designers’ best advice for bottom navigation. If you are considering the bottom navigation pattern in your Android app, please give it a try and reach out if you run into any problems!
Pandora is hiring! We have open positions in Engineering, Product Management, Technical Program Management, and Data Science.
