Animate Progressbar Update in Android

Animate ProgressBar update in Android

I used android Animation for this:

public class ProgressBarAnimation extends Animation{
    private ProgressBar progressBar;
    private float from;
    private float  to;

    public ProgressBarAnimation(ProgressBar progressBar, float from, float to) {
        super();
        this.progressBar = progressBar;
        this.from = from;
        this.to = to;
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);
        float value = from + (to - from) * interpolatedTime;
        progressBar.setProgress((int) value);
    }

}

and call it like so:

ProgressBarAnimation anim = new ProgressBarAnimation(progress, from, to);
anim.setDuration(1000);
progress.startAnimation(anim);

Note: if from and to value are too low to produce smooth animation just multiply them by a 100 or so. If you do so, don't forget to multiply setMax(..) as well.

How to set smoothly animation to progressBar in android

Take what you have now, and delete your setUserVisibleHint() method and your ProgressBarAnimation class. Add this:

private void setUpObserver() {
    progressBar.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            startAnimation();

            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                progressBar.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            }
            else {
                progressBar.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            }
        }
    });
}

private void startAnimation() {
    int width = progressBar.getWidth();
    progressBar.setMax(width);

    ValueAnimator animator = ValueAnimator.ofInt(0, width);
    animator.setInterpolator(new LinearInterpolator());
    animator.setStartDelay(0);
    animator.setDuration(10_000);
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            int value = (int) valueAnimator.getAnimatedValue();
            progressBar.setProgress(value);
        }
    });

    animator.start();
}

Then, inside your onCreateView() method, call setUpObserver() right before you return view;

The setUpObserver() method uses an OnGlobalLayoutListener to make sure that the system waits until the ProgressBar is measured an laid out before starting the animation.

The startAnimation() method is what takes care of actually setting up and running the animation. You can modify the values passed to setStartDelay() and setDuration() as you see fit.

The trick to this solution is making sure that the maximum value for the progress bar is equal to its width, meaning that each increment of "progress" is equal to one pixel on the screen. The android framework animation takes care of making sure everything runs as smoothly as possible.

Edit

If you want to be able to control the start/end points for the animation (rather than just go from empty to full), make these changes:

Change the declaration of startAnimation() to this:

private void startAnimation(float startPercent, float endPercent)

Delete this line from inside startAnimation()

ValueAnimator animator = ValueAnimator.ofInt(0, width);

and add these lines instead:

int start = (int) (startPercent * width);
int end = (int) (endPercent * width);
ValueAnimator animator = ValueAnimator.ofInt(start, end);

Finally, call startAnimation() by passing in fractional percentages:

startAnimation(0.79f, 0.10f); // will animate from 79% to 10%

How to fill progress bar smoothly with animation

Change AccelerateInterpolator() to DecelerateInterpolator().
Here the rate of change starts out quickly and and then decelerates.

   ObjectAnimator animation = ObjectAnimator.ofInt(pbOption, "progress", percent);
            animation.setDuration(1250);
            animation.setInterpolator(new DecelerateInterpolator());
            animation.start();

Animating android progress bar

Check this for how to make ProgressBar animation. The only modification you need is instead of applying the animation once when view is initialized, you will need to call

ProgressBarAnimation anim = new ProgressBarAnimation(progressBar, progressBar.getProgress(), to);
anim.setDuration(1000);
progressBar.startAnimation(anim);  // play animation immediately

every time you want to update value. Here is documentation for view animation.

---

Related Topics