Develop Reference

How to add a sequential animation on an imageview to scale up and scale down repeatedly in android

I am trying to do an animation on an imageview, were i need to scale up and scale down the image so that it will have a shadow feel effect for another animation.
I tried adding two xml in anim folder -
scale_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:shareInterpolator="false">
<scale
android:duration="1250"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="restart"
android:toXScale="1.5"
android:toYScale="1.5" />
</set>
scale_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:shareInterpolator="false">
<scale
android:duration="1250"
android:fromXScale="1.5"
android:fromYScale="1.5"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="restart"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
and in my activity class
AnimationSet s = new AnimationSet(false);
View shadowView = view.findViewById(R.id.shadowView);
final Animation scaleDownAnimation = AnimationUtils.loadAnimation(context, R.anim.scale_down);
final Animation scaleUpAnimation = AnimationUtils.loadAnimation(context, R.anim.scale_up);
s.addAnimation(scaleUpAnimation);
s.addAnimation(scaleDownAnimation);
shadowView.startAnimation(s);
But animation is not happening. What i am doing wrong? Anyone please help. Thanks

AnimationSet performs animation simultanuously, not sequentaly by default. So it does zoom in and zoom out at the same time. That's why you see no effect. But you can set a start offset to the animation:
AnimationSet s = new AnimationSet(false);
View shadowView = view.findViewById(R.id.shadowView);
final Animation scaleDownAnimation = AnimationUtils.loadAnimation(context, R.anim.scale_down);
final Animation scaleUpAnimation = AnimationUtils.loadAnimation(context, R.anim.scale_up);
scaleDownAnimation.setStartOffset(1250); //this line
s.addAnimation(scaleUpAnimation);
s.addAnimation(scaleDownAnimation);
shadowView.startAnimation(s

How to slide down a logo from outside the screen?

I'm trying to do a splashscreen where a logo appears from the top of the screen, and stop at the center of the screen.
I am using XML in my anim file:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
android:fromYDelta="0%p"
android:toYDelta="75%p"
android:duration="3000" />
</set>
And this method to load the movement:
Animation fadein = AnimationUtils.loadAnimation(getActivity(), R.anim.fadein);
background.startAnimation(fadein);
background.setVisibility(ImageView.VISIBLE);
// load the animation
Animation animMoveDown = AnimationUtils.loadAnimation(getActivity(), R.anim.movedown);
// set animation listener
animMoveDown.setAnimationListener(this);
overlay.startAnimation(animMoveDown);
How I can put the logo above the screen and have it slide down to the center? Is it possible?

Thank you all, in my case the XML is:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillAfter="true">
<translate
**android:fromYDelta="-50%p"**
android:toYDelta="75%p"
android:duration="3000" />
</set>

It is absolutely possible! You'll have to play around with this a bit, but you'll basically just want to start at a negative YDelta
Here's what I used in my app, where I needed the very bottom of the image to start on the screen.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="-84%"
android:toYDelta="0%"
android:duration="500" />
</set>
You're going to want to start at -100% and end at 50%, I think, so try this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="-100%"
android:toYDelta="50%"
android:duration="3000" />
</set>

Just as simple define android:fromYDelta with negative value.

private fun buildSlideDownAndScaleAnimation(view: View): AnimationSet {
val animSet = AnimationSet(true)
animSet.fillAfter = false
val duration: Long = 1000
animSet.duration = duration
animSet.interpolator = AccelerateDecelerateInterpolator()
val translate = TranslateAnimation(0f, 0f, -1000f, 0f)
animSet.addAnimation(translate)
val scale = ScaleAnimation(0f,
1f,
0f,
1f,
ScaleAnimation.RELATIVE_TO_SELF,
.5f,
ScaleAnimation.RELATIVE_TO_SELF,
.5f)
animSet.addAnimation(scale)
val alphaAnimation = AlphaAnimation(0f, 1f)
alphaAnimation.startOffset = duration / 3
animSet.addAnimation(alphaAnimation)
return animSet
}

Make bounce animation

I would like to do bounce animation of layer.
I have done that layer comes from right to center, now I would like to move it a little back and then back to center. That would create bounce effect.
I was thinking that I can do it with a translate like this:
<translate
android:duration="900"
android:fromXDelta="100%p"
android:toXDelta="0%p" />
<translate
android:duration="900"
android:fromXDelta="0%p"
android:toXDelta="100%p" />
<translate
android:duration="900"
android:fromXDelta="70%p"
android:toXDelta="0%p" />
Well this code does not working, only thing I can achieve is that Layer comes from left to center, and then animation stops.
I cannot use this code: because it does not achieve what I want
setInterpolator(AnimationUtils.loadInterpolator(this,
android.R.anim.bounce_interpolator));
Any help would be appreciated.

You can use the BounceInterpolator to have this effect. The docs contain a very good description how to use it in XML. Just have a animation xml like this:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/bounce_interpolator">
<!-- Use your working translate animation here-->
<translate
android:duration="900"
android:fromXDelta="100%p"
android:toXDelta="0%p" />
</set>

use this xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="#android:anim/bounce_interpolator">
<scale
android:duration="600"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
This will show bounce effect with scale ,different from translate,(fits better in some situations),for more check THIS out..

Add code on button or image click
final Animation myAnim = AnimationUtils.loadAnimation(getActivity(), R.anim.bounce);
// Use bounce interpolator with amplitude 0.1 and frequency 15
MyBounceInterpolator interpolator = new MyBounceInterpolator(0.1, 15);
myAnim.setInterpolator(interpolator);
imgVoiceSearch.startAnimation(myAnim);
Add this class
public class MyBounceInterpolator implements android.view.animation.Interpolator {
private double mAmplitude = 1;
private double mFrequency = 10;
public MyBounceInterpolator(double amplitude, double frequency) {
mAmplitude = amplitude;
mFrequency = frequency;
}
public float getInterpolation(float time) {
return (float) (-1 * Math.pow(Math.E, -time / mAmplitude) *
Math.cos(mFrequency * time) + 1);
}
}

How can I make vibrate animation for ImageView

I have no idea for this animation.
How can I do it via XML like that? Or another solution?
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fillAfter="true">
......
</set>
Thanks for your help

This code shakes a view in horizontal direction
shake.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXDelta="0"
android:interpolator="#anim/cycle_5"
android:toXDelta="10" />
cycle_5.xml
<?xml version="1.0" encoding="utf-8"?>
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:cycles="5" />
Method to shake ImageView
public void onShakeImage() {
Animation shake;
shake = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.shake);
ImageView image;
image = (ImageView) findViewById(R.id.image_view);
image.startAnimation(shake); // starts animation
}

1) vibrate or
2) shake
(using property animation)the following code working for me.
ObjectAnimator rotate = ObjectAnimator.ofFloat(animateView, "rotation", 0f, 20f, 0f, -20f, 0f); // rotate o degree then 20 degree and so on for one loop of rotation.
// animateView (View object)
rotate.setRepeatCount(20); // repeat the loop 20 times
rotate.setDuration(100); // animation play time 100 ms
rotate.start();

Create shake.xml inside anim directory
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="70"
android:fromDegrees="0"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="5"
android:repeatMode="reverse"
android:toDegrees="0" />
<translate
android:duration="70"
android:fromXDelta="40"
android:interpolator="#android:anim/linear_interpolator"
android:repeatCount="5"
android:repeatMode="reverse"
android:toXDelta="-40" />
inside your java file add below method
public void animateView(View view){
Animation shake = AnimationUtils.loadAnimation(getActivity(), R.anim.shake);
view.startAnimation(shake);
}
and pass your view inside method for animation
animateView(yourView);

Create animation file in anim directory:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:fromDegrees="-10"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toDegrees="10" />
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
your_view.startAnimation(shake);

This works for me smoothly as i Expected
private void Shake(View view)
{
RotateAnimation rotate = new RotateAnimation(-5, 5,Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotate.setDuration(250);
rotate.setStartOffset(50);
rotate.setRepeatMode(Animation.REVERSE);
rotate.setInterpolator(new CycleInterpolator(5));
view.startAnimation(rotate);
}

I did create the BUZZ like animation for imageView. Here I also have added delay to make it really like Buzzy effect
In your Activity:
Here, animShake is android.view.animation
animShake = AnimationUtils.loadAnimation(this, R.anim.shake)
imageView.startAnimation(animShake)
Don't forget to add AnimationListener for little delay of BUZZ effect
animShake.setAnimationListener(object : Animation.AnimationListener {
override fun onAnimationRepeat(animation: Animation?) {
}
override fun onAnimationEnd(animation: Animation?) {
Handler().postDelayed({
imageView.startAnimation(animShake)
}, 1000)
}
override fun onAnimationStart(animation: Animation?) {
}
})
anim shake XML file having only translate:
android:duration="75"
android:fromXDelta="-18%"
android:repeatCount="11"
android:repeatMode="reverse"
android:toXDelta="18%" />

shaking / wobble view animation in android

I created an anim.xml file such as below to shake imageview like IOS icon shaking in android.
However it does not provide me same result.
Is there any better idea?
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:fromDegrees="-2"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:toDegrees="2" />

Try setting android:repeatMode="reverse". Below animation gives a very reasonable immitation on my Galaxy Nexus. Obviously you can fine tune the parameters to your own liking.
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="100"
android:fromDegrees="-5"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toDegrees="5" />

Nice shake animation;
res/anim/shake.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:duration="150"
android:fromXDelta="-10%"
android:repeatCount="5"
android:repeatMode="reverse"
android:toXDelta="10%"/>
</set>
How to use it
final Animation animShake = AnimationUtils.loadAnimation(this, R.anim.shake);
btn_done = (Button) findViewById(R.id.btn_act_confirm_done);
btn_done.startAnimation(animShake);
How to use it (Simpler version):
btn_done.startAnimation(AnimationUtils.loadAnimation(this,R.anim.shake));

You could try this:
shake.xml
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="10"
android:duration="1000"
android:interpolator="#anim/cycle_7" />
cycle_7.xml
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:cycles="7" />

try to use this one:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="70"
android:fromDegrees="-5"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="5"
android:repeatMode="reverse"
android:interpolator="#android:anim/linear_interpolator"
android:toDegrees="5" />
<translate
android:fromXDelta="-10"
android:toXDelta="10"
android:repeatCount="5"
android:repeatMode="reverse"
android:interpolator="#android:anim/linear_interpolator"
android:duration="70" />
</set>

To make shake effect like this
First define shake animation inside anim folder as shake.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="70"
android:fromDegrees="-5"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="5"
android:repeatMode="reverse"
android:toDegrees="5" />
<translate
android:duration="70"
android:fromXDelta="-10"
android:interpolator="#android:anim/linear_interpolator"
android:repeatCount="5"
android:repeatMode="reverse"
android:toXDelta="10" />
</set>
Then in code
if (TextUtils.isEmpty(phone.getText())
|| phone.getText().length() < 10)
{
//shake animation
phone.startAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.shake));
}

I created a shake effect on Android and posted in GitHub. See if it works better.
https://github.com/teoinke/ShakeAnimation
Relevant code:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/overshoot_interpolator"
android:fillAfter="true">
<translate
android:startOffset="100"
android:fromXDelta="0%p"
android:toXDelta="10%p"
android:duration="50" />
<translate
android:startOffset="150"
android:fromXDelta="0%p"
android:toXDelta="-25%p"
android:duration="110" />
<translate
android:startOffset="260"
android:fromXDelta="0%p"
android:toXDelta="25%p"
android:duration="120" />
<translate
android:startOffset="380"
android:fromXDelta="0%p"
android:toXDelta="-20%p"
android:duration="130" />
<translate
android:startOffset="510"
android:fromXDelta="0%p"
android:toXDelta="10%p"
android:duration="140" />
</set>

This one works pretty well (though not perfectly) as an iOS "incorrect PIN" shaking clone:
final float FREQ = 3f;
final float DECAY = 2f;
// interpolator that goes 1 -> -1 -> 1 -> -1 in a sine wave pattern.
TimeInterpolator decayingSineWave = new TimeInterpolator() {
#Override
public float getInterpolation(float input) {
double raw = Math.sin(FREQ * input * 2 * Math.PI);
return (float)(raw * Math.exp(-input * DECAY));
}
};
shakeField.animate()
.xBy(-100)
.setInterpolator(decayingSineWave)
.setDuration(500)
.start();

/**
*
* #param view view that will be animated
* #param duration for how long in ms will it shake
* #param offset start offset of the animation
* #return returns the same view with animation properties
*/
public static View makeMeShake(View view, int duration, int offset) {
Animation anim = new TranslateAnimation(-offset,offset,0,0);
anim.setDuration(duration);
anim.setRepeatMode(Animation.REVERSE);
anim.setRepeatCount(5);
view.startAnimation(anim);
return view;
}
use:
TextView tv;
makeMeShake(tv,20,5); // it will shake quite fast

For Kotlin users:
First create an Animation resource file called shake.xml. Right click on the res folder in Android Studio, then click New > Android Resource File > enter shake for the file name and select Animation for Resource type dropdown. Click OK.
Inside shake.xml paste the following:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate android:duration="200"
android:fromXDelta="-5%"
android:repeatCount="3"
android:repeatMode="reverse"
android:toXDelta="5%"/>
</set>
Now just call it on a view!
From within a fragment:
myView.startAnimation(AnimationUtils.loadAnimation(requireContext(), R.anim.shake))
From within an activity:
myView.startAnimation(AnimationUtils.loadAnimation(this, R.anim.shake))
(note - myView is the ID given to the view that you want to animate)
If you would like to fine-tune the animation, simply modify the values in shake.xml.

I created a very good approximation of iOS shaking (when you long press a icon to remove app from homescreen). You have to apply inside your code, programmatically, as it requires random number generation:
int dur1 = 70 + (int)(Math.random() * 30);
int dur2 = 70 + (int)(Math.random() * 30);
// Create an animation instance
Animation an = new RotateAnimation(-3, 3, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
// Set the animation's parameters
an.setDuration(dur1); // duration in ms
an.setRepeatCount(-1); // -1 = infinite repeated
an.setRepeatMode(Animation.REVERSE);
an.setFillAfter(true); // keep rotation after animation
// Create an animation instance
Animation an2 = new TranslateAnimation(-TranslateAnimation.RELATIVE_TO_SELF,0.02f,
TranslateAnimation.RELATIVE_TO_SELF,0.02f,
-TranslateAnimation.RELATIVE_TO_SELF,0.02f,
TranslateAnimation.RELATIVE_TO_SELF,0.02f);
// Set the animation's parameters
an2.setDuration(dur2); // duration in ms
an2.setRepeatCount(-1); // -1 = infinite repeated
an2.setRepeatMode(Animation.REVERSE);
an2.setFillAfter(true); // keep rotation after animation
AnimationSet s = new AnimationSet(false);//false means don't share interpolators
s.addAnimation(an);
s.addAnimation(an2);
// Apply animation to image view
itemView.setAnimation(s);
This code was design to be applied inside an adapter's gridview (getView), but you can apply to any view by changing the last line to:
yourViewName.setAnimations(s);

Kotlin version of lincolnq's answer
val FREQ = 3f
val DECAY = 2f
val decayingSineWave = TimeInterpolator { input ->
val raw = sin(FREQ * input * 2 * Math.PI)
(raw * exp((-input * DECAY).toDouble())).toFloat()
}
// where binding.loginFrame is the view you wanna shake
binding.loguinFrame.animate()
.withEndAction{
// here you can clear the fields after the shake
}
.xBy(-100f)
.setInterpolator(decayingSineWave)
.setDuration(500)
.start()

IOS wobble animation is not that simple try to change pivot x and y randomly when rotate. You should change the value programatically though. May be you also can use translate animation simultaneously

Banging my head for more than two hours, I knew how to shake and wobble an view.
Unfortunately the accepted answer won't work apart from onCreateView of fragment.
Example if you have onClick method and inside in it. You have animation like below it won't work.
Please go through the code.
DoneStart.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
register(view);
}
});
The register method has some checks like below code
private void register(View view) {
String type = typedThings.getText.toString();
String km = Km_Now.getText().toString();
if (serviceType == null) {
animationServiceList = AnimationUtils.loadAnimation(getActivity(), R.anim.shake_wobble);
silverServiceButton.setAnimation(animationServiceList);
generalServiceButton.setAnimation(animationServiceList);
platinumServiceButton.setAnimation(animationServiceList);
animationServiceList.start();
} else if (km == null) {
animationEditText = AnimationUtils.loadAnimation(getActivity(), R.anim.shake_wobble);
Km_Now.setAnimation(animationEditText);
animationEditText.start();
}
The Call animationServiceList.start(); will never be called,
SOLUTION: Use PropertyAnimator like ObjectAnimator.

Other answers are correct as well but this is a bit smoother than them since it uses an interpolator produces smooth numbers for back an forth movement
public class WobblyView extends ImageView implements ValueAnimator.AnimatorUpdateListener {
private final ValueAnimator va = ValueAnimator.ofInt(-10, 10);
public WobblyView(Context context) {
this(context, null);
}
public WobblyView(Context context, #Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public WobblyView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setAdjustViewBounds(true);
setImageResource(R.drawable.ic_logo);
va.setInterpolator(new AccelerateDecelerateInterpolator());
va.setRepeatMode(ValueAnimator.REVERSE);
va.setRepeatCount(ValueAnimator.INFINITE);
va.setDuration(1000);
}
#Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
va.addUpdateListener(this);
va.start();
}
#Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
va.removeUpdateListener(this);
}
#Override
public void onAnimationUpdate(ValueAnimator animation) {
int heading = (int) animation.getAnimatedValue();
setRotation(heading);
}
}