Skip to content

Instantly share code, notes, and snippets.

@guelo
Last active August 9, 2019 06:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save guelo/d73e815449dc63143fca81dad6f13b3f to your computer and use it in GitHub Desktop.
Save guelo/d73e815449dc63143fca81dad6f13b3f to your computer and use it in GitHub Desktop.

Announcing Bottom Navigator, an Android open source 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 the 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 should be familiar to users of other popular apps with bottom navigation such as Instagram, Youtube and Netflix.

On the Android dev team we surveyed the open source library ecosystem and were unable to find a good fit for our requirements. We realized we would have to build our own and Bottom Navigator was born. We have decided to contribute it back to the Android development community from which we have benefited so much. The library is opinionated and it fits our tech stack, but we believe many other apps share these same opinions and tech stack.

Bottom Navigation on Android

For many years Google discouraged bottom navigation on Android and it was seen as an iOS-only pattern. That has changed over the last few years and it has now been added to the Material Design guidelines. But Material Design still has a strange recommendation for Android with which we strongly disagree. Specifically Material recommends that switching to a previous tabs should reset that tab's state clearing its backstack. This is unintuitive to the user and we have been unable to find many examples of other apps that follows this recommendation. Bottom Navigator ignores this advice and maintains a backstack per tab.

Reset Stack

Jetpack's Navigation

One of the questions we get asked is why we didn't just use Google's Jetpack Navigation library. The main reason is that Jetpack seems to have been built with Material's recommendation in mind that Android apps should not maintain multiple backstacks. Another Jetpack Navigation decision we disagree with is their "Fixed start destination" principle which says "This destination is also the last screen the user sees". https://developer.android.com/guide/navigation/navigation-principles#fixed_start_destination

Like many other popular apps that implement bottom navigation we see no need to have a difference in behavior between iOS and Android. The one question on Android is what to do with the system back button when the user is at the top of the navigation hierarchy. With Bottom Navigator it maintains a history of the previous tabs the user has navigated to and it will go back to those previous tabs before it ever exists the apps. We believe this is the best experience for the user.

Jetpack Navigation's lack of multiple backstack is one of their most requested features so Google has provided some workarounds and they are working on adding the feature to their library https://issuetracker.google.com/issues/80029773. When that is released their might be less need for Bottom Navigator but we would still be wary of it. Jetpack Navigation is a large library with a large API. Ot introduces many new concepts and leaky abstractions that are layered on top of FragmentManager. It has a compiler plugin, IDE integration, special Fragments, special Fragment containers and many other features that developers will have to learn and debug.

Bottom Navigator strives to have a small, simple and unobtrusive API. It does one thing and tries to do it well while following UX designers' best advice. 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!

https://github.com/PandoraMedia/Bottom Navigator

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment