How to implement circular to check / tick animation in Android?

Question

I am trying to animate a custom view

I implemented a circular progress bar custom view, exactly similar to this one

 @Override
   protected void onDraw(Canvas canvas)
   {
       super.onDraw(canvas);

       if (totalCount == 0 || progressCount == 0)
       {
           // No progress, set a different background color and draw a arc and set a icon at the center
           progressBackgroundPaint.setColor(outerNoProgressBackgroundColor);
           canvas.drawArc(viewRect, PROGRESS_START_DEGREE, PROGRESS_END_DEGREE, false, progressBackgroundPaint);
           drawInnerBackgroundWithState(canvas, ProgressState.NO_PROGRESS);
           drawCenterIconWithState(centerIconEmptyBitmap, canvas, ProgressState.NO_PROGRESS);
       }
       else
       {
           // Change the color first for a progress bar
           progressBackgroundPaint.setColor(outerProgressBackgroundColor);
           canvas.drawArc(viewRect, PROGRESS_START_DEGREE, PROGRESS_END_DEGREE, false, progressBackgroundPaint);

           // Then draw an arc on top of it marking progress
           canvas.drawArc(viewRect, PROGRESS_START_DEGREE, getAngle(), false, progressPaint);

           // set inner background color and tint center icon with state-appropriate color and draw it in the center
           // of the progress circle
           if (progressCount < totalCount)
           {
               canvas.drawOval(viewRect, innerBackgroundPaint);
               drawCenterIconWithState(centerIconProgressBitmap, canvas, ProgressState.IN_PROGRESS); // draw bit map function
           }
           else
           {
               canvas.drawOval(viewRect, completeBackgroundPaint);
               drawCenterIconWithState(centerIconProgressBitmap, canvas, ProgressState.COMPLETE); // draw bitmap function
           }
       }
   }

I call this onDraw using ValueAnimator

public void drawProgressAnimation(float progress)
   {
ValueAnimator animator;
       if (animator != null)
           animator.cancel();
       animator = ValueAnimator.ofFloat(0f, progress);
       animator.setDuration(600);

       progressAnimator.addUpdateListener(animation ->
       {
           float progress1 = (float)animation.getAnimatedValue();
           setProgress(progress1, true);
       });
       progressAnimator.start();
   }

And invalidating in setProgress method which calls onDraw.

But, I need to achieve something like this,

I tried using Animator set along with ValueAnimator, but it didn't work. I tried to call onDraw with sequentially by setting a variable inside the lambda but in vain. I am not sure whether can do this using AnimatedVectorDrawable. Can somebody help?

score 0 · Answer 1 · edited Nov 16 '21 at 22:55

I used this repo as reference and implemented what i want. Instead of using random counter to set the speed. I used value animation and used the progress value for every frame to set the arc rate. And used the counter to draw circles that would grow from Zero to radius.

if (isComplete) {
    canvas.drawArc(mRect, START_DEGREE, getSweepAngle(), false, progressPaint);

    // animate circle progress when arc reaches partial sweep angle
    if (getSweepAngle() >= partialSweepAngle)
    {
        innerBackground.setColor(innerCompleteColor);
        circleCounter += circleProgressRate;

        if (circleCounter <= radius)
            canvas.drawCircle(mRect.centerX(), mRect.centerY(), circleCounter,
                innerBackground);
        else
            canvas.drawCircle(mRect.centerX(), mRect.centerY(), radius, innerBackground);
    }
    if (circleCounter >= radius)
        // draw the icon
}

How to implement circular to check / tick animation in Android?

1 Answers1