Develop Reference

Applying shake animation while retaining the scale animation

I am applying a scale animation on RecyclerView. I am applying this animation on OnFocusChangeListener event. After this animation is applied, I also want to apply a shake animation to the same item while it retains the previous scale.
but in my case the item is scaled back to normal size before applying the shake animation.
Here is the problem I face.
scale animation zoom_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:fillEnabled="true"
android:interpolator="#android:anim/linear_interpolator"
android:zAdjustment="top">
<scale
android:duration="200"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.2"
android:toYScale="1.2" />
</set>
Shake animation shake.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:duration="100"
android:fromXDelta="-5%"
android:repeatCount="3"
android:repeatMode="reverse"
android:toXDelta="5%" />
</set>
OnFocusChangeListener - This is where I scale the object
holder.channelCardView.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View view, boolean hasFocus) {
if (hasFocus) {
Animation animZoomIn = AnimationUtils.loadAnimation(mContext, R.anim.zoom_in);
view.startAnimation(animZoomIn);
} else {
Animation animZoomOut = AnimationUtils.loadAnimation(mContext, R.anim.zoom_out);
view.startAnimation(animZoomOut);
}
}
});
OnKeyListener - This is where I apply shake animation.
holder.channelCardView.setOnKeyListener(new View.OnKeyListener() {
#Override
public boolean onKey(View v, int keyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_DPAD_RIGHT && getItemCount() == position + 1) {
if(getItemCount() == position + 1 && count[0] >= 2) {
Animation animShake = AnimationUtils.loadAnimation(mContext, R.anim.shake);
holder.channelCardView.startAnimation(animShake);
}
else {
count[0]++;
}
}
else {
count[0] = 0;
}
return false;
}
});
I want to apply the shake animation while the item is zoomed and I want to keep it zoomed until focus is changed.
Appreciate your help

After lot of reading I found the solution myself. by changing the shake.xml as below the problem is solved.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:fillEnabled="true"
android:fillAfter="true">
<scale
android:duration="200"
android:fromXScale="1.2"
android:fromYScale="1.2"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.2"
android:toYScale="1.2" />
<translate
android:duration="100"
android:fromXDelta="-3%"
android:repeatCount="3"
android:repeatMode="restart"
android:toXDelta="3%" />
</set>

Android animation "blink" when repeat

In my application I have this animation
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:shareInterpolator="true">
<alpha
android:duration="1000"
android:startOffset="2000"
android:fromAlpha="0"
android:toAlpha="1"/>
<scale
android:duration="400"
android:startOffset="4000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.9"
android:toYScale="0.9"/>
<scale
android:duration="400"
android:startOffset="4400"
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1"/>
<alpha
android:duration="1000"
android:startOffset="5800"
android:fromAlpha="1"
android:toAlpha="0"/>
</set>
Generally it shows image, make "press" gesture and hide it. What I want is run this animation in infinite loop. Setting parameter repeatCount doesn't work. Only way I found is to start animation again in animation listener.
final Animation pointerAnim = AnimationUtils.loadAnimation(this, R.anim.pointer);
pointerAnim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(final Animation animation) {}
#Override
public void onAnimationEnd(final Animation animation) {
pointerView.startAnimation(pointerAnim);
}
#Override
public void onAnimationRepeat(final Animation animation) {}
});
pointerView.startAnimation(pointerAnim);
But here comes my problem. Between end and new start animation, the image "blink" (appeared and disappeared in short moment) and I don't know how to prevent this. Using fillAfter doesn't work. Also setting appropriate visibility in listener doesn't work. Note that target API is 10.
I'll be glad for any advice

This was surprisingly tricky, but here's an answer that seems to work and avoid the blinking. Break the animation up into two parts and set two animation listeners so that when each of them finish, they trigger the other one to start. It looks as follows:
pointer_fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:shareInterpolator="true">
<alpha
android:duration="1000"
android:startOffset="2000"
android:fromAlpha="0"
android:toAlpha="1"/>
<scale
android:duration="400"
android:startOffset="4000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.9"
android:toYScale="0.9"/>
</set>
pointer_fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="400"
android:startOffset="0"
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1"/>
<alpha
android:duration="1000"
android:startOffset="1400"
android:fromAlpha="1"
android:toAlpha="0"/>
</set>
Then the code:
final Animation pointerFadeInAnim = AnimationUtils.loadAnimation(this, R.anim.pointer_fade_in);
final Animation pointerFadeOutAnim = AnimationUtils.loadAnimation(this, R.anim.pointer_fade_out);
pointerFadeInAnim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(final Animation animation) {}
#Override
public void onAnimationEnd(final Animation animation) {
pointerView.startAnimation(pointerFadeOutAnim);
}
#Override
public void onAnimationRepeat(final Animation animation) {}
});
pointerFadeOutAnim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
pointerView.startAnimation(pointerFadeInAnim);
}
#Override
public void onAnimationRepeat(Animation animation) {}
});
pointerView.startAnimation(pointerFadeInAnim);
Hope this works for you!

Did you try combining both repeatMode and repeatCount attributes like in the following example
<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"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
Hope it has helped

Maybe it's just a workaround that won't be applicable in your case, but would it be possible to offset the entiere animation, so that it starts at 3000 ? (Thus, when alpha=1.0)
(Well, after some thought, I'm pretty sure you can't do that, because the alpha transition should be the first when the object first appears on screen)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:shareInterpolator="true">
<scale
android:duration="400"
android:startOffset="1000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.9"
android:toYScale="0.9"/>
<scale
android:duration="400"
android:startOffset="1400"
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1"
android:toYScale="1"/>
<alpha
android:duration="1000"
android:startOffset="2800"
android:fromAlpha="1"
android:toAlpha="0"/>
<alpha
android:duration="1000"
android:startOffset="5800"
android:fromAlpha="0"
android:toAlpha="1"/>
</set>

Zoomout animation on button press in android

When press a button,i need to animate that button....button will zoom out little on pressed and in orignal size on released..(very much like in tinder)
i use this :
<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.9"
android:toYScale="0.9" >
</scale>
but it not work according to my need,,,i need that the button remain small till it is pressed. and become normal on released.

You can create a second animation for returning to unclicked state like this:
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:fillAfter="true"
android:fromXScale="0.9"
android:fromYScale="0.9"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0" >
</scale>
and then :
yourButton.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// start your first zoom out Animation here
break;
case MotionEvent.ACTION_UP:
// start zoom in animation which returns to original state
break;
}
return false;
}
});
Dont forget to set fillAfter in your Animations to true, otherwise it will snap back to the original state after the duration has ended.
Or in case you dont want a second animation you can call
yourButton.startAnimation(yourAnimation);
inside MotionEvent.ACTION_DOWN
and then call
yourButton.clearAnimation();
inside MotionEvent.ACTION_UP

how to manage OnClickListener on animated image?

I have an animated image of a bee.
I set an onClick Listener to the imageView, and it's working, but only in native position of the imageView, but not when its animating.
i also tried to use onTouchListener, but the result is the same.
How can i make onClick or onTouchListener work while the ImageView is animating?
animation:
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:shareInterpolator="true">
<scale
android:repeatCount="infinite"
android:repeatMode="reverse"
android:duration="8000"
android:fromXScale="0.2"
android:toXScale="1.5"
android:fromYScale="0.2"
android:toYScale="1.5"
android:pivotY="0%"
android:pivotX="50%"/>
<translate
android:interpolator="#android:anim/bounce_interpolator"
android:fillBefore="true"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:duration="2000"
android:toXDelta="35"
android:toYDelta="85"/>
<rotate
android:pivotX="50%"
android:pivotY="0%"
android:fromDegrees="360"
android:toDegrees="0"
android:duration="6000"
android:repeatMode="reverse"
android:repeatCount="infinite"/>
onClick:
public static void onBTNClick_RidBee(Activity activity){
bee_icon = (ImageView)activity.findViewById(R.id.bee_icon);
bee_icon.clearAnimation();
}
}
onTouchListener:
bee_icon.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
Log.d("myLogs", "clear anim bee");
bee_icon.clearAnimation();
}
return true;
}
});

Use android:fillAter="true". fillAfter controls whether the animation's ending value persists after it ends. By default, the state of the view after animation will be same as the state before the animation. for eg:suppose, before animation view's x position is 10, and you are translating x to 100, after animation the position will be still 10 not 100. But if you set fillAfter="true", after animation x will be 100

How can I animate a custom view (ImageView) programmatically?

I want to animate a custom view programmatically. I want it to only animate in the position where it is declare in the xml file, and I don't want it to mess the layout. Also this animation is affected by other factor so the android Animation class is out of the question.
I have test this sample tutorial and watch this videos. My problem is that most tutorial is for animating a sprite into a canvas where you will trace your sprite's location.
How can you animate the custom view without affecting layout and without using the Android Animation class?
Edited:
The custom view will act as a animated-gif and will toggle another set of frames whenever an event activates it.

you can create animation XML and apply that animation from program to your ImageView check following example
you can start animation for your customized view just call viewobject.startAnimation(animationobject);
animation.xml
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.4"
android:fromYScale="1.0"
android:toYScale="0.6"
android:pivotX="50%"
android:pivotY="50%"
android:fillAfter="false"
android:duration="700" />
<set
android:interpolator="#android:anim/accelerate_interpolator"
android:startOffset="700">
<scale
android:fromXScale="1.4"
android:toXScale="0.0"
android:fromYScale="0.6"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
<rotate
android:fromDegrees="0"
android:toDegrees="-45"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="400" />
</set>
your main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/hello"
/>
<ImageView android:id="#+id/ImageView01" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView>
</LinearLayout>
then your activity class myActivity.java
public class myActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView image = (ImageView) findViewById(R.id.ImageView01);
//create animation class object
Animation hyperspaceJump =
AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
//start animation for image
image.startAnimation(hyperspaceJump);
}
}

If you want "frame by frame" animation that just "runs" like an animated gif, you can follow:
drawable-animation official tutorial.
Quoting from the tutorial:
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="true">
<item android:drawable="#drawable/rocket_thrust1" android:duration="200" />
<item android:drawable="#drawable/rocket_thrust2" android:duration="200" />
<item android:drawable="#drawable/rocket_thrust3" android:duration="200" />
</animation-list>
and in your code
AnimationDrawable rocketAnimation;
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
rocketAnimation = (AnimationDrawable) rocketImage.getBackground();
}
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
rocketAnimation.start();
return true;
}
return super.onTouchEvent(event);
}