Flip ImageView Vertically and Horizontally Use Property Animation

In Android Property animation creates an animation by modifying an object's property values over a set period of time. With property animation we can animate almost any object. You can define duration, interpolation, repeat count, animation set and frame refesh time.
In this post we will animate ImageView to flip vertically and horizontally at the same time each time we tap the screen. ImageView have 3 properties that 2 of them we will use in this project ie. "rotationX" to flip vertically and "rotationY" to flip horizontally.
Now create new project and add these 2 image to drawable-mdpi folder :

In activity_main.xml declare four imageview with id: iview1,iview2,iview3,iview4, set all of them at the same place, in this project is in the center of screen and set visibility 2 of them ie. iview2 and iview4 as gone. We will flip iview1 and iview2 as a couple horizontally and iview3 and iview4 vertically.

In MainActivity.java class inside onCreate inflate xml resources above and set image resource for each of them. We create cuatom methode called flipimage. Inside this methode we will animate imageview using ObjectAnimator. This animator have four parameter that we need to fullfill, first is object, in this project is imageview (visibleimg,invisibleimg,visibleimg1,invisibleimg1) , second is name of object's property as string (rotationX, rotationY), thirth is value of from and fouth are value of to in float. In this ObjectAnimator we can set duration (ms) and set interpolator. Also use AnimationListenerAdapter to listen the end of first image animation to start the second one. Both animation (rotationX and rotationY) run at the same time for both couple imageviews. Override onTouchEvent to run flipimage methode every screen tapped.

This project need android API 11 or above and already tested with emulator.
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <ImageView
        android:id="@+id/iview1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
    <ImageView
        android:id="@+id/iview2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="gone"/>
    <ImageView
        android:id="@+id/iview3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
    <ImageView
        android:id="@+id/iview4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="gone"/>
    
</RelativeLayout>

MainActivity.java

package com.example.animation2;

import android.animation.AnimatorListenerAdapter;
import android.animation.Animator;
import android.animation.ObjectAnimator;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.Interpolator;
import android.widget.ImageView;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;


public class MainActivity extends Activity 
{
    private ImageView iview1,iview2,iview3,iview4;
    private Interpolator accelerator = new AccelerateInterpolator();
    private Interpolator decelerator = new DecelerateInterpolator();
    private ObjectAnimator visinvis,invisvis,visinvis1,invisvis1;

    @Override
    public void onCreate(Bundle savedInstanceState) 
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        //this 2 image flipped horizontally
        iview1 = (ImageView) findViewById(R.id.iview1);
        iview1.setImageResource(R.drawable.kartukid11);
        iview2 = (ImageView) findViewById(R.id.iview2);
        iview2.setImageResource(R.drawable.kartukid114);
        
      //this 2 image flipped vertically
        iview3 = (ImageView) findViewById(R.id.iview3);
        iview3.setImageResource(R.drawable.kartukid11);
        iview4 = (ImageView) findViewById(R.id.iview4);
        iview4.setImageResource(R.drawable.kartukid114);
        
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) 
    {
        //when tapped run flipimage methode
    	if (event.getAction() == MotionEvent.ACTION_DOWN) {flipimage();}
        return true;
    }
    
    private void flipimage() 
    {
    	//first image box flipped horizontally
    	final ImageView visibleimg,invisibleimg;
    	//switch visibleimg from iview1 to iview2 vice versa
    	if (iview1.getVisibility() == View.GONE) 
        {
            visibleimg = iview2;
            invisibleimg = iview1;
        } 
        else 
        {
            invisibleimg = iview2;
            visibleimg = iview1;
        }
    	//animate property rotationY of imageview (hide)use acceleratorinterpolator
        visinvis = ObjectAnimator.ofFloat(visibleimg,"rotationY", 0f, 90f);
        visinvis.setDuration(500);
        visinvis.setInterpolator(accelerator);
       //animate property rotationY of imageview (show) use deceleratorinterpolator
        invisvis = ObjectAnimator.ofFloat(invisibleimg,"rotationY",-90f, 0f);
        invisvis.setDuration(500);
        invisvis.setInterpolator(decelerator);
        //listen to end of first image animation, make it gone & 
        //start second image animation
    	visinvis.addListener(new AnimatorListenerAdapter() 
        {
            @Override
            public void onAnimationEnd(Animator anim) 
            {
                visibleimg.setVisibility(View.GONE);
                invisvis.start();
                invisibleimg.setVisibility(View.VISIBLE);
            }
        });
    	visinvis.start();
    	
    	//second image box flipped vertically
    	final ImageView visibleimg1,invisibleimg1;
    	//switch visibleimg1 from iview3 to iview4 vice versa
    	if (iview3.getVisibility() == View.GONE) 
        {
            visibleimg1 = iview4;
            invisibleimg1 = iview3;
        } 
        else 
        {
            invisibleimg1 = iview4;
            visibleimg1 = iview3;
        }
    	//animate property rotationX of imageview (hide)use acceleratorinterpolator
    	visinvis1 = ObjectAnimator.ofFloat(visibleimg1, "rotationX", 0f, 90f);
        visinvis1.setDuration(500);
        visinvis1.setInterpolator(accelerator);
        //animate property rotationX of imageview (show)use deceleratorinterpolator
        invisvis1 = ObjectAnimator.ofFloat(invisibleimg1,"rotationX",-90f, 0f);
        invisvis1.setDuration(500);
        invisvis1.setInterpolator(decelerator);
        //listen to end of first image	animation, make it gone 
        //& start second image animation
    	visinvis1.addListener(new AnimatorListenerAdapter() 
        {
            @Override
            public void onAnimationEnd(Animator anim) 
            {
                visibleimg1.setVisibility(View.GONE);
                invisvis1.start();
                invisibleimg1.setVisibility(View.VISIBLE);
            }
        });
    	visinvis1.start();
                
    }
}

Captures of emulator :