101

I have an ImageView and I do a simple scale animation to it. Very standard code.

My scale_up.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromXScale="1"
           android:fromYScale="1"
           android:toXScale="1.2"
           android:toYScale="1.2"
           android:duration="175"/>
</set>

My animation code:

Animation a = AnimationUtils.loadAnimation(this, R.anim.scale_up);
((ImageView) findViewById(R.id.circle_image)).startAnimation(a);

The problem:

When the image scales it doesn't scale from the center, but from the top left corner. In other words, the scaled version of the image doesn't have the same point as the center, but it has the same top-left point. Here's an image that explains what I mean:

How the animation scales How I want it

The first image is how the animation scales and the second image is how I want it to scale. It should keep the center point the same. I have tried setting up gravity on the image, on the container, aligning left or right, it always scales the same.

I'm using RelativeLayout for the main screen and ImageView is located into another RelativeLayout, but I tried other layouts, no change.

4 Answers 4

175

50% is center of animated view.

50%p is center of parent

<scale
    android:fromXScale="1.0"
    android:toXScale="1.2"
    android:fromYScale="1.0"
    android:toYScale="1.2"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="175"/>
5
  • 30
    for me 50% did the job (without p)
    – agamov
    Mar 10, 2014 at 11:59
  • 5
    it should be without p if it's relative to the component width or height to which u r applying animation. p refers to the parent of the component to which ur applying the animation.
    – Alan Deep
    Jan 3, 2015 at 15:52
  • How to use 50%p in Java files, instead of XML?
    – Nikola K.
    Jul 13, 2015 at 17:51
  • 8
    new ScaleAnimation(1.0f,1.2f,1.0f,1.2f,Animation.RELATIVE_TO_PARENT,0.5f, Animation.RELATIVE_TO_PARENT,0.5f);
    – Jiang Qi
    Jul 14, 2015 at 1:31
  • There is also "a" - Animation.ABSOLUTE to set in px.
    – Zon
    Jul 10, 2018 at 12:23
127

The answer provided by @stevanveltema and @JiangQi are perfect but if you want scaling using code, then you can use my answer.

// first 0f, 1f mean scaling from X-axis to X-axis, meaning scaling from 0-100%
// first 0f, 1f mean scaling from Y-axis to Y-axis, meaning scaling from 0-100%
// The two 0.5f mean animation will start from 50% of X-axis & 50% of Y-axis, i.e. from center

ScaleAnimation fade_in =  new ScaleAnimation(0f, 1f, 0f, 1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
fade_in.setDuration(1000);     // animation duration in milliseconds
fade_in.setFillAfter(true);    // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
view.startAnimation(fade_in);
2
  • 1
    @T.Todua What errors? Please ask a new question and link back to this answer. Jan 12, 2017 at 10:36
  • what if I want infinite repeats for the animation like ``` android:repeatCount="infinite" android:repeatMode="reverse" ```
    – Ali Tamoor
    Feb 8, 2021 at 11:19
78

Forget the additional translation, set android:pivotX, android:pivotY to half the width and height and it will scale from the center of the image.

1
  • 3
    pivotX and pivotY should be set to half the viewportWidth and viewportHeight to be exact. Sep 20, 2018 at 7:58
7

You can use the translate animation in your set to offset that. You'll probably need to tweak the toXDelta and toYDelta values to get it right so it keeps the image centered.

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromXScale="1"
        android:fromYScale="1"
        android:toXScale="1.2"
        android:toYScale="1.2"
        android:duration="175"/>
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="-20%"
        android:toYDelta="-20%"
        android:duration="175"/>
</set>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.