Develop Reference

ImageView to zoom out and scale the image animation in android

I want image to zoom out and scale as Twitter Splash screen animation but I am not able to first zoom out the image and scale. Here's is my code
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
imageView.animate()
.setStartDelay(500)
.setDuration(1000)
.scaleX(20)
.scaleY(20)
.alpha(0);
}
});

You didn't mention scale from variable
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" >
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.5"
android:toYScale="0.5" >
</scale>
</set>

You can do almost any animations with ObjectAnimator and it's very smooth.
Here is a sample code. In this case image will scale up from 1x to 2x, You can adjust the values as your need.Now if you want to scale down then change 2x to 0.5x which will scale down image to 50% of original image.
ObjectAnimator scaleXAnimation = ObjectAnimator.ofFloat(imageView, "scaleX", 1.0f, 2.0f);
scaleXAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
scaleXAnimation.setDuration(1500);
ObjectAnimator scaleYAnimation = ObjectAnimator.ofFloat(imageView, "scaleY", 1.0f, 2.0f);
scaleYAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
scaleYAnimation.setDuration(1500);
ObjectAnimator alphaAnimation = ObjectAnimator.ofFloat(imageView, "alpha", 1.0F, 0F);
alphaAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
alphaAnimation.setDuration(1500);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(scaleXAnimation).with(scaleYAnimation).with(alphaAnimation);
animatorSet.setStartDelay(500);
animatorSet.start();

Making textView loop a growing and shrinking animation

I am trying to make a TextView grow and then shrink. This process should be repeated infinitely. How do I achieve that? My scale.xml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="2.0"
android:toYScale="2.0"
android:duration="1400" />
</set>
Here's my animation method:
public void runAnimation() {
Animation a = AnimationUtils.loadAnimation(this, R.anim.scale);
a.setRepeatMode(Animation.REVERSE);
a.setRepeatCount(Animation.INFINITE);
a.reset();
textView.clearAnimation();
textView.startAnimation(a);
}
Now my problem is that the TextView grows, but then immediately reverses to the starting appereance. Why won't it go reverse, shrink and repeat the process?

Try this :
public void runAnimation() {
Animation a = AnimationUtils.loadAnimation(this, R.anim.scale);
a.setRepeatMode(Animation.REVERSE);
a.setRepeatCount(-1);
textView.clearAnimation();
textView.startAnimation(a);
}
EDIT
Here is my own code that is working right now :
Call animate like animate(textView)
public void animate (View view) {
mAnimation = new ScaleAnimation(0.3f,0.5f,0.3f,0.5f,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.45f);
mAnimation.setDuration(300);
mAnimation.setRepeatCount(-1);
mAnimation.setRepeatMode(Animation.REVERSE);
mAnimation.setInterpolator(new AccelerateInterpolator());
mAnimation.setAnimationListener(new Animation.AnimationListener(){
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
view.setAnimation(mAnimation);
}

Try this found on some blog. Works perfect for me.
<?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="0.0"
android:toXScale="1.0"
android:fromYScale="0.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000" />
</set>

Here is a simple way to do so
ObjectAnimator scaleDown = ObjectAnimator.ofPropertyValuesHolder(textView,
PropertyValuesHolder.ofFloat("scaleX", 2.0f),
PropertyValuesHolder.ofFloat("scaleY", 2.0f));
scaleDown.setDuration(410);
scaleDown.setRepeatCount(ObjectAnimator.INFINITE);
scaleDown.setRepeatMode(ObjectAnimator.REVERSE);
scaleDown.start();
Hope it helps.

In your animation XML file add:
android:repeatCount="infinite"
And on your animation activity:
textmain.startAnimation(animationMainText);
animationMainText.setRepeatMode(Animation.REVERSE);

Edittext change width with animation

I want to make an edittext which aligns in its parent's left and when users click it, edittext's width'll increase to right side. Here is the code that i used. But when animation ended, edittext width come to first size.Can any one help me.?And is there any solution to set "fillparent" to width's final size in animation?
Animation scaleAnimation = new ScaleAnimation(0, -500, 1, 1);
scaleAnimation.setDuration(750);
editText.startAnimation(scaleAnimation);
I added scaleAnimation.setFillAfter(true); before animation starts but i get this;
After 750ms, edittext is going to its first width.

This will definitely work for you.
Dynamic way of doing this:
ScaleAnimation animate = new ScaleAnimation(1, 2, 1, 1, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0);
animate.setDuration(700);
animate.setFillAfter(true);
target.startAnimation(animate);
Way of Using XML
scale.xml (Put this in res/anim folder)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale
android:duration="400"
android:fillAfter="true"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="0%"
android:pivotY="0%"
android:toXScale="2.0"
android:toYScale="1.0" >
</scale>
</set>
Java Code:
Animation anim = AnimationUtils.loadAnimation(Anims.this, R.anim.scale);
mEdittext.startAnimation(anim);

Do this
Animation scaleAnimation = new ScaleAnimation(0, -500, 1, 1);
scaleAnimation.setDuration(750);
scaleAnimation.setFillAfter(true);
editText.startAnimation(scaleAnimation);

Give a try to this one.
Animation scaleAnimation = new ScaleAnimation(0, -500, 1, 1);
scaleAnimation.setDuration(750);
scaleAnimation.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
//Set your editext width to match parent using layout params
}
});
editText.startAnimation(scaleAnimation);

Use
scaleAnimation.setFillAfter(true);
Or use ObjectAnimator:
ObjectAnimator animWidth = ObjectAnimator.ofInt(your_view, "width", startWidth,endWith);
animWidth.setDuration(yourDuration);
animWidth.start();

How to programmatically animate an ImageView

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.

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);

I use this to achieve popin popout effect,
See if its of any use to you
Pop Out.
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/bounce_interpolator" >
<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="0.5"
android:fromYScale="0.5"
android:toXScale="1.0"
android:toYScale="1.0"
android:duration="500" />
</set>
Pop In
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/bounce_interpolator" >
<scale
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="0.0"
android:toYScale="0.0"
android:duration="500" />
</set>

I created the same animation using kotlin:
Repo: https://github.com/David-Hackro/Bounce-Animation
You need create your element and extend of anything (ImageView,Button etc)
in my case y created a class named BounceWidget
Add element in xml
<hackro.tutorials.com.bounceWidget.widget.BounceWidget
android:layout_width="match_parent"
android:layout_height="match_parent" />
Add element programmatically
val xpp = resources.getXml(R.xml.bouncewidget)
val attr = Xml.asAttributeSet(xpp)
val layout : LinearLayout = findViewById(R.id.layout)
val octocat1 : BounceWidget = BounceWidget(this,attr)
//you can change this values and have default values
//octocat1.id_resource(R.mipmap.bounceimage) // change image --> default : R.mipmap.ic_launcher
//octocat1.positionX = 1 //position X starting --> default : 0
//octocat1.positionY = 1 //position Y starting--> default : 0
//octocat1.velocityX = 1 //Velocity X --> default : 20
//octocat1.velocityY = 1 //Velocity Y --> default : 15
octocat1.layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
layout.addView(octocat1)

Scale animation not working as expected

What I am attempting to do is scale an ImageView from it's normal size, to 20% larger and then back. This should be looped. I have done this with the following code but it doesn't quite work right. More below.
anim/scale.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="1.2"
android:toYScale="1.2"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false" />
<scale
android:startOffset="1000"
android:duration="1000"
android:fromXScale="1.2"
android:fromYScale="1.2"
android:toXScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false" />
</set>
Then in my code I do
private void scaleAnimation() {
final Animation scaler = AnimationUtils.loadAnimation(this, R.anim.scale);
scaler.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
animation.reset();
animation.startNow();
}
});
new Handler().postDelayed(new Runnable() {
#Override
public void run() {
scale.startAnimation(scaler);
}
}, 2000);
}
I have the handler there so I could see what was happening at the start.
The problem is kind of difficult to explain.. My image appears to get scaled as soon as the animation starts AND THEN it performs the animation. So the image appears, as it should, for 2 seconds. Just as the animation starts it suddenly gets bigger by what appears to be 25% - 50% and then the animation performs properly. Once the animation is over, the image resizes to it's original size really quickly and then gets scaled up again and then the animation starts over.
I've tried with a couple of different images without difference. It is my understanding that fromXScale=1.0 starts the animation with no scaling, i.e. the image as is. Hopefully someone can shed light on what I've done wrong or where I've misunderstood the concepts.
Cheers

If what you're trying to accomplish is an view that scales from 1.0 to 1.2 back to 1.0 constantly, you could make your animation simpler.
You would do the following:
Only define one scale animation (from 1.0 to 1.2)
Set the repeat count to INFINITE
Set the repeat mode to REVERSE
For more info, you can check out the document on the Animation class

In my case, I need to animate my view one time (1.0f -> 0.6f -> 1.0f)
The solution of cheezy works for me changing repeatCount = 1 instead of infinite.
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:duration="600"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatMode="reverse"
android:repeatCount="1"
android:toXScale="0.6"
android:toYScale="0.6" />
</set>