Android scale animation making the ImageView running

Question

In my application, I am creating a ImageView dynamically and its set some constant X,Y position, then I am doing scaling animation on it. But I am not sure, why it is kind of running (the ImageView changes its position).

    <?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="2.5"
        android:fromYScale="1.0"
        android:toYScale="2.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="1000" />

    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="1000"
        />
</set>

But I want it to be stand in the same position and scaling needs to be done on to grow from smaller to bigger size. Please help me on this, I am not sure where I am wrong.

final ImageView rippleImageView = new ImageView(context);
            rippleImageView.setX(X);
            rippleImageView.setY(Y);
            rippleImageView.setImageBitmap(image);

            ((ViewGroup)(findViewById(R.id.rippleEffectView)).addView(rippleImageView, 0);

            Animation a = AnimationUtils.loadAnimation(context, R.anim.scale_up);
            a.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {
                }
                @Override
                public void onAnimationEnd(Animation animation) {
                    ((ViewGroup) rippleImageView.getParent()).removeView(rippleImageView);
                }
                @Override
                public void onAnimationRepeat(Animation animation) {
                }
            });
            rippleImageView.startAnimation(a);

And the layout file is very simple,

<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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true" />

    <RelativeLayout
        android:id="@+id/rippleEffectView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_margin="5dp">

        </RelativeLayout>



</RelativeLayout>

Currently I have like as below

I want both circles needs to be in the same position..

Answer 1

Finally, I am succeed with the 2 steps below.

I have changed the RelativeLayout into AbsoluteLayout in the layoutfile.

<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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true" />

    <AbsoluteLayout
        android:id="@+id/rippleEffectView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_margin="5dp">

        </AbsoluteLayout>

</RelativeLayout>

Not sure why, setX(), setY() was not working, but changing layout params works.

    final ImageView rippleImageView = new ImageView(context);
LayoutParams params = new AbsoluteLayout.LayoutParams(200, 200, X, Y);
rippleImageView.setParams(params);
                rippleImageView.setImageBitmap(image);

                ((ViewGroup)(findViewById(R.id.rippleEffectView)).addView(rippleImageView, 0);

                Animation a = AnimationUtils.loadAnimation(context, R.anim.scale_up);
                a.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {
                    }
                    @Override
                    public void onAnimationEnd(Animation animation) {
                        ((ViewGroup) rippleImageView.getParent()).removeView(rippleImageView);
                    }
                    @Override
                    public void onAnimationRepeat(Animation animation) {
                    }
                });
                rippleImageView.startAnimation(a);

And my output now is,

Answer 2

If I understood you correctly, you want the image view to stay in the updated position after the animation is run, right? If so, you need to set android:fillAfter="true" in your set. Refer the documentation here

so finally your animation xml would look like

<?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="2.5"
        android:fromYScale="1.0"
        android:toYScale="2.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="1000" />

    <alpha
        android:fromAlpha="1"
        android:toAlpha="0"
        android:duration="1000"
        />
</set>