Show ImageView with Circular growing animation in Android(Java)

Question

I have a circular star image and want to achieve similar animation as given below.

I try with the given link https://developer.android.com/training/animation/reveal-or-hide-view "Real or hide view" using "createCircularReveal", and also try a combination of multiple ("translate" and "rotate") animations but unfortunately there is no luck.

Can anybody help me to achieve it using android(Java) animation?

Thanks

Answer 1

Here is the sample code to do so:

ProgressImageView.java

public class ProgressImageView extends AppCompatImageView {

    private final Path path = new Path();
    private float progress;

    public ProgressImageView(@NonNull Context context) {
        super(context);
    }

    public ProgressImageView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public ProgressImageView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        if (progress >= 0f && progress < 1f) {
            final int width = getWidth();
            final int height = getHeight();
            final int xCenter = width / 2;
            final int yCenter = height / 2;
            path.rewind();
            path.moveTo(xCenter, yCenter);
            path.arcTo(0, 0, width, height, 270f /* start */, 360f * progress, false);
            path.close();
            canvas.clipPath(path);
        }
        super.onDraw(canvas);
    }

    public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
        this.progress = progress;
        invalidate();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec,
                             int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        final int width = getMeasuredWidth();
        final int height = getMeasuredHeight();
        final int size = Math.min(width, height);
        setMeasuredDimension(size, size);
    }

}

Animation:

ImageView imageView = findViewById(R.id.progress_img);

final Animator progressAnimator = ObjectAnimator.ofPropertyValuesHolder(
        imageView,
        PropertyValuesHolder.ofFloat("progress", 0f, 1f));
progressAnimator.setInterpolator(new LinearInterpolator());
progressAnimator.setDuration(3_000);

final Animator scaleAnimator = ObjectAnimator.ofPropertyValuesHolder(
        imageView,
        PropertyValuesHolder.ofFloat(View.SCALE_X, 1f, 1.1f, 1f),
        PropertyValuesHolder.ofFloat(View.SCALE_Y, 1f, 1.1f, 1f)
);
scaleAnimator.setInterpolator(new BounceInterpolator());
scaleAnimator.setDuration(2_000);

final AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playSequentially(progressAnimator, scaleAnimator);
animatorSet.start();