Sliding menu in android

Sliding menu android

It’s very useful for creating menu option with easy navigation.Sliding menu android is hidden normally and show when you press the menu button with slide animation.It’s very useful to save your page space.In this example, you don’t need to import any lib. The most of the top application having sliding menu android like Gmail, Facebook, google plus etc.

 

Sliding Menu Android

                Sliding Menu Demo

You can also develop the sliding menu with navigation drawer.


Related Post: Android Navigation Drawer Material Design with Example [Latest]

Related Post: Android Bottom Navigation Material Design with Example [Updated]


Step 1
This the code for check whether the menu is visible or and execute the slide in or out animation
if(contentParams.leftMargin == -(menu.getLayoutParams().width)) {
            // Menu is hidden (slide out parameters)
            animateFromX = 0;
            animateToX = (menu.getLayoutParams().width);
            marginX = 0;
            menuOpen = true;
        } else {
            // Menu is visible (slide in parameter)
            animateFromX = 0;
            animateToX = -(menu.getLayoutParams().width);
            marginX = -(menu.getLayoutParams().width);
            menuOpen = false;
        }
        slideMenuIn(animateFromX, animateToX, marginX);
This is the slideMenuIn method for setting properties for the animation.
public void slideMenuIn(int animateFromX, int animateToX, final int marginX){
        slide = new TranslateAnimation(animateFromX, animateToX, 0, 0);
        slide.setDuration(300);
        slide.setFillEnabled(true);
        slide.setAnimationListener(new AnimationListener() {
            // Make movement of content permanent after animation has completed
            public void onAnimationEnd(Animation animation) {
                // by positioning its left margin
                contentParams.setMargins(marginX, 0, 0, 0);
                content.setLayoutParams(contentParams);
            }

            public void onAnimationRepeat(Animation animation) { }
            public void onAnimationStart(Animation animation) { }
        });
        // Slide menu in or out
        content.startAnimation(slide);
    }

Step 2

activity_main.xml having the layout for both sliding menu and Content Layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/menu"
        android:layout_width="150dip"
        android:layout_height="fill_parent"
        android:background="#9b9a9a"
        android:orientation="vertical" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="2dip"
            android:layout_marginTop="50dip"
            android:background="#000" />

        <ListView
            android:id="@+id/slider_listview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:cacheColorHint="@android:color/transparent"
            android:divider="@null"
            android:dividerHeight="2dp"
            android:fadingEdge="none"
            android:listSelector="@android:color/transparent" >
        </ListView>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <RelativeLayout
            android:id="@+id/RelativeLayout1"
            android:layout_width="match_parent"
            android:layout_height="50dip"
            android:background="@color/colorPrimary"
            android:orientation="horizontal" >

            <ImageButton
                android:id="@+id/menu_button"
                android:layout_width="50dip"
                android:layout_height="50dip"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:contentDescription="@string/app_name"
                android:src="@drawable/options" />

            <TextView
                android:id="@+id/TextView1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_alignBaseline="@+id/menu_button"
                android:layout_alignParentTop="true"
                android:layout_toRightOf="@+id/menu_button"
                android:gravity="center_vertical"
                android:padding="5dp"
                android:textStyle="bold"
                android:text="@string/app_name"
                android:textColor="@android:color/white"
                android:textSize="24dip" />

        </RelativeLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="2dip"
            android:background="#000" />

        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </FrameLayout>
        
    </LinearLayout>

</LinearLayout>

 Step 3 

Handle the menu item listview click event and display the relevant fragment for the menu in your MainActivity.

private void setFragment(int position){
        Fragment fragment = null;
        android.app.FragmentManager fragmentManager = getFragmentManager();
        switch (position){
            case 0:
                fragment = new InboxFragment();
                break;
            case 1:
                fragment = new SentFragment();
                break;
        }
        fragmentManager.beginTransaction().replace(R.id.frameLayout, fragment).commit();
    }

Final MainActivity.java

package com.rajaappstore.slidingmenu;

import android.app.Activity;
import android.app.Fragment;
import android.content.Context;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.TranslateAnimation;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ArrayAdapter;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends Activity {

    private LinearLayout content, menu;
    private LinearLayout.LayoutParams contentParams;
    private TranslateAnimation slide;
    private int marginX, animateFromX, animateToX = 0;
    private boolean menuOpen = false;
    private ListView sliderLisview;
    private Context context;
    private ImageButton menuButton;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        context=this;

        sliderLisview = (ListView)findViewById(R.id.slider_listview);
        menu = (LinearLayout)findViewById(R.id.menu);
        content = (LinearLayout)findViewById(R.id.content);
        contentParams = (LinearLayout.LayoutParams)content.getLayoutParams();
        // Ensures constant width of content during menu sliding
        contentParams.width = getWindowManager().getDefaultDisplay().getWidth();
        // Position the content at the start of the screen
        contentParams.leftMargin = -(menu.getLayoutParams().width);
        content.setLayoutParams(contentParams);

        ArrayAdapter<String> menuAdapter = new ArrayAdapter<String>(context, android.R.layout.simple_list_item_1, AppConstants.names);
        sliderLisview.setAdapter(menuAdapter);

        menuButton = (ImageButton) findViewById(R.id.menu_button);
        menuButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                openOrCloseSlider();
            }
        });

        sliderLisview.setOnItemClickListener(new OnItemClickListener()
        {
            public void onItemClick(AdapterView<?> arg0, View arg1, int position,
                    long arg3) {
                // TODO Auto-generated method stub
                Toast.makeText(getApplicationContext(),AppConstants.names[position], Toast.LENGTH_SHORT).show();
                setFragment(position);
                openOrCloseSlider();
            }
        });
        openOrCloseSlider();
    }

    private void setFragment(int position){
        Fragment fragment = null;
        android.app.FragmentManager fragmentManager = getFragmentManager();
        switch (position){
            case 0:
                fragment = new InboxFragment();
                break;
            case 1:
                fragment = new SentFragment();
                break;
        }
        fragmentManager.beginTransaction().replace(R.id.frameLayout, fragment).commit();
    }

    private void openOrCloseSlider(){

        if(contentParams.leftMargin == -(menu.getLayoutParams().width)) {
            // Menu is hidden (slide out parameters)
            animateFromX = 0;
            animateToX = (menu.getLayoutParams().width);
            marginX = 0;
            menuOpen = true;
        } else {
            // Menu is visible (slide in parameter)
            animateFromX = 0;
            animateToX = -(menu.getLayoutParams().width);
            marginX = -(menu.getLayoutParams().width);
            menuOpen = false;
        }
        slideMenuIn(animateFromX, animateToX, marginX);
    }
        
    public void slideMenuIn(int animateFromX, int animateToX, final int marginX){
        slide = new TranslateAnimation(animateFromX, animateToX, 0, 0);
        slide.setDuration(300);
        slide.setFillEnabled(true);
        slide.setAnimationListener(new AnimationListener() {
            // Make movement of content permanent after animation has completed
            public void onAnimationEnd(Animation animation) {
                // by positioning its left margin
                contentParams.setMargins(marginX, 0, 0, 0);
                content.setLayoutParams(contentParams);
            }

            public void onAnimationRepeat(Animation animation) { }
            public void onAnimationStart(Animation animation) { }
        });
        // Slide menu in or out
        content.startAnimation(slide);
    }

    public boolean onKeyDown(int keyCode, KeyEvent keyEvent) {
        if(keyCode == KeyEvent.KEYCODE_BACK) {
            if(menuOpen) {
                // Pass slide in paramters
                slideMenuIn(0, -(menu.getLayoutParams().width), -(menu.getLayoutParams().width));
                menuOpen = false;
                return true;
            }
        }
        return super.onKeyDown(keyCode, keyEvent);
    }
}

AppConstants.java

public class AppConstants {
    static String[] names={"Inbox","Sent"};
}

InboxFragment.java

public class InboxFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.inbox_fragment,container,false);
    }
}

SentFragment.java

public class SentFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.sent_fragment,container,false);
    }
}
Screenshot
Sliding menu androidSliding menu android
Download

Leave a Reply

Your email address will not be published. Required fields are marked *