How to programmatically animate an ImageView

Jeremy picture Jeremy · Jan 8, 2014 · Viewed 29.1k times · Source

I am trying to animate an ImageView when the said image view is clicked.

Specifically I want the size of the ImageView gets bigger (say .20 bigger) and the immediately shrink back to its original size).

So far I have been experimenting with this code with no luck.

// thumbLike is the imageView I would like to animate.
button.setOnClickListener(new OnClickListener(){
    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        ScaleAnimation scaleAnim = new ScaleAnimation(1.0f, 2.5f, 1.0f, 2.5f,
                                    Animation.RELATIVE_TO_SELF, 0.5f,
                                    Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnim.setInterpolator(new LinearInterpolator());
        scaleAnim.setDuration(1500);
        thumbLike.startAnimation(scaleAnim);
        thumbLike.setAnimation(null);
    }
});

Can anyone suggest me with a possible solution?

Edit #1

It is working through XML as answered by Hardik4560:

// finally i use this code to execute the animation
Animation animationScaleUp = AnimationUtils.loadAnimation(this, R.anim.scale_up);
Animation animationScaleDown = AnimationUtils.loadAnimation(this, R.anim.scale_down);

AnimationSet growShrink = new AnimationSet(true);
growShrink.addAnimation(animationScaleUp);
growShrink.addAnimation(animationScaleDown);
thumbLike.startAnimation(growShrink);

and the XML

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

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

ps: this is awkward, since I already accepted an answer. I am trying to combine between @tharkbad and @Hardik4560 's answers yet now the way it animates does not look smooth.

during the scale_up animation, it kinda look like being "skip" to the end of animation and then immediately starting scale_down animation. I guess I have to play around with it a bit.

Answer

Thrakbad picture Thrakbad · Jan 8, 2014

If you want to implement this without XML you could do so as follows

final float growTo = 1.2f;
final long duration = 1200;

ScaleAnimation grow = new ScaleAnimation(1, growTo, 1, growTo, 
                                         Animation.RELATIVE_TO_SELF, 0.5f,
                                         Animation.RELATIVE_TO_SELF, 0.5f);
grow.setDuration(duration / 2);
ScaleAnimation shrink = new ScaleAnimation(growTo, 1, growTo, 1,
                                           Animation.RELATIVE_TO_SELF, 0.5f,
                                           Animation.RELATIVE_TO_SELF, 0.5f);
shrink.setDuration(duration / 2);
shrink.setStartOffset(duration / 2);
AnimationSet growAndShrink = new AnimationSet(true);
growAndShrink.setInterpolator(new LinearInterpolator());
growAndShrink.addAnimation(grow);
growAndShrink.addAnimation(shrink);
thumbLike.startAnimation(growAndShrink);

Of course, you could also use NineOldAndroids and use the new animation methods.

I think your original error is this line, it removes the animation you just started from the view again.

thumbLike.setAnimation(null);