Layout Animation Android[Facebook]
I want to Animate two Different layouts.
Example
I already have the animation the way I want, I just want to animate a different XML Layout. There is a class LayoutAnimationController, but I really dont know how to use it. Can some one point me in the right direction, with an example or good explanation.
heres the code I use to animate.
TranslateAnimation slide = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 300f, 0,0 );
slide.setAnimationListener(AL);
slide.setFillAfter(true);
slide.setDuration(1000);
parentlayout.startAnimation(slide);
Update Because of the many up-votes I decided to put a example project into a Git repository. See my answers for the link.
Answer
Ok After spending 2 days reading about similair problems and how people solved them I finally was able to create the thing I wanted. I was not able to do it with 2 diffrent XML files, but I doubt it is not possible.
I did encountert some problems tho.
After the first animation ended, the button was not clickable. This is because the animation shows that everything is moved but it does not update the layout, so the button is still at the position where the animation started. So I had to calculate the new position of the layout.
I think I read somewhere that this is no longer an issue in 3.0, but correct me if I am wrong
Another was that when I had my animation finally working the way I wanted my underlaying view did disapear before the animation was finished because I invoked view.setVisabilty(View.GONE);.
Now the problem was when I did not invoke that method, the animation just hang for a second and then shooter to the end position of the animation.
So I added a empty LinearLayout (can be anything) , Default property on GONE, when the animation starts set it on Visible. when you revert the animation, set it again to gone.
after doing this the animation was working the way I wanted.
And if you are using a Rel, Linear, or any other layout. then you cant stack views in the Z order so you have to use an SurfaceView.
so heres main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<SurfaceView
android:id="@+id/surfaceView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<RelativeLayout
android:id="@+id/layout"
android:layout_width="220dp"
android:layout_height="fill_parent"
android:background="#ffee00"
android:orientation="vertical" >
<LinearLayout
android:id="@+id/fake_layouy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" android:visibility="gone">
</LinearLayout>
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</RelativeLayout>
<RelativeLayout
android:id="@+id/layoutTwo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff00ee"
android:orientation="vertical">
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:background="#ff0000" android:layout_margin="2dp">
<Button
android:id="@+id/button"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:text="slide" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
heres the java code
public class MenuAnimationActivity extends Activity {
private Button buttonSwitch;
private View subLayout;
private View topLayout;
private ListView subViewListView;
private String listViewDummyContent[]={"Android","iPhone","BlackBerry","AndroidPeople"};
private Display display;
private View fakeLayout;
private AnimationListener AL;
// Values for after the animation
private int oldLeft;
private int oldTop;
private int newleft;
private int newTop;
private int screenWidth;
private int animToPostion;
// TODO change the name of the animToPostion for a better explanation.
private boolean menuOpen = false;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
buttonSwitch = (Button)findViewById(R.id.button);
subLayout = (View) findViewById(R.id.layout);
topLayout = (View) findViewById(R.id.layoutTwo);
subViewListView=(ListView)findViewById(R.id.listView1);
fakeLayout = (View)findViewById(R.id.fake_layouy);
subViewListView.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1 , listViewDummyContent));
display = getWindowManager().getDefaultDisplay();
screenWidth = display.getWidth();
int calcAnimationPosition = (screenWidth /3);
// Value where the onTop Layer has to animate
// also the max width of the layout underneath
// Set Layout params for subLayout according to calculation
animToPostion = screenWidth - calcAnimationPosition;
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(animToPostion, RelativeLayout.LayoutParams.FILL_PARENT);
subLayout.setLayoutParams(params);
topLayout.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN) {
if (menuOpen == true) {
animSlideLeft();
}
}
return false;
}
});
buttonSwitch.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(menuOpen == false){
animSlideRight();
} else if (menuOpen == true) {
animSlideLeft();
}
}
});
AL = new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
buttonSwitch.setClickable(false);
topLayout.setEnabled(false);
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation animation) {
if(menuOpen == true) {
Log.d("", "Open");
topLayout.layout(oldLeft, oldTop, oldLeft + topLayout.getMeasuredWidth(), oldTop + topLayout.getMeasuredHeight() );
menuOpen = false;
buttonSwitch.setClickable(true);
topLayout.setEnabled(true);
} else if(menuOpen == false) {
Log.d("","FALSE");
topLayout.layout(newleft, newTop, newleft + topLayout.getMeasuredWidth(), newTop + topLayout.getMeasuredHeight() );
topLayout.setEnabled(true);
menuOpen = true;
buttonSwitch.setClickable(true);
}
}
};
}
public void animSlideRight(){
fakeLayout.setVisibility(View.VISIBLE);
newleft = topLayout.getLeft() + animToPostion;
newTop = topLayout.getTop();
TranslateAnimation slideRight = new TranslateAnimation(0,newleft,0,0);
slideRight.setDuration(500);
slideRight.setFillEnabled(true);
slideRight.setAnimationListener(AL);
topLayout.startAnimation(slideRight);
}
public void animSlideLeft() {
fakeLayout.setVisibility(View.GONE);
oldLeft = topLayout.getLeft() - animToPostion;
oldTop = topLayout.getTop();
TranslateAnimation slideLeft = new TranslateAnimation(newleft,oldLeft,0,0);
slideLeft.setDuration(500);
slideLeft.setFillEnabled(true);
slideLeft.setAnimationListener(AL);
topLayout.startAnimation(slideLeft);
}
}
I did some extra coding on touching views and stuff.
And the final result
before Animation
after First Animation
And after the second Animation back to the left it states returns as the first Image.
Al those posts that helped me really deserve some credit but I cant find any of them.
Edit
GIT https://bitbucket.org/maikelbollemeijer/sidepanelswitcher
Update: https://github.com/jfeinstein10/SlidingMenu this lib is compatible with Actionbar Sherlock.
hope this helps