Built.io Blog

Creating Custom Loading Animations for Android

,

 good mobile app is often characterized by fluid animation and a clean user interface. App performance obviously matters, but if an app is difficult to use because of a poorly designed user interface, the app is pretty much useless. A few trend-setting mobile apps such as Google+, Path, and Foursquare are known for their amazing user interfaces. What makes these mainstream applications so successful is that they have their own unique loading animation. It's pretty straightforward to implement these kinds of loading animations and customize them for your own look.

Take a look at some of these popular animations:

loading.gif

The Android framework provides two animation systems: property animation (introduced in Android 3.0) and view animation. Both systems are viable options, but property animation is the preferred method to use because it's flexible and offers more features.

Property Animation

A property animation changes a property's (a field in an object) value over a specified length of time. To animate something, you specify the object property that you want to animate, such as an object's position on the screen, how long you want to animate it for, and what values you want to animate between.

This sample app shows you how to implement a property animation:

java
PropertyValuesHolder myView_Y = PropertyValuesHolder.ofFloat(myView.TRANSLATION_Y, -40.0f);
PropertyValuesHolder myView_X = PropertyValuesHolder.ofFloat(myView.TRANSLATION_X, 0);
ObjectAnimator waveOneAnimator = ObjectAnimator.ofPropertyValuesHolder(myView, myView_X, myView_Y);
waveOneAnimator.setRepeatCount(-1);        // -1 for infinite
waveOneAnimator.setRepeatMode(ValueAnimator.REVERSE);
waveOneAnimator.setDuration(300);
waveOneAnimator.start();

Implementing an animation

java
PropertyValuesHolder myView_Y = PropertyValuesHolder.ofFloat(myView.TRANSLATION_Y, -40.0f);
PropertyValuesHolder myView_X = PropertyValuesHolder.ofFloat(myView.TRANSLATION_X, 0);
ObjectAnimator waveOneAnimator = ObjectAnimator.ofPropertyValuesHolder(myView, myView_X, myView_Y); 

In the above example we use the PropertyValuesHolder class to animate the Y-coordinate in the view. Here we are translating the Y-coordinate by -40 and keeping the X-coordinate at 0.

ObjectAnimator is a subclass of ValueAnimator, which provides support for animating properties on a target view.

Looping an animation

java
waveOneAnimator.setRepeatCount(-1); // -1 for infinite

The setRepeatCount(int n) method is used to set the animation count. Here -1 means infinite and 0 means only once. If n>0, then the animation will be repeated n times. Another way to repeat an animation is by using listeners:

waveOneAnimator.addListener(new AnimatorListener() {

    @Override
    public void onAnimationStart(Animator animation) {}
    @Override
    public void onAnimationRepeat(Animator animation) {}
    @Override
    public void onAnimationEnd(Animator animation) {
        waveOneAnimator.start();    // infinite loop.
    }
    @Override
    public void onAnimationCancel(Animator animation) {}
});

Run multiple animations together, or independently.

To animate sequentially, use:

java
AnimatorSet animatorSet1 = new AnimatorSet();
animatorSet1.playSequentially(valueAnimatorOne, valueAnimatorTwo, valueAnimatorThree); 
animatorSet1.start();

To animate all animations at the same time, use:

java
AnimatorSet animatorSet1 = new AnimatorSet();
animatorSet1.playTogether(valueAnimatorOne, valueAnimatorTwo, valueAnimatorThree);
animatorSet1.start(); 

You can download this sample app from GitHub.

Subscribe to our blog