Flipping and changing image in ImageView

Question

I am working on a App that is simple in work and it is working quite efficiently. But I have one place where I am looking something is not looking great and that is flipping Animation.

What I Want :

I have a Button and a ImageView beneath the button. On a Button click I want to make a Animation that it looks like ImageView has flipped and next image is shown in the ImageView. So on every click it should show next image with a flipping animation but there are some problems. I would discuss later but first let me show you how I am doing this.

What I have done so far :

flipping.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:valueFrom="0" android:valueTo="180" android:propertyName="rotationY" >
</objectAnimator>

in Activity

@Override
public void onClick(View v) {
     flipAnimation();
     ivAnimPicture.setImageResource(myImage1);      
}

private void flipAnimation(){
    ObjectAnimator anim = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.flipping);
    anim.setTarget(ivAnimPicture);
    anim.setDuration(1500);
    anim.start();
}

Problem

When It rotates to 180 from 0 , when it comes exactly at 90 degree we can see image view edges so it makes the animation look not so good. and Also the image changes first then the Flipping animation starts where as I want that Flipping animation should start and in the middle of it the new image should appear. so when the animation stops there should be surprisingly new image for the user. So I really do not want Image to set in the image-view and then the Animation starts and Animate the image view

Please suggest me more good way or if there is library which is not obsolete.

Answer 1

Chathuranga's solution will do the job. but you better:

1.Use ViewPropertyAnimator. Specially, when you need to perform different animations on several ImageViews.

2.rotate from 270f to 360f for second flip, otherwise your image will be mirrored.

3.Load your second Image into a Drawable before starting the animation, to have a smooth rotation.

final Drawable drawable=getResources().getDrawable(R.drawable.a);
final ImageView iv = ((ImageView)findViewById(R.id.imageView1));
iv.setRotationY(0f);
iv.animate().rotationY(90f).setListener(new AnimatorListenerAdapter()
{
    @Override
    public void onAnimationEnd(Animator animation)
    {
        iv.setImageDrawable(drawable);
        iv.setRotationY(270f);
        iv.animate().rotationY(360f).setListener(null);
    }
});

Answer 2

I was in your situation trying to figure out how to get this animation done. Here's how I achieve this.

you need to define two animations. one to rotate from 0 degree to 90 degree and other for to rote from 90 degree to 180 degree

flipstage1.xml

<?xml version="1.0" encoding="utf-8"?>
   <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="rotationY"
    android:valueFrom="0"
    android:valueTo="90">
</objectAnimator>

flipstage2.xml

<?xml version="1.0" encoding="utf-8"?>
   <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="rotationY"
    android:valueFrom="90"
    android:valueTo="180">
</objectAnimator>

Place these two files under res/animator

In your code start first animation first, add a listener to it. On animation end change the image and start second animation.

            ObjectAnimator animStage1 = (ObjectAnimator) AnimatorInflater.loadAnimator(getActivity(), R.animator.flipstage1);
            final ObjectAnimator animStage2 = (ObjectAnimator) AnimatorInflater.loadAnimator(getActivity(), R.animator.flipstage2);
            animStage1.setTarget(imageIcon1);
            animStage2.setTarget(imageIcon1);
            animStage1.setDuration(500);
            animStage2.setDuration(500);
            animStage1.start();
            animStage1.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    animStage2.start();
                    imageIcon1.setImageDrawable(ResourcesCompat.getDrawable(view.getResources(),R.drawable.okicon,null));
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            });

imageIcon1 is the reference to image view in xml layout.