Slide-out navigation done better

My last blog post was about the sliding menu pattern that several apps are now using. My main critisism was that the pattern in its current form felt didn’t feel very much Android, mainly because how it treats the back stack.

After this the new Google+ app was released showcasing this same pattern (though they call it a ribbon menu). Their implementation differs from others because the action bar remains in place. Only the menu itself actually moves. They also only show the menu on the main screens, using the regular up action for sub-activities.

Google+ menu Google+ post

I quite liked how the let the action bar remain in place but I disliked that they didn’t slide the content. They also used the same right caret which is used for up, though this was probably just a mistake. They main difference about their implementation is how they handle the back stack though, they only display the menu on top level activities. This makes the pattern feel like an evolution of the dashboard pattern.

I was in the process of developing an app for Delicious which used spinner navigation but the Google+ implementation made me think again. I felt that you could combine their implementation with others to get the best of all worlds. This is what I came up with:

  • Slide content (Facebook/Spotify)
  • Don’t slide the action bar (Google+)
  • Use different icon for menu (Facebook/Spotify)
  • Display menu on main acitivities only (Google+)
  • Backstack that makes sense (Google+ comes close)
  • Gesture support (Spotify)

Based on these points I implemented the pattern in my app. I used an ActionMode for transforming the action bar, this also gives you automatic handling of the back button for closing the menu.

Menu hidden Menu shown

The app itself is pretty simple but the menu should scale well. The back stack remains simple when only main activities can display the menu. Here is a simple flow chart of the app:

Back stack

The app is fully open source over at Github and it also available at the Play Store.