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.  

 Collapse  |  Copy Code

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: 

 Collapse  |  Copy Code

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:

 Collapse  |  Copy Code

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: 

 Collapse  |  Copy Code

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:

 Collapse  |  Copy Code

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