Develop Reference

How to make linear reveal animation instead of circular reveal animation in Android?

I want to animate my button that reveal from left offset of button to right of that. What I want is linear reveal animation instead of circular reveal animation.
Please help me. Thanks.
Update
I want two method that show and hide view based on linear reveal animation.

try below code for linear reveal effect -
public class ViewAnimationUtils {
public static AnimatorSet createLinearReveal(final View viewToReveal, final int offsetWidth, final int offsetHeight, final int duration) {
viewToReveal.clearAnimation();
final int targetWidth = viewToReveal.getMeasuredWidth();
final int targetHeight = viewToReveal.getMeasuredHeight();
viewToReveal.getLayoutParams().height = offsetHeight;
viewToReveal.requestLayout();
final ValueAnimator heightAnimator = ValueAnimator
.ofInt(offsetHeight, targetHeight)
.setDuration(duration);
heightAnimator.addUpdateListener(animation -> {
viewToReveal.getLayoutParams().height = (int) animation.getAnimatedValue();
viewToReveal.requestLayout();
});
final ValueAnimator widthAnimator = ValueAnimator
.ofInt(offsetWidth, targetWidth)
.setDuration(duration);
widthAnimator.addUpdateListener(animation -> {
viewToReveal.getLayoutParams().width = (int) animation.getAnimatedValue();
viewToReveal.requestLayout();
});
final AnimatorSet set = new AnimatorSet();
set.playSequentially(widthAnimator, heightAnimator);
set.setInterpolator(new AccelerateInterpolator());
return set;
}
}
after adding this class just pass your view to animate and offset values to the createLinearReveal method.

Android alpha and AlphaAnimation

In imageAdapter class, I set the image alpha to 0.5 handler.imageView.setAlpha(0.5f); inside a try/catch.
It's made like this, and not inside the layout xml, because previous versions of android haves int instead of float, so, in the catch, setAlpha is 128.
In the activity, I have an AlphaAnimation(float from, float to) so I can make smoother transitions when sliding between items. I've put from = 0.5f to match the initial value, and to = 1.0f to full opaque image. I really achieved a part from this. The item that is not selected shows an alpha with 0.5, but when it's selected, it's not 100% opaque, just a bit more.
Activity code:
private View antView = null; //Last view seen
...
gallery.setOnItemSelectedListener(new OnItemSelectedListener() {
public void onItemSelected(AdapterView<?> parent, View v, int position, long id) {
if(antView != null)
setItemViewMode(antView, false);
antView = v;
setItemViewMode(v, true);
}
});
//This method is to detect the item selected, and change styles to selected and the view from before
public void setItemViewMode(View item, boolean selected) {
Animation animationImage;
ImageView img = (ImageView) item.findViewById(R.id.imageView1);
if(selected) {
animationImage = new AlphaAnimation(0.5f, 1.0f);
}
else {
animationImage = new AlphaAnimation(1.0f, 0.5f);
}
animationImage.setDuration(250);
animationImage.setFillAfter(true);
img.startAnimation(animationImage);
}
As said above, the animation occurs, but, the alpha from the selected image is not 100% opaque.
May something wrong setting the opacity inside the animation?

Find it out, someway, I thought that before adding the animation, I should put the opacity to 1.0f and then make the animation from 0.5f to 1.0f, and this worked.
So it would be:
if(selected)
animationImage = new AlphaAnimation(0.5f, 1.0f);
else
animationImage = new AlphaAnimation(1.0f, 0.5f);
img.setAlpha(1.0f);
img.startAnimation(animationImage);

try this...
public void setItemViewMode(View item, boolean selected) {
Animation animationImage;
ImageView img = (ImageView) item.findViewById(R.id.imageView1);
if(selected) {
animationImage = new AlphaAnimation(0f, 1.0f);
}
else {
animationImage = new AlphaAnimation(1.0f, 0f);
}
animationImage.setDuration(250);
animationImage.setFillAfter(true);
img.startAnimation(animationImage);
}

Blinking Alpha Animation With no fade effect

I'm trying to implement a Blink Animation.
This code makes a view to blink fade in and fade out:
AlphaAnimation blink = new AlphaAnimation(0.0f, 1.0f);
blink.setDuration(500);
blink.setStartOffset(0);
//changing it makes more than one animation appear in different time stamps.
blink.setRepeatMode(Animation.REVERSE);
blink.setRepeatCount(Animation.INFINITE);
I have two issues:
setStartOffset(n); --> Changing n makes more than one animation appear in different time stamps. Not synced. I want it to be synced, all animations should appear and dissappear at same time.
I do not want fade in or fade out, simply visible & gone with few millisecond delay.
Is there any other Class of Animation that i had to use, or i had to make a custom animation.
Pls. help.

For animation without the fading you can create your own custom Interpolator:
import android.view.animation.Interpolator;
public class StepInterpolator implements Interpolator {
float mDutyCycle;
public StepInterpolator(float dutyCycle) {
mDutyCycle = dutyCycle;
}
#Override
public float getInterpolation(float input) {
return input < mDutyCycle ? 0 : 1;
}
}
Then set the interpolator in the Animation object:
blink.setInterpolator(new StepInterpolator(0.5f));

So, my answer ... it's a class that toggles visibility of a view in a certain interval. Of course it can be solved differently, maybe you get some inspiration...
public static class ViewBlinker {
private Handler handler = new Handler();
private Runnable blinker;
public ViewBlinker(final View v, final int interval) {
this.blinker = new Runnable() {
#Override
public void run() {
v.setVisibility(v.getVisibility()==View.VISIBLE?View.INVISIBLE:View.VISIBLE);
handler.postDelayed(blinker, interval);
}
};
}
public void startBlinking() {
handler.post(blinker);
}
public void stopBlinking() {
handler.removeCallbacks(blinker);
}
}
and you use it like this :
ViewBlinker blinker = new ViewBlinker(YOUR_BLINK_VIEW, YOUR_BLINK_INTERVAL);
blinker.startBlinking();
and when your view is finished blinking, call
blinker.stopBlinking();

Actually, based on cold ash's answer in 2014, all of his/her code can be simplified as below (thanks to lambda):
blink.setInterpolator(input -> input < 0.5f ? 0 : 1);
Yes, just a single line. Very simple.

Creating a 3D flip animation in Android using XML

I have created a 3D flip of a view using this android tutorial
However, I have done it programmatically and I would like to do it all in xml, if possible. I am not talking about simply shrinking a view to the middle and then back out, but an actual 3D flip.
Is this possible via xml?

Here is the answer, though it only works with 3.0 and above.
1) Create a new resources folder called "animator".
2) Create a new .xml file which I will call "flipping". Use the following xml code:
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:valueFrom="0" android:valueTo="360" android:propertyName="rotationY" >
</objectAnimator>
No, the objectAnimator tags do not start with an uppercase "O".
3) Start the animation with the following code:
ObjectAnimator anim = (ObjectAnimator) AnimatorInflater.loadAnimator(mContext, R.animator.flipping);
anim.setTarget(A View Object reference goes here i.e. ImageView);
anim.setDuration(3000);
anim.start();
I got all this from here.

Since the answers to this question are fairly dated, here is a more modern solution relying on ValueAnimators.
This solution implements a true, visually appealing 3D-flip, because it not just flips the view, but also scales it while it is flipping (this is how Apple does it).
First we set up the ValueAnimator:
mFlipAnimator = ValueAnimator.ofFloat(0f, 1f);
mFlipAnimator.addUpdateListener(new FlipListener(frontView, backView));
And the corresponding update listener:
public class FlipListener implements ValueAnimator.AnimatorUpdateListener {
private final View mFrontView;
private final View mBackView;
private boolean mFlipped;
public FlipListener(final View front, final View back) {
this.mFrontView = front;
this.mBackView = back;
this.mBackView.setVisibility(View.GONE);
}
#Override
public void onAnimationUpdate(final ValueAnimator animation) {
final float value = animation.getAnimatedFraction();
final float scaleValue = 0.625f + (1.5f * (value - 0.5f) * (value - 0.5f));
if(value <= 0.5f){
this.mFrontView.setRotationY(180 * value);
this.mFrontView.setScaleX(scaleValue);
this.mFrontView.setScaleY(scaleValue);
if(mFlipped){
setStateFlipped(false);
}
} else {
this.mBackView.setRotationY(-180 * (1f- value));
this.mBackView.setScaleX(scaleValue);
this.mBackView.setScaleY(scaleValue);
if(!mFlipped){
setStateFlipped(true);
}
}
}
private void setStateFlipped(boolean flipped) {
mFlipped = flipped;
this.mFrontView.setVisibility(flipped ? View.GONE : View.VISIBLE);
this.mBackView.setVisibility(flipped ? View.VISIBLE : View.GONE);
}
}
That's it!
After this setup you can flip the views by calling
mFlipAnimator.start();
and reverse the flip by calling
mFlipAnimator.reverse();
If you want to check if the view is flipped, implement and call this function:
private boolean isFlipped() {
return mFlipAnimator.getAnimatedFraction() == 1;
}
You can also check if the view is currently flipping by implementing this method:
private boolean isFlipping() {
final float currentValue = mFlipAnimator.getAnimatedFraction();
return (currentValue < 1 && currentValue > 0);
}
You can combine the above functions to implement a nice function to toggle the flip, depending on if it is flipped or not:
private void toggleFlip() {
if(isFlipped()){
mFlipAnimator.reverse();
} else {
mFlipAnimator.start();
}
}
That's it! Simple and easy. Enjoy!

I have created a simple program for creating flip of view like :
In Activity you have to create this method, for adding flip_rotation in view.
private void applyRotation(View view)
{
final Flip3dAnimation rotation = new Flip3dAnimation(view);
rotation.applyPropertiesInRotation();
view.startAnimation(rotation);
}
for this, you have to copy main class used to provide flip_rotation.
import android.graphics.Camera;
import android.graphics.Matrix;
import android.util.Log;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Transformation;
public class Flip3dAnimation extends Animation {
private final float mFromDegrees;
private final float mToDegrees;
private final float mCenterX;
private final float mCenterY;
private Camera mCamera;
public Flip3dAnimation(View view) {
mFromDegrees = 0;
mToDegrees = 720;
mCenterX = view.getWidth() / 2.0f;
mCenterY = view.getHeight() / 2.0f;
}
#Override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
mCamera = new Camera();
}
public void applyPropertiesInRotation()
{
this.setDuration(2000);
this.setFillAfter(true);
this.setInterpolator(new AccelerateInterpolator());
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
final float fromDegrees = mFromDegrees;
float degrees = fromDegrees
+ ((mToDegrees - fromDegrees) * interpolatedTime);
final float centerX = mCenterX;
final float centerY = mCenterY;
final Camera camera = mCamera;
final Matrix matrix = t.getMatrix();
camera.save();
Log.e("Degree",""+degrees) ;
Log.e("centerX",""+centerX) ;
Log.e("centerY",""+centerY) ;
camera.rotateY(degrees);
camera.getMatrix(matrix);
camera.restore();
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
}
}

The tutorial or the link by om252345 don't produce believable 3D flips. A simple rotation on the y-axis isn't what's done in iOS. The zoom effect is also needed to create that nice flip feel. For that, take a look at this example.
There is also a video here.

One of the better solution to flip the image with out use of the resource animation , is as follow:-
ObjectAnimator animation = ObjectAnimator.ofFloat(YOUR_IMAGEVIEW, "rotationY", 0.0f, 360f); // HERE 360 IS THE ANGLE OF ROTATE, YOU CAN USE 90, 180 IN PLACE OF IT, ACCORDING TO YOURS REQUIREMENT
animation.setDuration(500); // HERE 500 IS THE DURATION OF THE ANIMATION, YOU CAN INCREASE OR DECREASE ACCORDING TO YOURS REQUIREMENT
animation.setInterpolator(new AccelerateDecelerateInterpolator());
animation.start();

The simplest way to do it is using ViewPropertyAnimator
mImageView.animate().rotationY(360f);
Using the fluent interface you can build more complex and exciting animation.
E.g. you can enable hardware acceleration just call withLayer() method(API 16). More here
If you want to figure out how to create 3d flick animation, please follow here and here
I implemended my own solution only for a research. It includes: cancelation, accelleration, support API >= 15 and is based on Property Animation.
The entire animation includes 4 parts, 2 for each side.
Every objectAnimator has a listener that defines current animation index and represents an image in the onAnimationStart and current play time value in the onAnimationCancel.
It looks like
mQuarterAnim1.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationStart(Animator animation) {
mQuarterCurrentAnimStartIndex = QUARTER_ANIM_INDEX_1;
mImageView.setImageResource(mResIdFrontCard);
}
#Override
public void onAnimationCancel(Animator animation) {
mQuarterCurrentAnimPlayTime = ((ObjectAnimator) animation).getCurrentPlayTime();
}
});
For start set call
mAnimatorSet.play(mQuarterAnim1).before(mQuarterAnim2)
If AnimatorSet was canceled we can calculate delta and run the reverse animation relying on the current index animation and the current play time value.
long degreeDelta = mQuarterCurrentAnimPlayTime * QUARTER_ROTATE / QUARTER_ANIM_DURATION;
if (mQuarterCurrentAnimStartIndex == QUARTER_ANIM_INDEX_1) {
mQuarterAnim4.setFloatValues(degreeDelta, QUARTER_FROM_1);
mQuarterAnim4.setDuration(mQuarterCurrentAnimPlayTime);
mAnimatorSet.play(mQuarterAnim4);
}
A full code snippet you can find here

Just put the view which you're going to animate it in place of viewToFlip.
ObjectAnimator flip = ObjectAnimator.ofFloat(viewToFlip, "rotationY", 0f, 360f); // or rotationX
flip.setDuration(2000); // 2 seconds
flip.start();

Adding to A. Steenbergen's great answer. When flipping the same view (updating a TextView for example) I removed the View.Visibility change in the constructor in order to keep the transition smoother.
public FlipListener(final View front, final View back) {
this.mFrontView = front;
this.mBackView = back;
}

Applying successive animations to ImageView in Android

I would like to apply successive animations (say ScaleAnimation) to an ImageView showing a resource image. The animation is triggered by a button. For example, I would like to incrementally enlarge an image upon each button click.
I've set fillAfter="true" on the animation. However, all the animations start from the original state of the ImageView. It seems as if the ImageView resets its state and the animation is always the same, instead of starting from the final state of the previous animation.
What am I doing wrong?
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button button = (Button)findViewById(R.id.Button01);
button.setOnClickListener(new OnClickListener() {
public void onClick(View arg0) {
animate();
}});
}
private void animate() {
ImageView imageView = (ImageView) findViewById(R.id.ImageView01);
ScaleAnimation scale = new ScaleAnimation((float)1.0, (float)1.5, (float)1.0, (float)1.5);
scale.setFillAfter(true);
scale.setDuration(500);
imageView.startAnimation(scale);
}

It seems as if the ImageView resets
its state and the animation is always
the same, instead of starting from the
final state of the previous animation.
Precisely! I'm sure there's a use for fillAfter="true", but I haven't figured out the point for it yet.
What you need to do is set up an AnimationListener on each Animation of relevance, and do something in the listener's onAnimationEnd() to actually persist the end state of your animation. I haven't played with ScaleAnimation so I'm not quite sure what the way to "persist the end state" would be. If this were an AlphaAnimation, going from 1.0 to 0.0, you would make the widget INVISIBLE or GONE in onAnimationEnd(), for example.

I've had the same problem and created the following code to easily use different animations. It only supports translation and alpha levels for now as I haven't used scaling, but could easily be extended to support more features.
I reset the scroll and the visibility before starting the animation, but that's just because I needed on/off animations.
And the "doEnd" boolean is there to avoid a stack overflow on the recursion (scrollTo calls onAnimationEnd for some obscure reason...)
private void setViewPos(View view, Animation anim, long time){
// Get the transformation
Transformation trans = new Transformation();
anim.getTransformation(time, trans);
// Get the matrix values
float[] values = new float[9];
Matrix m = trans.getMatrix();
m.getValues(values);
// Get the position and apply the scroll
final float x = values[Matrix.MTRANS_X];
final float y = values[Matrix.MTRANS_Y];
view.scrollTo(-(int)x, -(int)y);
// Show/hide depending on final alpha level
if (trans.getAlpha() > 0.5){
view.setVisibility(VISIBLE);
} else {
view.setVisibility(INVISIBLE);
}
}
private void applyAnimation(final View view, final Animation anim){
view.scrollTo(0, 0);
view.setVisibility(VISIBLE);
anim.setAnimationListener(new AnimationListener(){
private boolean doEnd = true;
#Override
public void onAnimationEnd(Animation animation) {
if (doEnd){
doEnd = false;
setViewPos(view, animation, anim.getStartTime() + anim.getDuration());
}
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationStart(Animation animation) {
}
});
view.startAnimation(anim);
}