How to make circular clip bounds for ViewGroup

Question

I have ImageView, that should fly away, when I click the button. For this purpose I use ObjectAnimator to animate TRANSLATION_Y and TRANSLATION_X properties.

I need to define circular bounds for parent of my ImageView to make it fly away correctly.

For this I use next code

public class CircleFrameLayout extends FrameLayout {

    private Path mClipPath = new Path();

    //Constructors

    @Override
    protected void onDraw(Canvas canvas) {
        mClipPath.reset();
        float radius = Math.min((float)getMeasuredWidth() / 2f, (float)getMeasuredHeight() / 2f) + 5;
        mClipPath.addCircle((float)getMeasuredWidth() / 2f, (float)getMeasuredHeight() / 2f, radius, Path.Direction.CCW);
        canvas.clipPath(mClipPath);
        super.onDraw(canvas);
    }
}

But nothing happens. ImageView uses rectangle bounds of its' parent rather then circular bounds.

What is the problem?

Answer 1

onDraw is not usually called for ViewGroup classes (like your custom FrameLayout). In order to get the behavior you want, override dispatchDraw instead:

private Path mClipPath = new Path();

@Override
protected void dispatchDraw(Canvas canvas) {
    mClipPath.reset();
    float radius = Math.min((float)getMeasuredWidth() / 2f, (float)getMeasuredHeight() / 2f) + 5;
    mClipPath.addCircle((float)getMeasuredWidth() / 2f, (float)getMeasuredHeight() / 2f, radius, Path.Direction.CCW);
    canvas.clipPath(mClipPath);
    super.dispatchDraw(canvas);
}