Click here to Skip to main content
15,867,453 members
Articles / Mobile Apps

Android Sliding Menu

Rate me:
Please Sign up or sign in to vote.
4.97/5 (14 votes)
24 Mar 2014CPOL2 min read 312.4K   10.2K   30   11
Android sliding menu.

Introduction

In recent Android applications, the menu which slides in from the left of the screen has become increasingly popular. this article show one how to create a similar menu in a simple way using the TranslateAnimation class.

Background

One needs to understand how the TranslateAnimation class functions first. Its constructor receives four parameters. The first two relate to the X coordinates and the last relate to the Y coordinates. The fie first in each case is the starting point of the animation and the second is the ending point of the animation.

After using it on its own, I noticed that the object in question moved back to its original position. On further examining the code, I realize that the objects position requires to be changed using the LayoutParams class. This ensures that your animation has a permanent effect on the position of the object.

Using the code

One simply needs to determine the position of the content relative to the menu i.e is the menu visible. In my case I use the left margin of the content and a boolean to keep track of this and to determine which parameters will be passed to the TransalteAnimation constructor.

Java
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;
} 

To ensure that the animation is not reverted, the left margin position of the content requires a change as follows:

C++
slide.setAnimationListener(new AnimationListener() {
    public void onAnimationEnd(Animation animation) {
    // Make movement of content permanent after animation has completed 
    contentParams.setMargins(marginX, 0, 0, 0); // by positioning its left margin
    content.setLayoutParams(contentParams);
}

    public void onAnimationRepeat(Animation animation) { }
    public void onAnimationStart(Animation animation) { }
});   

The margin left position can either be 0 or the width of the menu. the width of the menu is obtained as follows:

Java
menu.getLayoutParams().width // this is an integer value

Once the parameters have been determined, the following defined function is called for the menu to either slide in or to slide out:

Java
slideMenuIn(animateFromX, animateToX, marginX); 

Points of Interest

It is best to set the left margin of the content by getting the menu width through code rather than fixed integer values. This will avoid issued with different screen sizes on different devices. One can also prevent the user from accidentally closing an app while trying to hide the menu by pressing the back button as follows:

Java
public boolean onKeyDown(int keyCode, KeyEvent keyEvent) {
    if(keyCode == KeyEvent.KEYCODE_BACK) {
        if(menuOpen) {
        // Slide the menu back if visible and one does not wish to close app but slide it back
            slideMenuIn(0, -(menu.getLayoutParams().width), 
              -(menu.getLayoutParams().width));     // Pass slide in paramters
            menuOpen = false;
            return true;
        }
    }
    return super.onKeyDown(keyCode, keyEvent);
} 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Kenya Kenya
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Questionsliding menu Pin
Member 1095996221-Nov-14 22:52
Member 1095996221-Nov-14 22:52 
QuestionGood One Pin
Vivek Johari24-Mar-14 18:52
Vivek Johari24-Mar-14 18:52 
Questiontanks Pin
Member 1043086327-Nov-13 20:10
Member 1043086327-Nov-13 20:10 
QuestionDoing this in tabs Pin
Member 1021337816-Aug-13 2:53
Member 1021337816-Aug-13 2:53 
QuestionIt works great, when it works Pin
Jerry Jeremiah21-May-13 18:29
Jerry Jeremiah21-May-13 18:29 
QuestionTranslateanimation with fragment Pin
Milan Vu2-May-13 0:51
Milan Vu2-May-13 0:51 
Questionmaking it slide from right Pin
Member 100219461-May-13 9:12
Member 100219461-May-13 9:12 
AnswerRe: making it slide from right Pin
Kevin Murani1-May-13 9:56
Kevin Murani1-May-13 9:56 
QuestionThanks Pin
jcaruso00223-Apr-13 8:53
jcaruso00223-Apr-13 8:53 
AnswerRe: Thanks Pin
Kevin Murani1-May-13 9:34
Kevin Murani1-May-13 9:34 
GeneralMy vote of 5 Pin
Ștefan-Mihai MOGA12-Apr-13 19:02
professionalȘtefan-Mihai MOGA12-Apr-13 19:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.