15
May
nexusae0_Untitled-1_thumb

A few days ago, we investigated the new navigation drawer design present in updates to Google Earth and Google Shopper. The hope at the time was that this new Up button design would be pushed out to other Android apps. We even heard from a few Googlers that this was happening.

Now, things are officially official, as the Android Design site has updated with Matias-approved guidelines for the navigation drawer.

navigation_drawer_overview

Things work pretty much the way we went over when we were first introduced to this. The Up button changes from a carat to a new 3 line icon when it will open the drawer. The old design used a carat for Up and opening the navigation drawer, which was confusing. With this design, you always know what will happen before you hit the button. You should also be able to open the nav drawer from just about anywhere with a horizontal swipe.

Even if you already support a similar navigation drawer, update your drawer to this pattern to make sure that:

  • The action bar remains in place and adjusts its content.
  • Your navigation drawer overlays the content.
  • Any view represented in the drawer has a navigation drawer indicator in its action bar that allows the drawer to be opened by touching the app icon.
  • You take advantage of the new visual drawer transition.
  • Any view not represented in the drawer maintains the traditional Up indicator in its action bar.
  • You stay in sync with the general navigation patterns for Up and Back.

Google says that anyone with a similar design should update to this one, and that the action bar should stay put when the drawer is opened (glares at Google+).

Anyone interested in the full details should hit up the source link. Here's hoping we see this in a lot more apps soon.

Source: developer.android.com via Jens Nagel

Ron Amadeo
Ron loves everything related to technology, design, and Google. He always wants to talk about "the big picture" and what's next for Android, and he's not afraid to get knee-deep in an APK for some details. Expect a good eye for detail, lots of research, and some lamenting about how something isn't designed well enough.
  • Crazydog

    Really, Google? Nobody liked the dropdown?

    Suddenly all the "holo" apps now use obsolete UI elements. =/

    • http://shwetank-shukla.blogspot.com/ Shwetank Shukla

      Really, Crazydog? Why don't you just talk about yourself and not the rest of us? =/

      • Crazydog

        I said "Nobody liked the dropdown" as if that's what Google thought, which is why it has been replaced.

        • http://www.facebook.com/profile.php?id=1745689461 Hal Motley

          The drop-down menu (or View Control as it's called in the Android Guidelines) is still there and can be used as always, plus some applications which only have a small handful of options (2-4) would be better with a dropdown menu rather than the large navigation draw IMAO.

  • http://profiles.google.com/brenneisec Cameron Brenneise

    The animations with this drawer are so damn smooth. I love it

  • btod

    Sorry if this is a stupid question: will this eliminate the need for the black bar with three dots that shows up in sense on htc phones?

    • http://www.androidpolice.com/author/ron-amadeo/ Ron Amadeo

      Nope, that's a problem with old apps and phones with hardware buttons.

      • RajivSK

        *without

        • Dominic Powell

          with is right... if it had software buttons, the ellipsis will occur in the bottom bar.

          • Jakob Bjerre Petersen

            Then it's without. If you're without hardware buttons then you're left with software button, which can produce the three dots if needed be.

          • navjot

            He means with HTC's hardware buttons, which do not include a menu button so it forces a software menu button.

  • Michael Lee

    I'm going to use this is my next app update! I love the look of it. :)

    • http://www.facebook.com/seangt Sean Thomas

      I love it too, the drawer finally makes sense! The inconsistencies always bugged me. One thing that STILL bugs me is hangouts. That does not use this interface and it's confusing....and it was released today. GET WITH IT GOOGLE.

      PS what is your app? :D

      • Jakob Bjerre Petersen

        But it does however use this EXACT interface. Or am I missing something?

        • marcusmaximus04

          It still has the carat, rather than the three lines... Kinda OCD, but hey, still inconsistent.

  • Melissa Peterson

    Facebook better get updating then!

    • TheWhiteLotus

      Or you could update to Google+

      • Melissa Peterson

        I already use Google+ and prefer it over Facebook any day. I was just saying Facebook better update, because they too use that sliding menu.

    • navjot

      Based on Facebook's track record, you shouldn't hold your breath for an update.

  • Chris Clark

    I compiled the example as is and I don't really like it. One of the design guidelines sates the drawer should overlay the content. I find it just isn't as nice as when the content slides to the right also. Like in every Google app! Even the new Hangouts app.

    As it is in this guideline, it just looks too flat and doesn't flow as nicely.

  • http://www.facebook.com/people/Michael-Emaw-Kennedy/504157652 Michael Emaw Kennedy

    Why is the menu half way on the screen it looks terrible!

  • Metallinatus

    I hope Valve reads this, because it's Steam for Android is really needing an UI update....

    • Melissa Peterson

      I actually sent a support message asking them to forward it to the dev team that works on the mobile app.

  • duse

    I don't like how the 3 lines go off the edge of the screen instead of appearing normally, like the 3 lines in Chrome desktop. It doesn't even look like a button. Try explaining that to a new user: "Press the 3 tiny lines in the upper-left corner that sort of go off the edge of the screen." Real intuitive. Who would think to hit that without knowing about the drawer concept ahead of time? For as much as the Android UI has improved over the years, Google still sure has trouble making anything simple to use.

    • lewishnl

      I really hate it too, it keeps making me think my screen isn't showing the whole thing :( Kinda sucks...

    • mauric

      It gives the illusion there is more hidden on the left, so pressing it to see what's there seems quite logical to me.

      • duse

        You have to think from the perspective of a regular user though. This is why iOS still trumps Android for the general population. Everything is completely straight-forward...a back button, some tabs at the bottom, a single button to get to the home screen. On Android, you have this drawer thing, the pull-down to switch views, the 3-dot menu, AND tabs. It's just a mess and they have far too many UI conventions going on at once.

        A normal user will not look at this and see it as a button to press, or a hint that there is "more to see." They'll just think it's some random 3 marks in the corner of the app, or more likely not notice it at all. Google had a good idea with the action bar and general Holo guidelines, and as always they're screwing it up and not leaving well enough alone.

  • Aman Yajurvedi

    The new hangouts app still does not incorporte this

    • Sergio

      Another thing I cannot understand... Unintuitive and bad designed in my opinion...

  • http://www.facebook.com/profile.php?id=100003580988619 Suresh Cheemalamudi

    I was very much excited with the official support for the Navigation Drawer. However, when i downloaded and executed the sample app from the official website from here: http://developer.android.com/shareables/training/NavigationDrawer.zip , the drawing menu seems to be quite jerky while toggling. It is not at all smooth when it tested it on nexus 7 and sgs2.

    • Floss

      This is exactly why I hate the drawer design in general. I always see in jerk around when pulling out and usually requires several tries before it realizes that you are trying to get it to come out.

  • schneeland

    I like the idea, but somehow Google seems to have lost its sense of proportions. While the new drawer seems definitely oversized (in a similar way the Youtube app did since the bigger redesign), other elements (e.g. in the new Play Music app or in the Play Store) are way too small (in particular when you have two slim buttons on top of each other).

  • zookee

    When I first used it on Earth I pressed back to make it go away and the whole Earth went away :(

    It's really not a very good design solution if you think about it...

    • dextersgenius

      So it was *you* who's responsible for that sudden darkness over our country! How dare you make the Earth go away?!

  • XBIRDIE98

    It looks like this is part of the Android Support Library, as a Developer Doc is linked to from the design page, and it may be open source! :) (I'll try and figure out if that's the case when I get the chance - you can find the support library sources in:
    //extras/android/support )

  • http://www.facebook.com/profile.php?id=1065971454 Andrew Hime

    Isn't this basically just Enyo?

  • http://twitter.com/JPAzevedo90 João Pedro

    Can i use it on gingerbread?