Facebook Menu

Java Code (Main Activity Class)

public class LayerStack extends Activity {

//Declare
private LinearLayout slidingPanel;
private boolean isExpanded;
private DisplayMetrics metrics;
private ListView listView;
private RelativeLayout headerPanel;
private RelativeLayout menuPanel;
private int panelWidth;
private ImageView menuViewButton;

FrameLayout.LayoutParams menuPanelParameters;
FrameLayout.LayoutParams slidingPanelParameters;
LinearLayout.LayoutParams headerPanelParameters ;
LinearLayout.LayoutParams listViewParameters;


@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_layer_stack);

//Initialize
metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
panelWidth = (int) ((metrics.widthPixels)*0.75);

headerPanel = (RelativeLayout) findViewById(R.id.header);
headerPanelParameters = (LinearLayout.LayoutParams) headerPanel.getLayoutParams();
headerPanelParameters.width = metrics.widthPixels;
headerPanel.setLayoutParams(headerPanelParameters);

menuPanel = (RelativeLayout) findViewById(R.id.menuPanel);
menuPanelParameters = (FrameLayout.LayoutParams) menuPanel.getLayoutParams();
menuPanelParameters.width = panelWidth;
menuPanel.setLayoutParams(menuPanelParameters);

slidingPanel = (LinearLayout) findViewById(R.id.slidingPanel);
slidingPanelParameters = (FrameLayout.LayoutParams) slidingPanel.getLayoutParams();
slidingPanelParameters.width = metrics.widthPixels;
slidingPanel.setLayoutParams(slidingPanelParameters);

listView = (ListView) findViewById(R.id.list);
listViewParameters = (LinearLayout.LayoutParams) listView.getLayoutParams();
listViewParameters.width = metrics.widthPixels;
listView.setLayoutParams(listViewParameters);


//Slide the Panel
menuViewButton = (ImageView) findViewById(R.id.menuViewButton);
menuViewButton.setOnClickListener(new OnClickListener() {
   public void onClick(View v) {
    if(!isExpanded){
    isExpanded = true;              
       
    //Expand
    new ExpandAnimation(slidingPanel, panelWidth,
       Animation.RELATIVE_TO_SELF, 0.0f,
       Animation.RELATIVE_TO_SELF, 0.75f, 0, 0.0f, 0, 0.0f);              
    }else{
    isExpanded = false;
   
    //Collapse
    new CollapseAnimation(slidingPanel,panelWidth,
               TranslateAnimation.RELATIVE_TO_SELF, 0.75f,
               TranslateAnimation.RELATIVE_TO_SELF, 0.0f, 0, 0.0f, 0, 0.0f);
 

    }          
   }
});

}
}


Java Code ( CollapseAnimation Class)

public class CollapseAnimation extends TranslateAnimation implements TranslateAnimation.AnimationListener{

private LinearLayout slidingLayout;
int panelWidth;

public CollapseAnimation(LinearLayout layout, int width, int fromXType, float fromXValue, int toXType,
float toXValue, int fromYType, float fromYValue, int toYType, float toYValue) {

super(fromXType, fromXValue, toXType, toXValue, fromYType, fromYValue, toYType, toYValue);

//Initialize
slidingLayout = layout;
     panelWidth = width;
setDuration(400);
   setFillAfter( false );
   setInterpolator(new AccelerateDecelerateInterpolator());
   setAnimationListener(this);
 
   //Clear left and right margins
   LayoutParams params = (LayoutParams) slidingLayout.getLayoutParams();
    params.rightMargin = 0;
    params.leftMargin = 0;
    slidingLayout.setLayoutParams(params);
    slidingLayout.requestLayout();      
    slidingLayout.startAnimation(this);
   
}
public void onAnimationEnd(Animation animation) {

}

public void onAnimationRepeat(Animation animation) {

}

public void onAnimationStart(Animation animation) {

}

}




Java Code (ExpandAnimation)

public class ExpandAnimation extends TranslateAnimation implements Animation.AnimationListener{

private LinearLayout slidingLayout;
int panelWidth;

public ExpandAnimation(LinearLayout layout, int width, int fromXType, float fromXValue, int toXType,
float toXValue, int fromYType, float fromYValue, int toYType, float toYValue) {

super(fromXType, fromXValue, toXType, toXValue, fromYType, fromYValue, toYType, toYValue);

//Initialize
slidingLayout = layout;
panelWidth = width;
setDuration(400);
     setFillAfter( false );
     setInterpolator(new AccelerateDecelerateInterpolator());
     setAnimationListener(this);
     slidingLayout.startAnimation(this);
}


public void onAnimationEnd(Animation arg0) {

//Create margin and align left
LayoutParams params = (LayoutParams) slidingLayout.getLayoutParams();
    params.leftMargin = panelWidth;
    params.gravity = Gravity.LEFT;  
    slidingLayout.clearAnimation();
    slidingLayout.setLayoutParams(params);
    slidingLayout.requestLayout();
   
}

public void onAnimationRepeat(Animation arg0) {

}

public void onAnimationStart(Animation arg0) {

}

}

XML (Main Activity XML)

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="match_parent" 

    android:layout_weight="1"

    android:background="@drawable/blue_bg">

    <!-- Menu Panel -->

    <RelativeLayout

           android:id="@+id/menuPanel"

           android:layout_height="match_parent"

           android:layout_width="wrap_content"

           android:gravity="right"

           android:background="@drawable/gray_bg"

           android:orientation="vertical" >

       

            <TextView

                android:id="@+id/menu_title_1"

                android:layout_width="fill_parent"

                android:layout_height="50dp"

                android:layout_alignParentTop="true"

                android:layout_marginLeft="0dp" 

                android:paddingLeft="15dp"             

                android:gravity="center_vertical"

                android:background="#353535"

                android:textColor="@android:color/white"

                android:text="@string/menu_title">     

            </TextView>

               

            <View

       android:id="@+id/menu_item_divider_1"

       android:layout_width="fill_parent"

       android:layout_height="0.5dp"

       android:layout_marginLeft="0dp"

       android:layout_marginRight="0dp"

       android:layout_below="@+id/menu_title_1"

       android:background="#b5b5b5"/>

            

            <TextView

                android:id="@+id/menu_item_1"

                android:layout_width="fill_parent"

                android:layout_height="50dp"

                android:layout_marginLeft="15dp"             

                android:gravity="center_vertical"

                android:layout_below="@+id/menu_item_divider_1"

                android:text="@string/item_1">     

            </TextView>     

             <View

       android:id="@+id/menu_item_divider_2"

       android:layout_width="fill_parent"

       android:layout_height="0.5dp"

       android:layout_marginLeft="5dp"

       android:layout_marginRight="5dp"

       android:layout_below="@+id/menu_item_1"

       android:background="#b5b5b5"/> 

            <TextView

                android:id="@+id/menu_item_2"

                android:layout_width="fill_parent"

                android:layout_height="50dp"

                android:layout_below="@+id/menu_item_divider_2"

                android:layout_marginLeft="15dp"

                android:gravity="center_vertical"

                android:text="@string/item_2">

            </TextView>

            <View

       android:id="@+id/menu_item_divider_3"

       android:layout_width="fill_parent"

       android:layout_height="0.5dp"

       android:layout_marginLeft="5dp"

       android:layout_marginRight="5dp"

       android:layout_below="@+id/menu_item_2"

       android:background="#b5b5b5" />           

            </RelativeLayout>

            

       <!-- Sliding Panel -->     

<LinearLayout

                android:id="@+id/slidingPanel"

                android:layout_width="fill_parent"

                android:layout_height="fill_parent"

                android:gravity="left"

                android:orientation="vertical"

                android:background="@android:color/white" >

        

        <RelativeLayout

           android:id="@+id/header"

           android:layout_width="match_parent"

           android:layout_height="50dp"

           android:background="@drawable/blue_bg" >

          <View

               android:id="@+id/header_vertical_divider_1"

               android:layout_width="2dp"

               android:layout_height="fill_parent"

               android:layout_alignParentTop="true"

               android:layout_marginLeft="15dp"

               android:layout_toRightOf="@+id/menuViewButton"

               android:background="@drawable/engraved_bg" />

  

           <ImageView

               android:id="@+id/menuViewButton"

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:layout_alignParentLeft="true"

               android:layout_centerVertical="true"

               android:layout_marginLeft="15dp"

               android:clickable="true"

               android:contentDescription="@string/description"

               android:src="@drawable/icon_menu"

               android:visibility="visible" />

  </RelativeLayout>

        <View

    android:id="@+id/dividerHeaderBottom"

    android:layout_width="fill_parent"

    android:layout_height="1dp"

    android:background="#414141" />

       <ListView

           android:id="@+id/list"

           android:layout_width="match_parent"

           android:layout_height="fill_parent"

           android:divider="#b5b5b5"

           android:dividerHeight="0.5dp"

           android:background="@android:color/white"

            >

       </ListView>

</LinearLayout>

</FrameLayout>

Download Source Code