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"?>

<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"?>

<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>

</intent-filter>

</activity>

</application>

</manifest>

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

Android Tutorial

XML Animations

Android Working with XML Animations

Basic steps to perform animation

Step 1: Create xml that defines the animation

Step 2: Create xml Animation as what you see in Image

Step 3: Here is the FadeInActivity.java

Step 4: Android Layout

Step 5: AndroidManifiest.xml

No comments:

Post a Comment