Zoomout animation on button press in android - 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

Related

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>

How do I reverse a running animation?

When the Button is touched, it starts a zoom animation.
Animation zoomIn = AnimationUtils.loadAnimation(context, R.anim.zoomin);
view.startAnimation(zoomIn);
The zoomin.xml code:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillEnabled="true"
android:fillAfter="true">
<scale
android:fromXScale="1.0"
android:toXScale="1.3"
android:fromYScale="1.0"
android:toYScale="1.3"
android:pivotX="50%"
android:pivotY="50%"
android:duration="200"
android:interpolator="#android:anim/accelerate_interpolator"/>
</set>
But if the Button is released during this still running animation, it should reverse the animation from this point in time.
How can i achieve that?
You could use ViewPropertyAnimator to achieve something like this.
For example:
Button button = (Button) findViewById(R.id.yourButton);
button.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
// adjust the scale and duration values according to your needs
if (event.getAction() == MotionEvent.ACTION_DOWN) {
v.animate().scaleX(2).scaleY(2).setDuration(2000);
} else if (event.getAction() == MotionEvent.ACTION_UP) {
v.animate().scaleX(1).scaleY(1).setDuration(2000);
}
return false;
}
});

Android Animation not Animating

I have an animation set on an ImageButton that is Invisible, then on a callback gets set to be visible and should start to animate.
I set my animation up like this
showBuildingTapAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.main_button_tap);
and call it like this
if(showBuildingCollectionNavButton.getVisibility() == View.INVISIBLE) {
showBuildingCollectionNavButton.setVisibility(View.VISIBLE);
showBuildingCollectionNavButton.requestLayout();
showBuildingTapAnimation.start();
}
and I have also tried this:
if(showBuildingCollectionNavButton.getVisibility() == View.INVISIBLE) {
showBuildingCollectionNavButton.setVisibility(View.VISIBLE);
showBuildingCollectionNavButton.requestLayout();
showBuildingCollectionNavButton.startAnimation(AnimationUtils.loadAnimation(this.getApplicationContext(), R.anim.main_button_tap));
}
and this
if(showBuildingCollectionNavButton.getVisibility() == View.INVISIBLE) {
showBuildingCollectionNavButton.setVisibility(View.VISIBLE);
showBuildingCollectionNavButton.requestLayout();
showBuildingCollectionNavButton.startAnimation(showBuildingTapAnimation);
}
My animation itself is here:
<scale
android:duration="075"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:toXScale="1.09"
android:toYScale="1.09"
android:pivotX="50%"
android:pivotY="50%"
/>
<scale
android:duration="075"
android:startOffset="075"
android:fromXScale="1.09"
android:fromYScale="1.09"
android:toXScale="1.0"
android:toYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
/>
I am calling requestLayout() as a few of the posts here talked about issues when the asset was gone or invisible that it wasn't updating...
I think the real issue may be with the context that I am passing into the loadAnimation() call - as I am in a FragmentActivity here...
Thoughts ??
You are displaying your animations for 75 + 75 ms . They are animated but you can not observe them (especially a scale that small)

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

vibrate image in imageview

I need to vibrete image in imageview
For that i used
<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>
implemented like
Animation shake = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.testanimation);
findViewById(R.id.imgview).startAnimation(shake);
working properly.. But i want to shake image on imageview touch down and stop shaking when user touch up imageview
imgview.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
System.out.println(event.getAction());
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//WANT VIBRATEING/SHAKEING IMAGE
break;
case MotionEvent.ACTION_UP:
//WANT TO STOP VIBRATEING/SHAKING IMAGE
break;
}
break;
}
How to make it possible?
Thanks,
Pragna
<?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" />
shaking / wobble view animation in android

Categories

Resources