XML Animations

Web Hosting

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>

Web Hosting
That's All. Enjoy Coding....!