Tuesday, June 5, 2012

How to make Facebook"s app new menu on Android?


Recently Facebook released a new version of its Android application that features an improved navigation. One main new feature is the new menu (that already existed on the iOS version):



enter image description here



By clicking on the home button of the Action Bar, this menu slides from left to right, hiding the main activity that is no longer accessible.



How do you think this menu has been made? Do you think they have just played with the SlidingDrawer or is it something else like a ViewPager ?



Thanks!



EDIT



There is no way that it could be one of the two ( ViewPager or SlidingDrawer ). It's not the menu that slides in, it's the main screen that moves away leaving only a tiny part of it on the screen. It's like if the menu was already behind that main screen and that it just got uncovered. And second thing, we can actually still interact with that main screen (otherwise I would have assumed that they took a screenshot in order to cut a tiny part of it to compose that view).


Source: Tips4all

4 comments:

  1. I've also implemented this myself in the sample app mentioned in this answer.

    Android facebook style slide

    ReplyDelete
  2. Almost everything except the photo taking parts is inside a WebView in the new FB app. I could not find any native Android UI controls in the stream or the lists.

    Making the same effect using Javascript/HTML/CSS should be quite easy I feel.

    Decompiling the apk would give a better idea.

    ReplyDelete
  3. I was looking for implementing the same thing and I came up with a solution that is good enough (or maybe is really near what they have done).

    So what I did was a single FrameLayout with both of the Layouts stacked together and then I just animate the top layout to slide to the right of the screen (just need to call the slideTo or scrollBy. And basically it's that! Quite simple and effective!

    EDIT:

    I've answered to a similar question here with some code samples, enjoy =): Click here

    ReplyDelete
  4. You can build this application style using javascript, HTML5 and CSS3 like it shows this little library "jbackbone-mobile", https://github.com/mjromper/jbackbone-mobile

    and see this demo from any browser (device or desktop) http://lab.ochio.com.es/jbackbone/index.html

    ReplyDelete