Skip to main content

Google updates Material Design spec with animated bottom bars for navigation

bottom-navigation-bar

Both Google+ and Google Photos have been updated with a bottom bar in the past few months. Google is now officially embracing bottom navigation with an update to the Material Design spec.

According to Google’s guidelines, “bottom navigation bars make it easy to explore and switch between top-level views in a single tap.” A quick glance at current Google and third-party apps reveal a mix of hamburger menus and tabs, so the consolidation on one UI element should provide much needed consistency.

Apps that have three to five top-level destinations that require direct access from anywhere should adopt the bottom bar, though the spec says a navigation drawer could also be used, especially if there are six or more destinations. If an app only has two destinations, Google still recommends using tabs.

Bottom navigation is primarily designed for use on mobile, with the tablet or desktop equivalent being side navigation or a compact rail. Google heavily advises that apps don’t use both bottom navigation and tabs as that would cause confusion.

For fans of Material Design’s many animations, bottom bars are not static, like in iOS. Specifically, ‘Shifting Bottom Navigation Bar’ feature an animation that enlarges the icon of the destination currently being viewed. Google+ or Photos has yet to implement that, but it is very much in line with the rest of Material Design’s fluidity and movement. I would not be surprised if this design element will be part of Android N’s new look come I/O.

For developers, there are a bunch of specifics in regards to the bottom bar’s icons and text, appearance, spacing, and more. Other updates to the spec include more in-depth guidance on accessibility, split-screen design, and how to display passwords in input fields.

FTC: We use income earning auto affiliate links. More.

You’re reading 9to5Google — experts who break news about Google and its surrounding ecosystem, day after day. Be sure to check out our homepage for all the latest news, and follow 9to5Google on Twitter, Facebook, and LinkedIn to stay in the loop. Don’t know where to start? Check out our exclusive stories, reviews, how-tos, and subscribe to our YouTube channel