Copy File Animation In Android

Android Framework provides a very easy way to incorporate animation in your applications. An animation used correctly enhances the user experience and is increases user retention. These animation can easily be defined in XML and used in the applications

Today I will show you how to create the classic copy file animation that we have seen growing up in windows.

Step :1

Create the anim folder inside the res folder of your application.

Step 2:

Create the copy_anim.xml.

Lets have a look at that file


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="false"
>

<!-- Use startOffset to give delay between animations -->
<!-- Move -->
<alpha
android:duration="600"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="1.0" />

<translate
android:duration="1200"
android:fromYDelta="0%p"
android:toYDelta="-5%p"
android:startOffset="250"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="10%p"
android:toXDelta="30%p" />

<translate
android:duration="1200"
android:fromYDelta="0%p"
android:startOffset="1450"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="0%p"
android:toXDelta="50%p"
android:toYDelta="5%p" />

<alpha
android:duration="600"
android:fromAlpha="1.0"
android:startOffset="2500"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />

</set>

The file contains a set of animation chained together , that occur as per their defined time.

The first animation is alpha from 0 to 1. This is a fade in animation which starts from full transparency

alpha = 0 to full opacity at alpha = 1. This basically means that the object will change from being invisible to being fully visible.

This will take place in time duration 600 mili seconds .

The next animation is translate . This will move the object “or translate” the co-ordinates from given X , Y values to some final X,Y values. This also has a time duration parameter , also interesting to note is the startOffset parameter . This starts the animation at the given offset.

If you notice the first translate animation starts before the alpha animation completes. This gives the effect of the file slowly appearing from the source and moving simultaneously.

Next two animations translate and alpha just carries on from there , in such a way that the file will disappear on reaching the destination folder.

Now lets move on the java code ,

Step 3 :

We have to load the animation and then start it. In this example I have loaded the animation inside a dialogue .

Lets see the code


private void showDialog()
{
dialog = new Dialog(this);
dialog.setCancelable(false);
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog.setContentView(R.layout.copy_file);

&nbsp;

file = (ImageView) dialog.findViewById(R.id.file);

progress = (ProgressBar)dialog.findViewById(R.id.progressBar1);

text = (TextView) dialog.findViewById(R.id.text);

text.setText("Copying files .................");

dialog.show();
// load the animation
animSequential = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.copy_anim);

// set animation listener
animSequential.setAnimationListener(this);
file.startAnimation(animSequential);
}

The important thing to note here is the animation listener it has

three callbacks onAnimationStart( ) ,onAnimationEnd( ) and onAnimationRepeat( )

In the example I am re-starting this animation till the progress bar has reached 100 %.

You can download the full source code here.

This how it looks on my emulator