Android Working with XML Animations
Adding animations to your app interface will give high quality feel to your android applications. Animations can be performed through either XML or android code. In this tutorial i explained how to do animations using XML notations. I will explain how to do the same using android java code in future tutorials. Here i covered basic android animations like fade in, fade out, scale, rotate, slide up, slide down etc.,
See Figure:
Basic steps to perform animation
Following are the basic steps to perform an animation on any UI element. Creating animation is very simple, all it needs is creating necessary files and write small pieces of code.
Step 1: Create xml that defines the animation
Create an xml file which defines type of animation to perform. This file should be located under anim folder under res directory (res ⇒ anim ⇒ animation.xml). If you don’t have anim folder in your res directory create one. Following is example of simple fade in animation.
Step 2: Create xml Animation as what you see in Image
blink.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="infinite"/>
</set>
bounce.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/bounce_interpolator">
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
fade_in.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>
fade_out.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>
move.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>
rotate.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="infinite"
android:interpolator="@android:anim/cycle_interpolator"/>
</set>
slide_down.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>
slide_up.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>
zoom_in.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>
zoom_out.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>
Step 3: Here is the FadeInActivity.java
I already display all the codes on animating each animation here.
package com.example.animations;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.Animation.AnimationListener;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
public class FadeInActivity extends Activity implements AnimationListener, OnClickListener {
TextView txtMessage;
Button fade_in, fade_out, blink, zoom_in, zoom_out, rotate, move, slide_up, slide_down, bounce;
// Animation
Animation animFadein, animfade_out, animblink, animzoom_in, animzoom_out,
animrotate, animmove, animslide_up, animslide_down, animbonce;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_animation);
initializeVars();
animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_in);
animfade_out = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_out);
animblink = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.blink);
animzoom_in = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.zoom_in);
animzoom_out = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.zoom_out);
animrotate = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.rotate);
animslide_up = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.slide_up);
animslide_down = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.slide_down);
animbonce = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.bounce);
animmove = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.move);
animFadein.setAnimationListener(this);
animfade_out.setAnimationListener(this);
animblink.setAnimationListener(this);
animzoom_in.setAnimationListener(this);
animzoom_out.setAnimationListener(this);
animrotate.setAnimationListener(this);
animslide_up.setAnimationListener(this);
animslide_down.setAnimationListener(this);
animbonce.setAnimationListener(this);
animmove.setAnimationListener(this);
fade_in.setOnClickListener(this);
fade_out.setOnClickListener(this);
blink.setOnClickListener(this);
zoom_in.setOnClickListener(this);
zoom_out.setOnClickListener(this);
rotate.setOnClickListener(this);
move.setOnClickListener(this);
slide_up.setOnClickListener(this);
slide_down.setOnClickListener(this);
bounce.setOnClickListener(this);
}
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
switch(arg0.getId()){
case R.id.fade_in:
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animFadein);
break;
case R.id.fade_out:
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animfade_out);
break;
case R.id.blink:
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animblink);
break;
case R.id.zoom_in:
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animzoom_in);
break;
case R.id.zoom_out:
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animzoom_out);
break;
case R.id.rotate:
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animrotate);
break;
case R.id.move:
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animmove);
break;
case R.id.slide_up:
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animslide_up);
break;
case R.id.slide_down:
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animslide_down);
break;
case R.id.bounce:
txtMessage.setVisibility(View.VISIBLE);
// start the animation
txtMessage.startAnimation(animbonce);
break;
}
}
public void initializeVars() {
txtMessage = (TextView) findViewById(R.id.txtMessage);
fade_in = (Button) findViewById(R.id.fade_in);
fade_out = (Button) findViewById(R.id.fade_out);
blink = (Button) findViewById(R.id.blink);
zoom_in = (Button) findViewById(R.id.zoom_in);
zoom_out = (Button) findViewById(R.id.zoom_out);
rotate = (Button) findViewById(R.id.rotate);
move = (Button) findViewById(R.id.move);
slide_up = (Button) findViewById(R.id.slide_up);
slide_down = (Button) findViewById(R.id.slide_down);
bounce = (Button) findViewById(R.id.bounce);
}
@Override
public void onAnimationEnd(Animation animation) {
// Take any action after completing the animation
// check for fade in animation
if (animation == animFadein) {
}
if (animation == animfade_out) {
}
if (animation == animblink) {
}
if (animation == animzoom_in) {
}
if (animation == animzoom_out) {
}
if (animation == animrotate) {
}
if (animation == animslide_up) {
}
if (animation == animslide_down) {
}
if (animation == animbonce) {
}
if (animation == animmove) {
Toast.makeText(getApplicationContext(), "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
}
}
Step 4: Android Layout
activity_animation.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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".FadeInActivity" >
<TextView
android:id="@+id/txtMessage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
<Button
android:id="@+id/fade_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/txtMessage"
android:layout_below="@+id/txtMessage"
android:layout_marginTop="18dp"
android:text="Fade In" />
<Button
android:id="@+id/fade_out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/fade_in"
android:layout_alignBottom="@+id/fade_in"
android:layout_toRightOf="@+id/fade_in"
android:text="Fade Out" />
<Button
android:id="@+id/cross_feeding"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/fade_in"
android:layout_below="@+id/fade_in"
android:text="Cross Fading" />
<Button
android:id="@+id/blink"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/fade_out"
android:layout_alignBottom="@+id/fade_out"
android:layout_toRightOf="@+id/fade_out"
android:text="Blink" />
<Button
android:id="@+id/zoom_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/cross_feeding"
android:layout_alignBottom="@+id/cross_feeding"
android:layout_toRightOf="@+id/cross_feeding"
android:text="Zoom In" />
<Button
android:id="@+id/zoom_out"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/cross_feeding"
android:layout_below="@+id/cross_feeding"
android:text="Zoom Out" />
<Button
android:id="@+id/rotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/zoom_out"
android:layout_alignBottom="@+id/zoom_out"
android:layout_centerHorizontal="true"
android:text="Rotate" />
<Button
android:id="@+id/move"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/rotate"
android:layout_alignBottom="@+id/rotate"
android:layout_toRightOf="@+id/rotate"
android:text="Move" />
<Button
android:id="@+id/slide_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/zoom_out"
android:layout_below="@+id/zoom_out"
android:text="Slide Up" />
<Button
android:id="@+id/slide_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/slide_up"
android:layout_alignBottom="@+id/slide_up"
android:layout_alignRight="@+id/zoom_in"
android:text="Slide Down" />
<Button
android:id="@+id/bounce"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/slide_up"
android:layout_below="@+id/slide_up"
android:text="Bounce" />
</RelativeLayout>
Step 5: AndroidManifiest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.animations"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.animations.FadeInActivity"
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>
That's All. Enjoy Coding....!