Why is the position of the drawable also changing when applying ScaleAnimation in Android?

Question

I am trying to apply a scale animation to a rectangle, using code not xml. I want to make the rectangle grow taller, pretty simple.

RectDrawableView - creates a RectShape ShapeDrawable

public class RectDrawableView extends View {

Paint paint; 

public RectDrawableView(Context context) {
    super(context);
    paint = new Paint();
    paint.setColor(Color.parseColor("#aacfcce4"));
    paint.setStyle(Paint.Style.FILL);
}

protected void onDraw(Canvas canvas) {

    int x = 35;
    int y = 250;
    int width = 50;
    int height = 300;

    ShapeDrawable shapeDrawable = new ShapeDrawable(new RectShape());

    Rect rect = new Rect(x, y, x+width, y+height);
    shapeDrawable.setBounds(rect);
    shapeDrawable.getPaint().set(paint);
    shapeDrawable.draw(canvas);
}

}

Activity: - Creates a new RectDrawableView and adds to layout. OnResume an animation is triggered, which should make the rectangle grow taller.

public class RectActivity extends Activity {

final String TAG = "RectActivity";

TextView rect1;
RectDrawableView rectView;


/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.basic);

    LinearLayout linear = (LinearLayout) findViewById(R.id.basicLayout);
    rectView = new RectDrawableView(this);
    linear.addView(rectView);
}

@Override
public void onResume() {
    super.onResume();
    RunAnimations();
}


private void RunAnimations() {


    Animation rectAnim1 = new ScaleAnimation(1, 1, 1, 1.3f, ScaleAnimation.RELATIVE_TO_SELF, 0,
            ScaleAnimation.RELATIVE_TO_SELF, 1);
    rectAnim1.setFillBefore(false);
    rectAnim1.setFillAfter(true);
    rectAnim1.setStartOffset(500);
    rectAnim1.setDuration(500);

    rectView.startAnimation(rectAnim1);

}
}

basic.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/basicLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:orientation="vertical">

</LinearLayout>

Result: The rect is growing taller, good, but the location of the rect is also changing, bad. The whole rectangle is being positioned higher up the screen.

When I use this exact same animation code, but apply it to a TextView instead of a ShapeDrawable, all is good.

I've trawled through all the related articles on SO, but I'm still struggling with this one. Any help would be appreciated, thanks.

Answer 1

Complete code, i had changed the height of the rectangle.

public class RectActivity extends Activity {

final String TAG = "RectActivity";

TextView rect1;
RectDrawableView rectView;


/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.basic);

    LinearLayout linear = (LinearLayout) findViewById(R.id.rectangle);
    rectView = new RectDrawableView(this);
    linear.addView(rectView);
    Button sbutton = (Button)findViewById(R.id.sbutton);
    sbutton.setOnClickListener(new OnClickListener(){
        @Override
        public void onClick(View v) {
            RectActivity.this.RunAnimations();
        }   
    });
    Button tbutton = (Button)findViewById(R.id.tbutton);
    tbutton.setOnClickListener(new OnClickListener(){
        @Override
        public void onClick(View v) {
            RectActivity.this.runTranslateAnimation();
        }   
    });

}

@Override
public void onResume() {
    super.onResume();
    RunAnimations();
}


private void RunAnimations() {
    Animation rectAnim1 = new ScaleAnimation(1, 1, 1, 1.3f, 
                   ScaleAnimation.RELATIVE_TO_SELF, 0,
            ScaleAnimation.ABSOLUTE, 250);

    rectAnim1.setFillBefore(false);
    rectAnim1.setFillAfter(true);
    rectAnim1.setStartOffset(500);
    rectAnim1.setDuration(500);
    rectView.startAnimation(rectAnim1);

}
private void runTranslateAnimation() {

    float x = rectView.getX();
    float y = rectView.getY();

    TranslateAnimation trans = new TranslateAnimation(0, 0, 0, (90));
    trans.setFillAfter(true);
    trans.setStartOffset(500);
    trans.setDuration(500);
    rectView.startAnimation(trans);
}
}

public class RectDrawableView extends View {

Paint paint; 
Rect rect;

public RectDrawableView(Context context) {
    super(context);
    paint = new Paint();
    paint.setColor(Color.parseColor("#aacfcce4"));
    paint.setStyle(Paint.Style.FILL);
}

protected void onDraw(Canvas canvas) {

    int x = 50;
    int y = 150;
    int width = 50;
    int height = 100;

    ShapeDrawable shapeDrawable = new ShapeDrawable(new RectShape());

    rect = new Rect(x, y, x+width, y+height);
    shapeDrawable.setBounds(rect);
    shapeDrawable.getPaint().set(paint);
    shapeDrawable.draw(canvas);
}
}

Answer 2

Try this code. Keep the pivotYType as ABSOLUTE with value 550 ( y + height )

 Animation rectAnim1 = new ScaleAnimation(1, 1, 1, 1.3f, 
                                ScaleAnimation.RELATIVE_TO_SELF, 0,
                                ScaleAnimation.ABSOLUTE, 550);