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