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

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

Answer 2

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

Answer 3

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.

Answer 4

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 :)

Answer 5

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

Snapshot:

Answer 6

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