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?

Answer 1

Have you tried seeing the source code for this:

https://github.com/cdflynn/checkview

Also refer this library: https://github.com/airbnb/lottie-android that can help you use the animation.

Answer 2

我认为此视图可以由 AnimatedStateListDrawable 完成，这是此类动画的最佳实践，您可以在保留部分查看https://medium.com/androiddevelopers/animating-on-a-schedule-8a90d812ae4 。

Answer 3

You can make use of this Lottie File

Then setup Lottie using this

Here is a tutorial for implementing Lottie in android projects.

Using Lottie can save plenty of struggling hours in Android animation and it is easy to implement also. Lottie won't consume huge memory which is really helpful for us.

Answer 4

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.

                {
                    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
                }