Android Facebook style slide

Question

The new Facebook application and its navigation is so cool. I was just trying to see how it can be emulated in my application.

Anyone has a clue how it can be achieved?

On clicking the the top left button the page slide and the following screen is shown:

YouTube Video

Answer 1

I've had a play with this myself, and the best way I could find was to use a FrameLayout and lay a custom HorizontalScrollView (HSV) on top of the menu. Inside the HSV are your application Views, but there is a transparent View as the first child. This means, when the HSV has zero scroll offset, the menu will show through (and still be clickable surprisingly).

When the app starts up, we scroll the HSV to the offset of the first visible application View, and when we want to show the menu we scroll back to reveal the menu through the transparent View.

The code is here, and the bottom two buttons (called HorzScrollWithListMenu and HorzScrollWithImageMenu) in the Launch activity show the best menus I could come up with:

Android sliding menu demo

Screenshot from emulator (mid-scroll):

Screenshot from device (full-scroll). Note my icon is not as wide as the Facebook menu icon, so the menu view and 'app' view are not aligned.

Answer 2

Here is another lib and seems to be the best in my opinion. I did not write it..

UPDATE:

This code seems to work best for me and it moves the entire Actionbar similar to the G+ app.

How did Google manage to do this? Slide ActionBar in Android application

Answer 3

For info, as the compatibility library starts with 1.6 and this facebook app is also running on devices with Android 1.5, it could not be done with Fragments.

The way you could do it, is : Create a "base" activity BaseMenuActivity where you put all the logic for the onItemClickListener for your menu list and defines the 2 animation ("open" and "close"). At the end/beginning of the animations, you show/hide the layout of the BaseMenuActivity (lets call it menu_layout). The layout for this activity is simple, its only a list with items + a transparent part at the right of your list. This part will be clickable and its width will be the same width as your "move button". With that, you'll be able to click on this layout to start the animation to let the content_layout slide to the left and take the whole screen. For each option (i.e. item of the menu list), you create a "ContentActivity" which extends the BaseMenuActivity. Then when you click on an item of the list, you start your ItemSelectedContentActivity with the menu visible (which you'll close as soon as your activity starts). The layouts for each ContentActivity are FrameLayout and includes the and . You just need to move the content_layout and make the menu_layout visible when you want.

That's a way to do it, and I hope I've been clear enough.

Answer 4

As a part of my Android Common Library (ACL) I implemented own SideBar. Main advantages:

1. Side bar can be set to any position: left, top, bottom, right
2. Both main view and sliding view are clickable
3. Side bar can be partially shown
4. Stylable attributes for SideBar make easier to change it's style
5. Artifact in maven repo
6. Part of a big library

Source code: https://github.com/serso/android-common/tree/master/views/src/main/java/org/solovyev/android/view/sidebar

Usage: https://github.com/serso/android-common/blob/master/samples/res/layout/acl_view_layout.xml

Answer 5

The Facebook Android app is possibly build with Fragments. The menu is one Fragment, the in-depth Activity (Newsfeed/Events/Friends etc) is the other Fragment. Basically a tablet 'master & detail' layout on a phone.

Answer 6

Here is yet another (very nice) open source library!

The good feature about this one is that it is easily integrated with ActionBarSherlock.

Here's the github project link

Here's the Google Play download link