Android Facebook style slide

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

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.

I've implemented facebook-like slideout navigation in this library project.

You can easy built it into your application, your UI and navigation. You will need to implement only one Activity and one Fragment, let library know about it - and library will provide all wanted animations and navigation.

Inside the repo you can find demo-project, with how to use the lib to implement facebook-like navigation. Here is short video with record of demo project.

Also this lib should be compatible this ActionBar pattern, because is based on Activities transactions and TranslateAnimations (not Fragments transactions and custom Views).

Right now, the most problem is to make it work well for application, which support both portrait and landscape mode. If you have any feedback, please provide it via github.

All the best,
Alex

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.

https://stackoverflow.com/questions/11234375/how-did-google-manage-to-do-this-slide-actionbar-in-android-application/11367825#11367825

I think facebook app is not written in native code (by native code I mean, using layouts in Android) but they have used webview for it and have used some javascript ui libraries like sencha. It can be easily achieved using sencha framework.

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

I've just implemented similar view for my own project. You can check it here

Here is screen of sample application based on library I wrote:

It is easy to use this custom view as element of XML layout. Here is example:

    <shared.ui.actionscontentview.ActionsContentView
      android:id="@+id/content"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:actions_layout="@layout/actions"
      app:content_layout="@layout/content" />

I you will have any questions about usage of ActionsContentView library I can write a small article at projects Wiki.

Some advantages of this library:

• ability to slide view by touch
• it is easy to adjust size of actions bar in XML
• support of all Android SDK version starting from 2.0 and up

There is one limitation:

• all horizontal scrolling views will not work at bounds of this view

Best regards, Steven

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.

v4 support library

navigation drawer design pattern

Did a roundup of an existing implementation and turned it into a library project plus example app. Also added XML parsing as well as autodetection of a possibly present actionbar, so it works with the native as well as a support action bar such as ActionBarSherlock.

This one also slides the action bar away!

The whole thing is a library project together with an example app and is described over at A sliding Menu for Android like google and facebook apps. Thanks to scirocco for the initial idea and code!

This is simple and elegant: https://github.com/akotoe/android-slide-out-menu.git

Snapshot:

I think that library does not mentioned:

jfeinstein10 / SlidingMenu

github url: https://github.com/jfeinstein10/SlidingMenu

• works fine with action bar ActionBarSherlock which helps in backward compatibility!
• Support right slide and not only slide via button!

Can't comment on the answer given by @Paul Grime yet, anyway I've submitted on his github project the fix for the flicker problem....

I'll post the fix here, maybe someone needs it. You just need to add two lines of code. The first one below the anim.setAnimationListener call:

anim.setFillAfter(true);

And the second one after app.layout() call:

app.clearAnimation();

Hope this helps :)

I've implemented this with AbsoluteLayout and a simple slide controller that moves the view to a negative offset to hide.

If anyone is interested, I can clean up the code/layout and post. I know AbsoluteLayout is deprecated, but it was a very straight forward implementation. Left View/ Right View, and when "sliding open", just move the left view out from a -X offset to the device's width - whatever you want to show of the Right View

> Hello this is best sample demo app which provides facebook like slide > menu. Check the code here

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

Recently I have worked on my sliding menu implementation version. It uses popular J.Feinstein Android library SlidingMenu.

Please check the source code at GitHub:

https://github.com/baruckis/Android-SlidingMenuImplementation

Download app directly to the device to try:

https://play.google.com/store/apps/details?id=com.baruckis.SlidingMenuImplementation

Code should be self-explanatory because of comments. I hope it will be helpful! ;)

I found a simplest way for it and its working. Use simple Navigation drawer and call drawer.setdrawerListner() and use mainView.setX() method in on drawerSlide method below or copy my code.

xml file

 <android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" >

<RelativeLayout
    android:id="@+id/content_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

  <ImageView
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:id="@+id/menu"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_marginTop="10dp"
      android:layout_marginLeft="10dp"
      android:src="@drawable/black_line"
      />
</RelativeLayout>


<RelativeLayout
    android:id="@+id/left_drawer"
    android:layout_width="200dp"
    android:background="#181D21"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    >
    </RelativeLayout>
 </android.support.v4.widget.DrawerLayout>

java file

   public class MainActivity extends AppCompatActivity {
DrawerLayout drawerLayout;
RelativeLayout mainView;
ImageView menu;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    menu=(ImageView)findViewById(R.id.menu);
    drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mainView=(RelativeLayout)findViewById(R.id.content_frame);

    menu.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            drawerLayout.openDrawer(Gravity.LEFT);
        }
    });

    drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
        @Override
        public void onDrawerSlide(View drawerView, float slideOffset) {
            mainView.setX(slideOffset * 300);
        }

        @Override
        public void onDrawerOpened(View drawerView) {

        }

        @Override
        public void onDrawerClosed(View drawerView) {

        }

        @Override
        public void onDrawerStateChanged(int newState) {

        }
    });
 }
}

Thank You

I'm going to make some bold guesses here...

I assume they have a layout that represents the menu that is not visible. When the menu button is tapped, they animate the layout/view on top to move out of the way, and simply enable the visibility of the menu layout. I have not thought about this causing any sort of z-index issues in the views, or how they control that.

Android added the navigation drawer. Refer this

link

Here is the design and development guide found in official android documentation no need to add unofficial external library. Only android support library will do. Find the links here.

design and develop.

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.

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.

I've been playing with this the past few days and I've come up with a solution that's quite straightforward in the end, and which works pre-Honeycomb. My solution was to animate the View I want to slide (FrameLayout for me) and to listen for the end of the animation (at which point to offset the View's left/right position). I've pasted my solution here: https://stackoverflow.com/questions/11188338

After a search for several hours, I found Paul Grime's solution probably is the best one. But it has too much functionality in it. So it may be hard to study for beginners. So I would like to provide my implementation which is came from Paul's idea but it is simpler and should be easy to read.

implementation of side menu bar by using java code without XML

I didn't see the amazing SimonVT/android-menudrawer mentioned anywhere in the above answers. So here's a link

https://github.com/SimonVT/android-menudrawer

Its super easy to use and you can put it on left, right, top or bottom. Very well documented with sample code and Apache 2.0 license.

In June 2012, Google has added "templates" in the Eclipse ADT plugin, and there is a template called "master/detail flow" which does exactly that (based on fragmets)