Develop Reference

How to properly implement the following scale / bounce animation?

I have the followin animation that scales an image from "invisible" to 60dp x 60dp adding a bounce effect. When this finishes it disappears with another scale effect
bounce_animation.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="false">
<set android:interpolator="#android:anim/bounce_interpolator">
<scale
android:fromXScale="0.1"
android:fromYScale="0.1"
android:toXScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1600" />
</set>
<set>
<scale
android:startOffset="1900"
android:duration="200"
android:pivotX="50%"
android:pivotY="50%"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="0"
android:toYScale="0" />
</set>
</set>
This is my code to use this
MainActivity.java
final ImageView likeBig = findViewById(R.id.like_big);
final Animation bounceAnimation = AnimationUtils.loadAnimation(this, R.anim.bounce_animation);
bounceAnimation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
likeBig.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
likeBig.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
The problem is that when I do likeBig.setVisibility(View.VISIBLE); image becomes visible for a fraction of a second in full size before the scale animation starts. I need the image to be invisible until the animation begins.
What's wrong with my approach?

I con only guess why the View is visible in full size at the beginning of the animation: maybe onAnimationStart() fires when the animation begins calculating the next changes but before the screen is updated for the first time?
That being said, you can use property animations instead of View animations to achieve the desired effect:
First, let your View have a size of just 1dp x 1dp in the beginning. Instead of setting a pivot, embed it at the center of a FrameLayout of size 60dp x 60dp. If required, you can set the visibility of the FrameLayout to GONE after the animation has finished (in this case, you need to register an Animator.AnimatorListener).
<FrameLayout
android:layout_width="60dp"
android:layout_height="60dp">
<ImageView
android:id="#+id/like_big"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_gravity="center"
android:src="#mipmap/ic_launcher"
android:background="#0000ff"/>
</FrameLayout>
Next, the animations:
ObjectAnimator growX = ObjectAnimator.ofFloat(like_big,"scaleX", 1f, 60.0f);
ObjectAnimator growY = ObjectAnimator.ofFloat(like_big,"scaleY", 1f, 60.0f);
AnimatorSet growAnim = new AnimatorSet();
growAnim.playTogether(growX, growY);
growAnim.setDuration(1600);
growAnim.setInterpolator(new BounceInterpolator());
ObjectAnimator shrinkX = ObjectAnimator.ofFloat(like_big,"scaleX", 60.0f, 0.0f);
ObjectAnimator shrinkY = ObjectAnimator.ofFloat(like_big,"scaleY", 60.0f, 0.0f);
AnimatorSet shrinkAnim = new AnimatorSet();
shrinkAnim.playTogether(shrinkX, shrinkY);
shrinkAnim.setDuration(200);
shrinkAnim.setInterpolator(new LinearInterpolator());
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playSequentially(growAnim, shrinkAnim);
Start the animation by calling
animatorSet.start();

Android scale image view with animation

i have an ImageView and would like to scale it smaller with animation.
i use
<?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="0.7"
android:fromYScale="1.0"
android:toYScale="0.7"
android:pivotX="50%"
android:pivotY="10%"
android:duration="1500" />
</set>
This works good. But after the animation is finished the image gets back to its original size. Any ideas why?

Try with this code, it will not reset the image size after animation, here view is the imageview you want to animate.
ObjectAnimator scaleDownX = ObjectAnimator.ofFloat(view, "scaleX", 0.5f);
ObjectAnimator scaleDownY = ObjectAnimator.ofFloat(view, "scaleY", 0.5f);
scaleDownX.setDuration(1000);
scaleDownY.setDuration(1000);
AnimatorSet scaleDown = new AnimatorSet();
scaleDown.play(scaleDownX).with(scaleDownY);
scaleDown.start();

Ok, i found a solution. is this correct like this? or it is quick and dirty? ^^
ObjectAnimator scaleDownX = ObjectAnimator.ofFloat(image, "scaleX", 0.7f);
ObjectAnimator scaleDownY = ObjectAnimator.ofFloat(image, "scaleY", 0.7f);
scaleDownX.setDuration(1500);
scaleDownY.setDuration(1500);
ObjectAnimator moveUpY = ObjectAnimator.ofFloat(image, "translationY", -100);
moveUpY.setDuration(1500);
AnimatorSet scaleDown = new AnimatorSet();
AnimatorSet moveUp = new AnimatorSet();
scaleDown.play(scaleDownX).with(scaleDownY);
moveUp.play(moveUpY);
scaleDown.start();
moveUp.start();

A simplier answer is below;
imageview.animate().translationY(-200F).duration = 500
imageview.animate().scaleY(0.4F).duration = 500
imageview.animate().scaleX(0.4F).duration = 500

Rotate animation from centre of view not working

I want to make a rotate animation for my view but in both sides (java and xml) I cant find any way to rotate view from it's centre
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toDegrees="180" />
and this:
RotateAnimation animation = new RotateAnimation(0,180,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
both of them rotate view from its corner
please help me

Looks like you try rotate all layout, not view. That you need.
worked code
View view = findViewById( R.id.image );
aRotate = new RotateAnimation(fStartAngle, fEndAngle,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
aRotate.setStartOffset(0);
aRotate.setDuration(2000);
aRotate.setFillAfter(true);
aRotate.setInterpolator(context, android.R.anim.decelerate_interpolator);
view.startAnimation(aRotate);

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)