Navigation Drawer (Google+ vs. YouTube)

Question

Does anyone know how to implement a sliding menu like some of the top apps of today?

Other Stack Overflow questions haven't had any answers on how to do this, so I'm trying to gather as much info to help out others. All the applications I mention below do a great job of implementing the slide menu.

1. Google Plus (as of 7/7/12)

You can only go from the first screen to the second screen by clicking the G+ logo in the upper left hand corner. Notice that the entire screen moves from it's position and get's nudged to the right side of the screen (including the action bar). To get back to the first screen you can either slide the right side back into focus or you can click the G+ icon again.

2. YouTube (as of 7/7/12)

You can go from the first screen to second screen using two methods. Either click the YouTube logo in the upper left, or you can use a swipe gesture to move it to the right. This is already different from the G+ app. Secondly, you can see that the action bar stays put (Unlike G+). Lastly, to get the original screen back it works just like G+.

Postfix

By the looks of it, not many people have had experience with working on something like this. I suggest trying to implement something yourself and coming to SO with specific problems you may encounter. – Opal

Yeah, that's why I posted a SO question in other that I believe deserves a bit more attention. I just wonder if there is someone out there that has successfully accomplished this and would love to share their wisdom. – Postfix

About the topic I would like to add my 2 cents with this wonderful tutorial about the difficulties of implementing this kind of menu: Making of Prixing – Writeup

@Postfix Check out this series of articles: android.cyrilmottier.com/?p=658 – Flaviaflavian

I answered this question a while ago, but I'm back to re-emphasize that Prixing has the best fly-out menu out there... by far. It's absolutely beautiful, perfectly smooth, and it puts Facebook, Google+, and YouTube to shame. EverNote is pretty good too... but still not as perfect as Prixing. Check out this series of posts on how the flyout menu was implemented (from none other than the head developer at Prixing himself!). – Flaviaflavian

possible duplicate of How did Google manage to do this? Slide ActionBar in Android application – Seligmann

The above sliding menus can implement easily by using this github code this contains a library and a sample project just run it properly and you can see the sliding menu both right and left .working code – Faller

@Postfix could you talk more about your setup of the jfeinstein/iPaulPro SlidingMenu? I have been working with these libs more quite sometime and the setup is miserable. I can't get the thing to run and I can't seem to find the simplest implementation of the base classes so that I can figure out how it works. Any advice you have would be great. – Nyaya

Are you running it with ActionBarSherlock? I'll put up a github repo later today that shows it working with ABS and SlidingMenu. – Postfix

I am trying to run with ABS, but there are too many errors when opening the samples to know what is going on. Thanks for the repo. I look forward to seeing it! – Nyaya

You know... I actually prefer not to use ABS. I have a number of custom views I need to try to implement – Nyaya

Sorry, never got around to uploading it, but since you don't need ABS, then the sample included on github should work fine, no? – Postfix

No one has posted this yet, but this is an implementation of the article by the Prixing developer: github.com/SimonVT/android-menudrawer I tested it out, and it was very easy to get up and running. – Negligible

With android support package revision 13( may 2013), there is DrawerLayout for creating a Navigation Drawer that can be pulled in from the edge of a window. And, navigation drawer is a design pattern now. developer.android.com/tools/extras/support-library.html – Exactitude

@WubaoLi Do you know why Google force the DrawerLayout to be opened only from the edge? Do you know a easy way to make it swippable fullscreen? – Plurality

I have implemented my own sliding menu you can check it here https://mcmap.net/q/87513/-android-how-to-make-slide-menu-like-facebook-spotify-and-google – Skatole

Answers here helped me : https://mcmap.net/q/87514/-how-to-implement-a-drawerlayout-with-a-visible-handle/1491212 – Review

Answer 1

Edit #3:

The Navigation Drawer pattern is officially described in the Android documentation!

Check out the following links:

• Design docs can be found here.
• Developer docs can be found here.

---

Edit #2:

Roman Nurik (an Android design engineer at Google) has confirmed that the recommended behavior is to not move the Action Bar when opening the drawer (like the YouTube app). See this Google+ post.

---

Edit #1:

I answered this question a while ago, but I'm back to re-emphasize that Prixing has the best fly-out menu out there... by far. It's absolutely beautiful, perfectly smooth, and it puts Facebook, Google+, and YouTube to shame. EverNote is pretty good too... but still not as perfect as Prixing. Check out this series of posts on how the flyout menu was implemented (from none other than the head developer at Prixing himself!).

---

Original Answer:

Adam Powell and Richard Fulcher talk about this at 49:47 - 52:50 in the Google I/O talk titled "Navigation in Android".

To summarize their answer, as of the date of this posting the slide out navigation menu is not officially part of the Android application design standard. As you have probably discovered, there's currently no native support for this feature, but there was talk about making this an addition to an upcoming revision of the support package.

With regards to the YouTube and G+ apps, it does seem odd that they behave differently. My best guess is that the reason the YouTube app fixes the position of the action bar is,

1. One of the most important navigational options for users using the YouTube app is search, which is performed in the SearchView in the action bar. It would make sense to make the action bar static in this regard, since it would allow the user to always have the option to search for new videos.

2. The G+ app uses a ViewPager to display its content, so making the pull out menu specific to the layout content (i.e. everything under the action bar) wouldn't make much sense. Swiping is supposed to provide a means of navigating between pages, not a means of global navigation. This might be why they decided to do it differently in the G+ app than they did in the YouTube app.

   On another note, check out the Google Play app for another version of the "pull out menu" (when you are at the left most page, swipe left and a pull out, "half-page" menu will appear).

You're right in that this isn't very consistent behavior, but it doesn't seem like there is a 100% consensus within the Android team on how this behavior should be implemented yet. I wouldn't be surprised if in the future the apps are updated so that the navigation in both apps are identical (they seemed very keen on making navigation consistent across all Google-made apps in the talk).

Flaviaflavian

Prixing, Evernote, and Spotify all have pretty big teams writing their apps I am the CEO of Prixing, and I'd like to precise we have only one real Android developer (but a very talended one, Cyril Mottier) – Refinery

With android support package revision 13( may 2013), there is DrawerLayout for creating a Navigation Drawer that can be pulled in from the edge of a window. And, navigation drawer is a design pattern now. developer.android.com/tools/extras/support-library.html – Exactitude

though NavigationDrawer is present in V4 it needs ActionBar which is not yet provided within the V4 so not able to use it in apps having API level below 11. – Operetta

@NayAneshGupte you can always use ActionBarSherlock to use ActionBar below API level 11. – Plurality

It seems like there is no way around introducing an artificial delay if you want the close animation to be smooth? – Monreal

why is that every one else answers are community wiki but not yours :P – Ranchman

Answer 2

Just recently I forked a current Github project called "RibbonMenu" and edited it to fit my needs:

https://github.com/jaredsburrows/RibbonMenu

What's the Purpose

• Ease of Access: Allow easy access to a menu that slides in and out
• Ease of Implementation: Update the same screen using minimal amount of code
• Independency: Does not require support libraries such as ActionBarSherlock
• Customization: Easy to change colors and menus

What's New

• Changed the sliding animation to match Facebook and Google+ apps
• Added standard ActionBar (you can chose to use ActionBarSherlock)
• Used menuitem to open the Menu
• Added ability to update ListView on main Activity
• Added 2 ListViews to the Menu, similiar to Facebook and Google+ apps
• Added a AutoCompleteTextView and a Button as well to show examples of implemenation
• Added method to allow users to hit the 'back button' to hide the menu when it is open
• Allows users to interact with background(main ListView) and the menu at the same time unlike the Facebook and Google+ apps!

ActionBar with Menu out

ActionBar with Menu out and search selected

Splint

Answer 3

There is a great implementation of NavigationDrawer that follows the Google Material Design Guidelines (and compatible down to API 10) - The MaterialDrawer library (link to GitHub). As of time of writing, May 2017, it's actively supported.

It's available in Maven Central repo. Gradle dependency setup:

compile 'com.mikepenz:materialdrawer:5.9.1'

Maven dependency setup:

<dependency>
    <groupId>com.mikepenz</groupId>
    <artifactId>materialdrawer</artifactId>
    <version>5.9.1</version>
</dependency>

Charlottetown

@lmiguelvargasf how do you imaging fitting a GitHub project into the answer?! Please share your ideas. – Dakotadal

Answer 4

I know this is an old question but the most up to date answer is to use the Android Support Design library that will make your life easy.

Heriot

Answer 5

Personally I like the navigationDrawer in Google Drive official app. It just works and works great. I agree that the navigation drawer shouldn't move the action bar because is the key point to open and close the navigation drawer.

If you are still trying to get that behavior I recently create a project Called SherlockNavigationDrawer and as you may expect is the implementation of the Navigation Drawer with ActionBarSherlock and works for pre Honeycomb devices. Check it:

SherlockNavigationDrawer github

Transpolar