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
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
MultiQuote
| 