Home › Uncategorized

Implement slide top-down vertical animation

The exercise "Implement slide-in and slide-out animation" implement horizontal animation using build in animation xml android.R.anim.slide_in_left and android.R.anim.slide_out_right. Currently, there are no build-in vertical animation xml supported. To implement vertical animation, create it by ourself.

/res/anim/slidedown_in.xml

<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromYDelta="-50%" android:toYDelta="0.0" android:duration="1000" />

/res/anim/slidedown_out.xml

<?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromYDelta="0.0" android:toYDelta="50%" android:duration="1000" />

Layout.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ImageView android:id="@+id/image1" android:layout_width="wrap_content" android:layout_height="match_parent" android:src="@drawable/ic_launcher" android:visibility="invisible" /> <ImageView android:id="@+id/image2" android:layout_width="wrap_content" android:layout_height="match_parent" android:src="@drawable/ic_launcher" android:visibility="invisible" /> <ImageView android:id="@+id/image3" android:layout_width="wrap_content" android:layout_height="match_parent" android:src="@drawable/ic_launcher" android:visibility="invisible" /> </LinearLayout>

Main code.

package com.exercise.androidanimation; import android.os.Bundle; import android.app.Activity; import android.view.View; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.AnimationUtils; import android.widget.ImageView; public class MainActivity extends Activity { ImageView image1, image2, image3; Animation animationSlideDownIn, animationSlideDownOut; ImageView curSlidingImage; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); image1 = (ImageView)findViewById(R.id.image1); image2 = (ImageView)findViewById(R.id.image2); image3 = (ImageView)findViewById(R.id.image3); animationSlideDownIn = AnimationUtils.loadAnimation(this, R.anim.slidedown_in); animationSlideDownOut = AnimationUtils.loadAnimation(this, R.anim.slidedown_out); animationSlideDownIn.setAnimationListener(animationSlideInListener); animationSlideDownOut.setAnimationListener(animationSlideOutListener); curSlidingImage = image1; image1.startAnimation(animationSlideDownIn); image1.setVisibility(View.VISIBLE); } @Override protected void onPause() { // TODO Auto-generated method stub super.onPause(); image1.clearAnimation(); image2.clearAnimation(); image3.clearAnimation(); } AnimationListener animationSlideInListener = new AnimationListener(){ @Override public void onAnimationEnd(Animation arg0) { // TODO Auto-generated method stub if(curSlidingImage == image1){ image1.startAnimation(animationSlideDownOut); }else if(curSlidingImage == image2){ image2.startAnimation(animationSlideDownOut); }else if(curSlidingImage == image3){ image3.startAnimation(animationSlideDownOut); } } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationStart(Animation animation) { // TODO Auto-generated method stub } }; AnimationListener animationSlideOutListener = new AnimationListener(){ @Override public void onAnimationEnd(Animation animation) { // TODO Auto-generated method stub if(curSlidingImage == image1){ curSlidingImage = image2; image2.startAnimation(animationSlideDownIn); image1.setVisibility(View.INVISIBLE); image2.setVisibility(View.VISIBLE); image3.setVisibility(View.INVISIBLE); }else if(curSlidingImage == image2){ curSlidingImage = image3; image3.startAnimation(animationSlideDownIn); image1.setVisibility(View.INVISIBLE); image2.setVisibility(View.INVISIBLE); image3.setVisibility(View.VISIBLE); }else if(curSlidingImage == image3){ curSlidingImage = image1; image1.startAnimation(animationSlideDownIn); image1.setVisibility(View.VISIBLE); image2.setVisibility(View.INVISIBLE); image3.setVisibility(View.INVISIBLE); } } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationStart(Animation animation) { // TODO Auto-generated method stub } }; }