XML animation

Anim with XML on click button android example

Hello friends, In this android tutorial i explained how to give animations using XML.Creating animation is very simple to give animation effect on object. Animations can be performed through either XML or JAVA code.Here i covered basic animations like fade in, fade out, scale, rotate, slide up-down etc.

Let's go for coding - CREATE NEW ANDROID PROJECT

Step 1: Create xml for  perform animation

This file should be located res/anim/animation.xml. If you don’t have anim folder in your res/ directory create one. Following is example of simple animation using XML.

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="2"/>

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

flip.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">

    <scale

        android:interpolator="@android:anim/linear_interpolator"

        android:fromXScale="1.0"

        android:toXScale="1.0"

        android:fromYScale="1.0"

        android:toYScale="0.0"

        android:pivotY="100%"

        android:fillAfter="false"

        android:duration="200" />

    <translate

        android:fromYDelta="1.0"

        android:toYDelta="100%"

        android:duration="300"/>

</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="4"

        android:interpolator="@android:anim/cycle_interpolator"/>

</set>

sequential.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/linear_interpolator" >

    <!-- Use startOffset to give delay between animations -->

    <!-- Move -->

    <translate

        android:duration="800"

        android:fillAfter="true"

        android:fromXDelta="0%p"

        android:startOffset="300"

        android:toXDelta="75%p" />

    <translate

        android:duration="800"

        android:fillAfter="true"

        android:fromYDelta="0%p"

        android:startOffset="1100"

        android:toYDelta="70%p" />

    <translate

        android:duration="800"

        android:fillAfter="true"

        android:fromXDelta="0%p"

        android:startOffset="1900"

        android:toXDelta="-75%p" />

    <translate

        android:duration="800"

        android:fillAfter="true"

        android:fromYDelta="0%p"

        android:startOffset="2700"

        android:toYDelta="-70%p" />

    <!-- Rotate 360 degrees -->

    <rotate

        android:duration="1000"

        android:fromDegrees="0"

        android:interpolator="@android:anim/cycle_interpolator"

        android:pivotX="50%"

        android:pivotY="50%"

        android:repeatCount="infinite"

        android:repeatMode="restart"

        android:startOffset="3800"

        android:toDegrees="360" />

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

together.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/linear_interpolator" >

    <!-- Use startOffset to give delay between animations -->

    <!-- Move -->

    <scale

        xmlns:android="http://schemas.android.com/apk/res/android"

        android:duration="4000"

        android:fromXScale="1"

        android:fromYScale="1"

        android:pivotX="50%"

        android:pivotY="50%"

        android:toXScale="2"

        android:toYScale="2" >

    </scale>

    <!-- Rotate 180 degrees -->

    <rotate

        android:duration="500"

        android:fromDegrees="0"

        android:pivotX="50%"

        android:pivotY="50%"

        android:repeatCount="4"

        android:repeatMode="restart"

        android:toDegrees="360" />

</set>

wav_scale2.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:interpolator="@android:anim/linear_interpolator" >

    <alpha

        android:duration="100"

        android:fromAlpha="0.0"

        android:toAlpha="1.0" />

    <scale

        android:duration="200"

        android:fromXScale="0.5"

        android:fromYScale="0.5"

        android:pivotX="50%"

        android:pivotY="50%"

        android:toXScale="1.5"

        android:toYScale="1.5" />

    <scale

        android:duration="100"

        android:fromXScale="1.5"

        android:fromYScale="1.5"

        android:pivotX="50%"

        android:pivotY="50%"

        android:startOffset="200"

        android:toXScale="1.0"

        android:toYScale="1.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 2: Write code into activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent" >

    <LinearLayout

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_margin="2dp"

        android:layout_weight="1"

        android:orientation="vertical" >

        <Button

            android:id="@+id/Blink"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="blink" />

        <Button

            android:id="@+id/Fadein"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="fade in" />

        <Button

            android:id="@+id/Flip"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="flip" />

        <Button

            android:id="@+id/Rotate"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="rotate" />

        <Button

            android:id="@+id/Slidedown"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="slide down" />

        <Button

            android:id="@+id/Together"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="together" />

        <Button

            android:id="@+id/Zoomin"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="zoom in" />

    </LinearLayout>

    <LinearLayout

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_margin="2dp"

        android:layout_weight="1"

        android:orientation="vertical" >

        <Button

            android:id="@+id/Bounce"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="bounce" />

        <Button

            android:id="@+id/Fadeout"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="fade out" />

        <Button

            android:id="@+id/Move"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="move" />

        <Button

            android:id="@+id/Sequential"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="sequential" />

        <Button

            android:id="@+id/Slideup"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="slide up" />

        <Button

            android:id="@+id/Wavscale"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="wav scale" />

        <Button

            android:id="@+id/Zoomout"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="zoom out" />

    </LinearLayout>

</LinearLayout>

Step 3: Write code into MainActivity.java

package adm.emprovantiontechsol.animwithxml;

import android.os.Bundle;

import android.app.Activity;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.Button;

import android.widget.Toast;

public class MainActivity extends Activity {

// register button

Button blink, bounce, fadein, fadeout, flip, move, rotate, sequential,

slidedown, slideup, together, wavscale, zoomin, zoomout;

// register xml animation file

Animation blinkanim, bounceanim, fadeinanim, fadeoutanim, flipanim,

moveanim, rotateanim, sequeanim, slidedownanim, slideupanim,

togetheranim, wavscaleanim, zoominanim, zoomoutanim;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// load the animation

blinkanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.blink);

bounceanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.bounce);

fadeinanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.fade_in);

fadeoutanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.fade_out);

flipanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.flip);

moveanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.move);

rotateanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.rotate);

sequeanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.sequential);

slidedownanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.slide_down);

slideupanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.slide_up);

togetheranim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.together);

wavscaleanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.wav_scale2);

zoominanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.zoom_in);

zoomoutanim = AnimationUtils.loadAnimation(getApplicationContext(),

R.anim.zoom_out);

// register button

blink = (Button) findViewById(R.id.Blink);

// blink.startAnimation(blinkanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

bounce = (Button) findViewById(R.id.Bounce);

// bounce.startAnimation(bounceanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

fadein = (Button) findViewById(R.id.Fadein);

// fadein.startAnimation(fadeinanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

fadeout = (Button) findViewById(R.id.Fadeout);

// fadeout.startAnimation(fadeoutanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

flip = (Button) findViewById(R.id.Flip);

// flip.startAnimation(flipanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

move = (Button) findViewById(R.id.Move);

// move.startAnimation(moveanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

rotate = (Button) findViewById(R.id.Rotate);

// rotate.startAnimation(rotateanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

sequential = (Button) findViewById(R.id.Sequential);

// sequential.startAnimation(sequeanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

slidedown = (Button) findViewById(R.id.Slidedown);

// slidedown.startAnimation(slidedownanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

slideup = (Button) findViewById(R.id.Slideup);

// slideup.startAnimation(slideupanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

together = (Button) findViewById(R.id.Together);

// together.startAnimation(togetheranim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

wavscale = (Button) findViewById(R.id.Wavscale);

// wavscale.startAnimation(wavscaleanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

zoomin = (Button) findViewById(R.id.Zoomin);

// zoomin.startAnimation(zoominanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

zoomout = (Button) findViewById(R.id.Zoomout);

// zoomout.startAnimation(zoomoutanim); "Uncomment if you want to start automatic anim at lunching app/activity and comment button click event"

//Implement button click invent

blink.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

blink.startAnimation(blinkanim);

Toast.makeText(getApplicationContext(), "blink animation",

Toast.LENGTH_SHORT).show();

}

});

bounce.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

bounce.startAnimation(bounceanim);

Toast.makeText(getApplicationContext(), "bounce animation",

Toast.LENGTH_SHORT).show();

}

});

fadein.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

fadein.startAnimation(fadeinanim);

Toast.makeText(getApplicationContext(), "fadein animation",

Toast.LENGTH_SHORT).show();

}

});

fadeout.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

fadeout.startAnimation(fadeoutanim);

Toast.makeText(getApplicationContext(), "fadeout animation",

Toast.LENGTH_SHORT).show();

}

});

flip.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

flip.startAnimation(flipanim);

Toast.makeText(getApplicationContext(), "flip animation",

Toast.LENGTH_SHORT).show();

}

});

move.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

move.startAnimation(moveanim);

Toast.makeText(getApplicationContext(), "move animation",

Toast.LENGTH_SHORT).show();

}

});

rotate.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

rotate.startAnimation(rotateanim);

Toast.makeText(getApplicationContext(), "rotate animation",

Toast.LENGTH_SHORT).show();

}

});

sequential.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

sequential.startAnimation(sequeanim);

Toast.makeText(getApplicationContext(), "sequential animation",

Toast.LENGTH_SHORT).show();

}

});

slidedown.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

slidedown.startAnimation(slidedownanim);

Toast.makeText(getApplicationContext(), "slidedown animation",

Toast.LENGTH_SHORT).show();

}

});

slideup.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

slideup.startAnimation(slideupanim);

Toast.makeText(getApplicationContext(), "slideup animation",

Toast.LENGTH_SHORT).show();

}

});

together.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

together.startAnimation(togetheranim);

Toast.makeText(getApplicationContext(), "together animation",

Toast.LENGTH_SHORT).show();

}

});

wavscale.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

wavscale.startAnimation(wavscaleanim);

Toast.makeText(getApplicationContext(), "wav scale animation",

Toast.LENGTH_SHORT).show();

}

});

zoomin.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

zoomin.startAnimation(zoominanim);

Toast.makeText(getApplicationContext(), "zoomin animation",

Toast.LENGTH_SHORT).show();

}

});

zoomout.setOnClickListener(new Button.OnClickListener() {

@Override

public void onClick(View arg0) {

//start anim on click button

zoomout.startAnimation(zoomoutanim);

Toast.makeText(getApplicationContext(), "zoomout animation",

Toast.LENGTH_SHORT).show();

}

});

}

}

NOTE: No need any special permission in AndroidManifest.xml

Step 4: now run project and see Output:

Download complete project to see animation: