Animation Examples

Adding Animation will improve your app's quality and look and feel.Animations are especially useful when the screen changes state, such as when content loads or new actions become available. This tutorial shows you how to implement some common types of animations that can increase usability.

Fade-In Animation

Create an XML that defines Animation
              
Create a folder naming anim under res folder. Add your xml file  defining your animation(fade_in.xml) in this folder.
res --> anim --> fade_in.xml

Main Activity.java


package com.example.animation;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class FadeInActivity extends Activity implements AnimationListener {

ImageView animated_Img;
Button btnStart;

// Animation
Animation animFadein;

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fadein);

animated_Img = (ImageView) findViewById(R.id.imgView);

btnStart = (Button) findViewById(R.id.btnStart);

// load the animation
animFadein = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade_in);

// set animation listener
animFadein.setAnimationListener(this);

// button click event
btnStart.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
animated_Img.setVisibility(View.VISIBLE);

// start the animation
animated_Img.startAnimation(animFadein);
}
});

}

@Override
public void onAnimationEnd(Animation animation) {
// Take any action after completing the animation

// check for fade in animation
if (animation == animFadein) {
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

}

}

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>

Output

             

Below given are xml files of Other common animations like fade out, rotate, blink, bounce, flip, move, slide up, slide down.

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>

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>

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>

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>

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>

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>