Click here to Skip to main content
Click here to Skip to main content

Android Sliding Menu

By , 24 Mar 2014
Rate this:
Please Sign up or sign in to vote.

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.

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:

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:

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:

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:

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)

About the Author

Kevin Murani

Kenya Kenya
No Biography provided

Comments and Discussions

 
QuestionGood One PinmemberVivek Johari24-Mar-14 18:52 
Questiontanks PinmemberMember 1043086327-Nov-13 20:10 
QuestionDoing this in tabs PinmemberMember 1021337816-Aug-13 2:53 
QuestionIt works great, when it works PinmemberJerry Jeremiah21-May-13 18:29 
QuestionTranslateanimation with fragment PinmemberMilan Vu2-May-13 0:51 
Questionmaking it slide from right PinmemberMember 100219461-May-13 9:12 
AnswerRe: making it slide from right PinmemberKevin Murani1-May-13 9:56 
QuestionThanks PinmemberMember 995278323-Apr-13 8:53 
AnswerRe: Thanks PinmemberKevin Murani1-May-13 9:34 
GeneralMy vote of 5 PinmemberMihai MOGA12-Apr-13 19:02 

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140415.2 | Last Updated 24 Mar 2014
Article Copyright 2013 by Kevin Murani
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid