Creating 4 different Tween Animation effects In Android
Creating 4 different Tween Animation effects In Android
Step 1 : Select
File -> New -> Project -> Android Application Project (or)
Android Project. Fill the forms and click "Finish" button. If you have
any doubt regarding create a new project Click Here.
Step 2 : Open res -> layout -> activity_main.xml (or) main.xml and add following code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<Button
android:id="@+id/Scale"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_below="@+id/Alpha"
android:layout_toLeftOf="@+id/Translate"
android:text="Scale" />
<Button
android:id="@+id/Translate"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/Rotate"
android:layout_below="@+id/Alpha"
android:text="Translate" />
<Button
android:id="@+id/Complex"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="50dp"
android:layout_marginRight="14dp"
android:text="Complex" />
<Button
android:id="@+id/Rotate"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/Complex"
android:layout_alignBottom="@+id/Complex"
android:layout_toLeftOf="@+id/Complex"
android:text="Rotate" />
<Button
android:id="@+id/Alpha"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/Rotate"
android:layout_alignBottom="@+id/Rotate"
android:layout_toLeftOf="@+id/Rotate"
android:text="Alpha" />
<ImageView
android:id="@+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignRight="@+id/Rotate"
android:layout_below="@+id/textView1"
android:layout_marginRight="46dp"
android:layout_marginTop="67dp"
android:src="@drawable/ic_launcher" />
</RelativeLayout>
Step 3 : Open src -> package -> alpha.xml and add following code :
<?xml version="1.0" encoding="utf-8"?>
<alpha
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1" android:toAlpha="0.3" android:duration="2000" android:repeatCount="3">
</alpha>
Step 4 : Open src -> package -> MainActivity.java and add following code :
package com.gudivada.hemanthsomaraju;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.RotateAnimation;
import android.widget.Button;
import android.widget.ImageView;
public class MainActivity extends Activity {
private ImageView imageView;
// define animationType enum
enum AnimationType{
Alpha,
Rotate,
Scale,
Translate,
Complex
}
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//define 4 button for each tween animation
imageView = (ImageView)findViewById(R.id.imageView);
Button alpha = (Button)findViewById(R.id.Alpha);
alpha.setOnClickListener(new AnimationClickListener(AnimationType.Alpha));
Button rotate = (Button)findViewById(R.id.Rotate);
rotate.setOnClickListener(new AnimationClickListener(AnimationType.Rotate));
Button scale = (Button)findViewById(R.id.Scale);
scale.setOnClickListener(new AnimationClickListener(AnimationType.Scale));
Button translate = (Button)findViewById(R.id.Translate);
translate.setOnClickListener(new AnimationClickListener(AnimationType.Translate));
Button complex = (Button)findViewById(R.id.Complex);
complex.setOnClickListener(new AnimationClickListener(AnimationType.Complex));
}
// create a listener inner class
class AnimationClickListener implements OnClickListener{
private AnimationType animationType;
public AnimationClickListener(AnimationType animType){
animationType = animType;
}
public void onClick(View v) {
// TODO Auto-generated method stub
switch (animationType) {
case Alpha:
//Alpha animation. repeat 5 times, last for 1 mins
AlphaAnimation alphaAnimation = (AlphaAnimation)AnimationUtils.loadAnimation(MainActivity.this, R.layout.alpha);
imageView.startAnimation(alphaAnimation);
break;
case Rotate:
//rotate animation
RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(3000);
rotateAnimation.setRepeatCount(3);
//start animation
imageView.startAnimation(rotateAnimation);
break;
case Scale:
//scale animation
ScaleAnimation scaleAnimation = new ScaleAnimation(1, 1.5f, 1, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(3000);
scaleAnimation.setRepeatCount(3);
//start animation
imageView.startAnimation(scaleAnimation);
break;
case Translate:
//translate animation
TranslateAnimation translateAnimation = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2);
translateAnimation.setDuration(3000);
translateAnimation.setRepeatCount(3);
//start animation
imageView.startAnimation(translateAnimation);
break;
case Complex:
//four animation overlap
AnimationSet sets = new AnimationSet(false);
AlphaAnimation _animation1 = new AlphaAnimation(1f, 0.1f);
_animation1.setDuration(3000);
RotateAnimation rotateAnimation1 = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation1.setDuration(3000);
ScaleAnimation scaleAnimation1 = new ScaleAnimation(1, 1.5f, 1, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation1.setDuration(3000);
TranslateAnimation translateAnimation1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 2);
translateAnimation1.setDuration(3000);
sets.addAnimation(_animation1);
sets.addAnimation(rotateAnimation1);
sets.addAnimation(scaleAnimation1);
sets.addAnimation(translateAnimation1);
imageView.startAnimation(sets);
break;
default:
break;
}
}
}
}
Step 5 : Open AndroidManifest.xml and add following code :
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.gudivada.hemanthsomaraju"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="4"
/>
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.gudivada.hemanthsomaraju.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Step 6 : Our output will be like this :