Scale animation of the custom view (relative to the centre point)

Question

I have a custom view, which I want to scale relative to the centre.

If I use this line of code for the ImageView it works perfectly well and scale correctly:

imageView.animate().scaleX(2.5f).scaleY(2.5f).setDuration(2000);

But if I use it for my custom view, it goes up, and animation doesn't look correctly, how to fix it?

Here is a video: https://youtu.be/f0-jMqE9ULU
(The animation of the red circle going wrong, animation of the pink circle (imageView) works correctly)

My custom view:

public class CircleDrawView extends View {
    private Paint paint;
    private int x;
    private int y;
    private String labelName;
    private int radius = 40;

    public CircleDrawView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    public CircleDrawView(Context context)
    {
        super(context);
        paint = new Paint();
    }

    public CircleDrawView(Context context, int x, int y, String labelName)
    {
        super(context);
        paint = new Paint();
        this.x=x;
        this.y=y;
        this.labelName=labelName;
    }


    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        paint.setColor(Color.RED);
        canvas.drawCircle(x, y, radius, paint);
        Paint textPaint = new Paint();
        textPaint.setTextSize(25);
        textPaint.setColor(Color.WHITE);
        textPaint.setAntiAlias(true);
        textPaint.setTextAlign(Paint.Align.CENTER);
        Rect bounds = new Rect();
        textPaint.getTextBounds(labelName, 0, labelName.length(), bounds);
        canvas.drawText(labelName, x, y, textPaint);

    }
}

Activity:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        LinearLayout rootView =(LinearLayout) findViewById(R.id.test_layout);
        ImageView imageView = (ImageView) findViewById(R.id.test_image);

        CircleDrawView circle = new CircleDrawView(getApplicationContext(), 200, 200, "1");
        rootView.addView(circle);
        rootView.invalidate();
        circle.animate().scaleX(1.2f).scaleY(1.2f).setDuration(2000);
        imageView.animate().scaleX(2.5f).scaleY(2.5f).setDuration(2000);
}
}

xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context="com.example.attracti.animation.MainActivity">

    <LinearLayout
        android:id="@+id/test_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/test_image"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="100dp"
            android:background="@drawable/circle_shape" />

    </LinearLayout>

</RelativeLayout>

Answer 1

Your call to circle.animate() returns a ViewPropertyAnimator . The scaleX() and scaleY() methods you call on this ViewPropertyAnimator scale the View about it's pivot.

The pivot of a View is set by the View.setPivotX() and View.setPivotY() methods.

In your constructor, set these values to the supplied x and y. Your view will then scale about the supplied center point.