Scale animation on custom view behaves wrong when it is not placed in the middle of the screen

Question

I have the following problem: I created a custom view on android. I want to make the view pulse, by an scale animation (pivotX="50%" and pivotY="50%"). If the view is placed in the middle of the screen, the scaling works fine. If the view is placed on the left side of the screen, it looks like the pivotX value would be "75%". If the view is placed on the right side of the screen, it looks like the pivotX value would be "25%".

Here is the code of my view:

public class TestView extends View
{
  private Paint _paint = new Paint();

  private int _x, _y;

  public TestView( Context context, int x, int y )
  {
    super( context );

    _x = x;
    _y = y;

    _paint.setAntiAlias( true );
    _paint.setColor( Color.BLUE );
    _paint.setStyle( Style.FILL );
  }

  @Override
  protected void onDraw( Canvas canvas )
  {
    super.onDraw( canvas );
    canvas.drawCircle( _x, _y, 100 , _paint );
  }
}

Here is the code of the animation pulse.xml file:

<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="100"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="3"
android:repeatMode="reverse"
android:toXScale="1.7"
android:toYScale="1.7" >
</scale>

Code of the fragment class:

ViewGroup mainLayout = (ViewGroup) getView().findViewById( R.id.my_layout );    

float y = screenHeigth / 2;

float x1 = screenWidth*3/4; // right hand side of the screen
dest1 = new TestView( getActivity(), x1, y );
mainLayout.addView( dest1 );

float x2 = screenWidth / 2; // in the middle of the screen
dest2 = new TestView( getActivity(), x2, y );
mainLayout.addView( dest2 );

float x3 = screenWidth / 4; // left hand side of the screen
dest3 = new TestView( getActivity(), x3, y );
mainLayout.addView( dest3 );

ScaleAnimation pulse = (ScaleAnimation) AnimationUtils.loadAnimation( getActivity(), R.anim.pulse );

dest1.startAnimation( pulse );
dest2.startAnimation( pulse );
dest3.startAnimation( pulse );

What am I doing wrong? Perhaps I have to do something in my TestView class?

Answer 1

Now I've got it:-) Thank you pskink to bring me on the right way. The problem was, that my TestView filled the whole parent view. Therefore the center of my view was the center of the parent view and not the center of the drawn circle.

Here is the solution:

public class TestView extends View
{
  private Paint _paint = new Paint();

  private int _xRelativeToView, _yRelativeToView, _w, _radius;

  public TestView( Context context, int xOfView, int yOfView )
  {
    super( context );

    _w = 100;
    _radius = _w / 2;

    // set the coordinates of the circle within this view
    _xRelativeToView = _radius;
    _yRelativeToView = _radius;

    // set the position of the view on the screen:
    LayoutParams mparam = new LayoutParams( _w, _w ); // the view is as big as the circle
    mparam.addRule( RelativeLayout.ALIGN_PARENT_LEFT );
    mparam.setMargins( xOfView - _radius, yOfView - _radius, 0, 0 );
    setLayoutParams( mparam );

    // initialize paint
    _paint.setAntiAlias( true );
    _paint.setColor( Color.BLUE );
    _paint.setStyle( Style.FILL );
  }

  @Override
  protected void onDraw( Canvas canvas )
  {
    super.onDraw( canvas );
    canvas.drawCircle( _xRelativeToView, _yRelativeToView, _radius, _paint );
  }
}