Page 1 of 1

How to create a Slide-in MenuList, like in Facebook App

#1 EndLessMind  Icon User is offline

  • These are the droids you're looking for
  • member icon

Reputation: 194
  • View blog
  • Posts: 1,099
  • Joined: 13-March 09

Posted 10 March 2012 - 11:29 AM

Hello everyone. This is my first tutorial, and i would like to start things of by learning people how to save screen-area in their apps.

Introduction
So, you have all see the Facebook app for Android.
It got a slide-in Menu on the left side. This is a grate function that lets the user access a grate amount of options
without eating up the screen-area more then when you need to access these options.
Without further ado, i'm going to show you have to make your own slide-in MenuList.


The basic Layout
Okey, so lets start out with the layout.
What do we need and how do we arrange it?

Lets first create a new Android project and name it "com.tutorial.menuList"
and the build target for Android 2.2, and next set the following:
Application name: Tutorial MenuList
Package name: com.tutorial.menuList
Create Activity (Checked): MainActivity
Then press Finish.

Go to res->layout and open the file main.xml
This is the layout we are going to work with.
We are going to need a FramLayout what contains 3 linearLayout
the first on is Horizontal and the other is Vertical.
The second linearLayout has it's width set to 0, and the third has a width set to match_parent.
The third also contains a TableRow with a LinearLayout and a Button.
The button is going to toggle the state of the MenuList.

Here is the xml-layout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >


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



        <LinearLayout
            android:id="@+id/linearLayout2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="0.01"
            android:orientation="vertical" >

        </LinearLayout>

            <LinearLayout
                android:id="@+id/linearLayout3"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="0.99"
                android:orientation="vertical" >
  <TableRow
                    android:id="@+id/tableRow1"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout5"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
"
                    

        

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ToggleMenu"
            android:layout_marginTop="2dp" />
    </LinearLayout>

                </TableRow>

</LinearLayout>
</LinearLayout>
</FrameLayout>



The Animations
Next of, we are going to create the animations that are going to Expand and Collapse our MenuList.
Start of with creating a new package in the src-folder and call it com.tutorial.menuList.animations
In this package are a going to create 2 new classes:
ExpandAnimation.java and CollapseAnimation.java

Lets start of with the ExpandAnimation-class

package com.tutorial.menuList.animations;

import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.widget.Toast;

public class ExpandAnimation extends Animation implements Animation.AnimationListener {
	private View view;
	private static int ANIMATION_DURATION;
	private int LastWidth;
	private int FromWidth;
	private int ToWidth;
	private static int STEP_SIZE=30;
	public ExpandAnimation(View v, int FromWidth, int ToWidth, int Duration) {
		
		this.view = v;
		ANIMATION_DURATION = 1;
		this.FromWidth = FromWidth;
		this.ToWidth = ToWidth;
		setDuration(ANIMATION_DURATION);
		setRepeatCount(20);
		setFillAfter(false);
		setInterpolator(new AccelerateInterpolator());
		setAnimationListener(this);
	}

	public void onAnimationend(Animation anim) {
		// TODO Auto-generated method stub
		
	}

	public void onAnimationrepeat(Animation anim) {
		// TODO Auto-generated method stub
		LayoutParams lyp =  view.getLayoutParams();
		lyp.width = LastWidth +=ToWidth/20;
		view.setLayoutParams(lyp);
	}

	public void onAnimationstart(Animation anim) {
		// TODO Auto-generated method stub
		LayoutParams lyp =  view.getLayoutParams();
		lyp.width = 0;
		view.setLayoutParams(lyp);
		LastWidth = 0;
	}

}


Okey, so this code is dead simple.
We created a class that extends Animation and implements AnimationListeners
Then we set a some variables like: FromWidth, ToWidth, Duration etc.
Then we Resets when the animation starts, and update the view on each repeat(Steps).

And for the CollapseAnimation, we do the same thing, but in reverse.

package com.tutorial.menuList.animations;

import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;

public class CollapseAnimation extends Animation implements Animation.AnimationListener {

	private View view;
	private static int ANIMATION_DURATION;
	private int LastWidth;
	private int FromWidth;
	private int ToWidth;
	private static int STEP_SIZE=30;
	public CollapseAnimation(View v, int FromWidth, int ToWidth, int Duration) {
		
		this.view = v;
		LayoutParams lyp =  view.getLayoutParams();
		ANIMATION_DURATION = 1;
		this.FromWidth = lyp.width;
		this.ToWidth = lyp.width;
		setDuration(ANIMATION_DURATION);
		setRepeatCount(20);
		setFillAfter(false);
		setInterpolator(new AccelerateInterpolator());
		setAnimationListener(this);
	}

	public void onAnimationend(Animation anim) {
		// TODO Auto-generated method stub
		
	}

	public void onAnimationrepeat(Animation anim) {
		// TODO Auto-generated method stub
		LayoutParams lyp =  view.getLayoutParams();
		lyp.width = lyp.width - ToWidth/20;
		view.setLayoutParams(lyp);
	}

	public void onAnimationstart(Animation anim) {
		// TODO Auto-generated method stub
		LayoutParams lyp =  view.getLayoutParams();
		LastWidth = lyp.width;
	}

}


And again, it's dead simple. Just like the ExpandAnimation code, but we are now reducing the width.

Yeah, i know i'm moving fast through this, but it's quite a a lot of code.
But bear with me, we are almost done :)

Applying The Animations
So, now that we have the layout and the Animations complete, we only need to make them work together when we press the button.
Now, let's go to src->com.tutorial.menuList and open the file MainAcitvity.java

The only code in that Activity right now, is this

package com.tutorial.menuList;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}


This is the code that auto-generates for each Activity.
We, are going to change it to this.

package com.tutorial.menuList;

import com.tutorial.menuList.animations.ExpandAnimation;
import com.tutorial.menuList.animations.CollapseAnimation;

import android.app.Activity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.View.onclickListener;
import android.widget.Button;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
	private LinearLayout MenuList;
	private Button btnToggleMenuList;
	private int screenWidth;
	private boolean isExpanded;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        MenuList = (LinearLayout) findViewById(R.id.linearLayout2);
        btnToggleMenuList = (Button) findViewById(R.id.button1);
        DisplayMetrics metrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metrics);
        screenWidth = metrics.widthPixels;
        btnToggleMenuList.setonclickListener(new onclickListener() {
        	public void onclick(View v) {
        		if (isExpanded) {
        			isExpanded = false;
        			MenuList.startAnimation(new CollapseAnimation(MenuList, 0,(int)(screenWidth*0.7), 20));
        		}else {
            		isExpanded = true;
            		MenuList.startAnimation(new ExpandAnimation(MenuList, 0,(int)(screenWidth*0.7), 20));
        		}
        		}
        });
    }
}

and again. The code is dead simple.
We assign some values, set some variables (screenWidth and isExpanded), set a onclickListener
and set up the animations depending on the state of the MenuList (linearLayout)
And of curse, we get the screen width.
In this code, i've set the menu to cover 70% of the screen, that's because i think it looks good on both a Phone, and a tablet.
This can easily be changes by changing this (int)(screenWidth*0.7)


Okey, so if you run it now, i should work, but you only see the button move. So, let's paint the new Menu white.

Go in to res->values and dubbleclick on strings.
Then press add->color
Set name to "White" and value to "#FFFFFF" and then save.
Go in to out layout, res->layout->main.xml
On the right side of the screen, you'll have the "outline" box that show alls the element on your layout.
Select linearLayout2, right-click->other properties->All by name->background
Here you select color->White, and press OK
Now run the app again.

So, now you have created a slide-in MenuList, or well, it's not a list just yet, or might not be at all.
Now it's up to you. Add what ever you any in that LinearLayout

This is the finish product of this tutorial
Attached Image


Hope this can be helpful, and i hope you the best of luck, making android software.

Cheers, EndLessMind



Edit:
Here is the source code :)

This post has been edited by EndLessMind: 14 March 2012 - 05:40 PM


Is This A Good Question/Topic? 3
  • +

Replies To: How to create a Slide-in MenuList, like in Facebook App

#2 Dogstopper  Icon User is offline

  • The Ninjaducky
  • member icon



Reputation: 2874
  • View blog
  • Posts: 11,032
  • Joined: 15-July 08

Posted 12 March 2012 - 07:11 AM

TO USERS:

Please note that due to forum software bugs, some names of methods and classes are displayed incorrectly. Make sure that when using this code that you rename them, following proper java convention.
Was This Post Helpful? 1
  • +
  • -

#3 H3R3T1C  Icon User is offline

  • Android Expert
  • member icon

Reputation: 277
  • View blog
  • Posts: 757
  • Joined: 30-March 07

Posted 12 March 2012 - 01:23 PM

Great tutorial!
Was This Post Helpful? 0
  • +
  • -

#4 EndLessMind  Icon User is offline

  • These are the droids you're looking for
  • member icon

Reputation: 194
  • View blog
  • Posts: 1,099
  • Joined: 13-March 09

Posted 12 March 2012 - 03:34 PM

Thanks :)
Was This Post Helpful? 0
  • +
  • -

#5 EndLessMind  Icon User is offline

  • These are the droids you're looking for
  • member icon

Reputation: 194
  • View blog
  • Posts: 1,099
  • Joined: 13-March 09

Posted 14 March 2012 - 05:41 PM

Just want to notify everyone that i've now added a link to download the source code :)
Was This Post Helpful? 0
  • +
  • -

#6 jcy29  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 26-August 12

Posted 26 August 2012 - 09:37 AM

hello
The link of download doens't work, error 403 of Dropbox!
Was This Post Helpful? 0
  • +
  • -

#7 EndLessMind  Icon User is offline

  • These are the droids you're looking for
  • member icon

Reputation: 194
  • View blog
  • Posts: 1,099
  • Joined: 13-March 09

Posted 27 August 2012 - 05:48 PM

Here is a new download link :)
Attached File  com.tutorial.menuList.zip (61.75K)
Number of downloads: 2725
Was This Post Helpful? 0
  • +
  • -

#8 Messidev  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 24-January 13

Posted 24 January 2013 - 10:40 AM

Where and how do I put a "voice" in the menu list? I have to insert the item + the query on my db!
Was This Post Helpful? 0
  • +
  • -

#9 Messidev  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 24-January 13

Posted 30 January 2013 - 08:11 AM

How put the items on the menu posted ?
Was This Post Helpful? 0
  • +
  • -

#10 GLeonio  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 11-March 13

Posted 12 March 2013 - 06:36 PM

Thanks for this great tutorial! I compiled a list of some top resources on creating a dynamic Android sliding menu. I included your post. Check it out/ feel free to share. http://www.verious.c...nu-for-android/ Hope other developers find it useful too. :)
Was This Post Helpful? 0
  • +
  • -

#11 poppinchamp  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 22-May 13

Posted 22 May 2013 - 08:24 PM

How do I adjust the animation transition faster from expanding and collapsing? I already changed the ANIMATION_DURATION but it is still slow for me. I also changed
Duration
in
public CollapseAnimation(View v, int FromWidth, int ToWidth, int Duration)
but nothing changes. How would I also expand that it would look like it was hidden from the left and reveals itself when moving to the right, not expanding and collapsing because it would move the menulist texts inside.
Was This Post Helpful? 0
  • +
  • -

#12 ketybrown  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 15-January 11

Posted 10 September 2013 - 10:56 PM

View Postpoppinchamp, on 22 May 2013 - 08:24 PM, said:

How do I adjust the animation transition faster from expanding and collapsing? I already changed the ANIMATION_DURATION but it is still slow for me. I also changed
Duration
in
public CollapseAnimation(View v, int FromWidth, int ToWidth, int Duration)
but nothing changes. How would I also expand that it would look like it was hidden from the left and reveals itself when moving to the right, not expanding and collapsing because it would move the menulist texts inside.



Hello. Did you eventually solve this problem?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1