Android animation allows you to change
object properties for a certain time period. Animations are useful when there is a change in the screen state such as loading of content or new actions become available. Animations API allows you to define a start and end value for arbitrary object properties and apply a time-based change to this attribute. In addition to Views, this API can be applied on any Java object. Android Animations can be performed either through XML code or android code.
You need the AnimationListener interface to find Animation Start, Animation End and Animation Repeat. The following example illustrates the basic animations like zoomin, zoomout, fadein, fadeout, slideup, slidedown, blink, move, and rotate by using XML notations. If you want to listen to animation events like start, end and repeat, your activity should implement AnimationListener and you will have to override the following methods:
onAnimationStart ()– This will be triggered once the animation has started.
onAnimationEnd ()– This will be triggered once the animation is over.
onAnimationRepeat() – This will be triggered if the animation repeats.
You can load an animation by calling the loadAnimation() method.
Animation anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_out);
Start an animation on any UI component by calling the
startAnimation()
method.
imageview.startAnimation(anim);
First create a MainActivity.java class under src/<your packagename>.
MainActivity.java:
[java]
MainActivity extends Activity implements AnimationListener{
Context context;
Animation anim;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//set activity content to external view
setContentView(R.layout.activity_main);
context=this;
//find views by Id
final ImageView image=(ImageView)findViewById(R.id.imageView1);
Button zoomin=(Button)findViewById(R.id.button1);
Button zoomout=(Button)findViewById(R.id.button2);
Button fadein=(Button)findViewById(R.id.button3);
Button fadeout=(Button)findViewById(R.id.button4);
Button slideup=(Button)findViewById(R.id.button5);
Button slidedown=(Button)findViewById(R.id.button6);
Button blink=(Button)findViewById(R.id.button7);
Button move=(Button)findViewById(R.id.button8);
Button rotate=(Button)findViewById(R.id.button9);
//on click zoomin
zoomin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
// load the animation
anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_in);
// set animation listener
anim.setAnimationListener(MainActivity.this);
//start animation
image.startAnimation(anim);
}
});
//on click zoomout
zoomout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
// load the animation
anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom_out);
// set animation listener
anim.setAnimationListener(MainActivity.this);
//start animation
image.startAnimation(anim);
}
});
//on click fadein
fadein.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
// load the animation
anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_in);
// set animation listener
anim.setAnimationListener(MainActivity.this);
//start animation
image.startAnimation(anim);
}
});
//on click fadeout
fadeout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
// load the animation
anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_out);
// set animation listener
anim.setAnimationListener(MainActivity.this);
//start animation
image.startAnimation(anim);
}
});
//on click slideup
slideup.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
// load the animation
anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_up);
// set animation listener
anim.setAnimationListener(MainActivity.this);
//start animation
image.startAnimation(anim);
}
});
//on click slidedown
slidedown.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
// load the animation
anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.slide_down);
// set animation listener
anim.setAnimationListener(MainActivity.this);
//start animation
image.startAnimation(anim);
}
});
//on click blink
blink.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
// load the animation
anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.blink);
// set animation listener
anim.setAnimationListener(MainActivity.this);
//start animation
image.startAnimation(anim);
}
});
//on click move
move.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
// load the animation
anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.move);
// set animation listener
anim.setAnimationListener(MainActivity.this);
//start animation
image.startAnimation(anim);
}
});
rotate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
// load the animation
anim = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.rotate);
// set animation listener
anim.setAnimationListener(MainActivity.this);
image.startAnimation(anim);
}
});
}
@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
Toast.makeText(context, "Animation stopped", Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
Toast.makeText(context, "Animation started", Toast.LENGTH_SHORT).show();
}
}
[/java]
Create activty_main.xml under res/layout
activity_main.xml:
[xml]
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#FFFFFF"
>
<ImageView
android:id="@+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_marginTop="20dp"
android:src="@drawable/ic_launcher" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:layout_alignParentBottom="true"
android:layout_marginTop="30dp"
android:gravity="center"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:gravity="center"
>
<Button
android:id="@+id/button1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#009ACD"
android:layout_marginTop="10dp"
android:text="Zoom In" />
<Button
android:id="@+id/button2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#009ACD"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:text="Zoom Out" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:gravity="center"
>
<Button
android:id="@+id/button3"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#009ACD"
android:layout_marginTop="10dp"
android:text="Fade In" />
<Button
android:id="@+id/button4"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#009ACD"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="Fade Out" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:gravity="center"
>
<Button
android:id="@+id/button5"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#009ACD"
android:layout_marginTop="10dp"
android:text="Slide Up" />
<Button
android:id="@+id/button6"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#009ACD"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="Slide Down" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center"
android:gravity="center"
>
<Button
android:id="@+id/button7"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#009ACD"
android:layout_marginTop="10dp"
android:text="Blink" />
<Button
android:id="@+id/button8"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#009ACD"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:text="Move" />
<Button
android:id="@+id/button9"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#009ACD"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:text="Rotate" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
[/xml]
Now create res/anim folder and add the following .xml to it.
fade_in.xml:
[xml]
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="1000"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="1.0" />
</set>
[/xml]
fade_out.xml:
[xml]
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<alpha
android:duration="1000"
android:fromAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
</set>
[/xml]
zoom_in.xml:
[xml]
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="3"
android:toYScale="3" >
</scale>
</set>
[/xml]
zoom_out.xml:
[xml]
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.5"
android:toYScale="0.5" >
</scale>
</set>
[/xml]
slide_up.xml:
[xml]
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true" >
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="@android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="0.0" />
</set>
[/xml]
slide_down.xml:
[xml]
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:interpolator="@android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
[/xml]
blink.xml:
[xml]
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:duration="600"
android:repeatMode="reverse"
android:repeatCount="3"/>
</set>
[/xml]
move.xml:
[xml]
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromXDelta="0%p"
android:toXDelta="75%p"
android:duration="800" />
</set>
[/xml]
rotate.xml:
[xml]
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="600"
android:repeatMode="restart"
android:repeatCount="3"
android:interpolator="@android:anim/cycle_interpolator"/>
</set>
[/xml]
AndroidManifest.xml:
[xml]
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.spl.myproject"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="16" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<!--Launcher Activity -->
<activity
android:name="com.spl.myproject.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>
[/xml]
Output: