Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Android development – Custom Animation

DZone's Guide to

Android development – Custom Animation

· Mobile Zone
Free Resource

Get gorgeous, multi-touch charts for your iOS application with just a few lines of code.

To create a customized animation you need to follow these 3 steps. For the explanation, we will create a simple animation that changes the background of a button gradually from black to red.

Step 1 – Extend the Animation class and set the properties
Create a class which extends Android Animation class.
This class will hold the logic of your animation.
See my example:

public class BGColorAnimation extends Animation {

private View view;
private int currentRedColor;

//The steps to skip between colors
private static int STEP_SIZE=30;
private static int ANIMATION_DURATION=50;

public BGColorAnimation(View view) {
this.view=view;
setDuration(ANIMATION_DURATION);
setRepeatCount(255/STEP_SIZE);
setFillAfter(true);
setInterpolator(new AccelerateInterpolator());

setAnimationListener(new MyAnimationListener());
}
}

 

  • As you see, there is not much in this class since my animation is not that complicated.
  • Notice that I have made all the necessary animation parameters initialization from inside the constructor, but you can defiantly initialize them from outside the class.
  • There are 2 important parameters which determines the behavior of the animation:
    1. RepeatCount – the number of steps this animation has.
    2. Duration – the sleep time between 2 steps.
  • On each step, the animation listener will be triggered.

Step 2 – Implement AnimationListener interface
Create a class which implements Animation.AnimationListener.
As mentioned, it is triggered on each animation step.

class MyNumbersAnimationListener implements AnimationListener{
private int index;

class MyAnimationListener implements AnimationListener{

@Override
public void onAnimationEnd(Animation animation) {

}

@Override
public void onAnimationRepeat(Animation animation) {
// Change color of the view
view.setBackgroundColor(
Color.rgb(currentRedColor+=STEP_SIZE, 0, 0));
}

@Override
public void onAnimationStart(Animation animation) {
view.setBackgroundColor(Color.BLACK);
currentRedColor=0;
}

}

In fact, I see no reason why not doing both steps in the same class:

public class BGColorAnimation extends Animation implements
Animation.AnimationListener {

private View view;
private int currentRedColor;

// The steps to skip between colors
private static int STEP_SIZE= 30;
private static int ANIMATION_DURATION = 50;

public BGColorAnimation(View view) {
this.view = view;
setDuration(ANIMATION_DURATION);
setRepeatCount(255 / STEP_SIZE);
setFillAfter(true);
setInterpolator(new AccelerateInterpolator());

setAnimationListener(this);
}

@Override
public void onAnimationEnd(Animation animation) {

}

@Override
public void onAnimationRepeat(Animation animation) {
view.setBackgroundColor(
Color.rgb(currentRedColor += STEP_SIZE, 0, 0));
}

@Override
public void onAnimationStart(Animation animation) {
view.setBackgroundColor(Color.BLACK);
currentRedColor = 0;
}

}

Step 3 – Start the animation from a view
Animations are triggered from a view.
Example:

Button button = (Button)findViewById(R.id.b_colors);
button.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
button.startAnimation(new BGColorAnimation(button));
}
});

 zip Download demo project

.Net developers: use Highcharts, the industry's leading interactive charting library, without writing a single line of JavaScript.

Topics:

Published at DZone with permission of Avi Yehuda, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}