Card Flip Animation between Activities

Question

How to do Card-Flip Animation between Activities

http://developer.android.com/training/animation/cardflip.html

The above link Switches Between Static Layouts.. I want to do a CardFlip Between 2 Activities having a dynamic layout..Thanks in Advance..:)

I have two activities...

1. A Main_Activity that Contains Details of a product(Say Galaxy s3)
2. A Search_Activity that queries the users search request..

There is a search button in the Main_Activity. When you click the button the Main_Activity view must card flip to Search_Activity. Similarly Once the user selects a product it should Card-Flip vice-verse.

I tried to implement as mentioned as in the Above URL.. But It only flips between two static layouts defined using XML. And I am implementing Search in the ActionBar

Answer 1

From what I've got you can't do exactly that same card flip between activities.
BUT,
as you might already know you need overridePendingTransition() in order to animate transition between activities (doc here). Now all you need is an animation resource to do the trick. I used these:
fade_in.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
    android:duration="200"
    android:fromXScale="0.0"
    android:fromYScale="1.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:startOffset="200"
    android:toXScale="1.0"
    android:toYScale="1.0" />

<alpha
    android:duration="1"
    android:fromAlpha="0.0"
    android:startOffset="200"
    android:toAlpha="1.0" />
</set>

fade_out.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
    android:duration="200"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toXScale="0.0"
    android:toYScale="1.0" />

<alpha
    android:duration="1"
    android:fromAlpha="1.0"
    android:startOffset="200"
    android:toAlpha="0.0" />
</set>

Notice that the rotate animation rotates only around the Z-axis (the one going into the screen) at a given pivot position (x, y coordinates) so you can't use it to flip around the Y-axis.
What I've done is to scale the width around the middle while keeping the height which creates the illusion of the activity turning on it's side. Also, the entering and the exiting activities fade in and out respectively when the width is 0 so it looks like they are switching. The duration attribute of the scale of the flip in animation must be the same as all the startOffset attribute of both animations.
Not perfect but did the trick for me.
Hope it helps.

Answer 2

It is not possible to do a card flip animation between activities as simply as stated in the accepted answer (which just expands the new activity from the middle of the screen to the sides).

The reason for that, is that when calling overridePendingTransition(), you are just applying an animation to the activity that starts, not to the one that is currently open.

In the (very good) tutorial that is linked to, there are 4 animations in total, which is 2 animations per transition (one for the fragment that's entering the screen, and one for the fragment that's exiting the screen).

Here is how I solved that problem and made a flip card animation between my 2 activities, but it is very custom to the content of my activities. For some context, my first activity contains a full screen image, and I just wanted that image to be flipped to another view of the same size.

1. Disable the automatic window animations, by calling overridePendingTransition(0, 0)
2. In the bundle to the second activity, pass enough information for the new activity to recreate the view (for me, it was the size and position of the image, and the resource to load)
3. Setup a onPreDrawListener on your new view, in which you re-create the view of your parent activity (the image in my case)
4. You just have to flip the 2 views. For that I rewrote the code that was in the Flip Card fragment transition tutorial you posted, and rewrote it in code using ObjectAnimators.
5. Override your onBackPressed() method to run the same animation in reverse order

With this mechanism, you can do absolutely any custom transition, as you're just animating between views. Here is some more info about that technique: https://www.youtube.com/watch?v=ihzZrS69i_s#t=1001

Answer 3

You can make Card-Flip Animation Like this(attached gif) between two Activities.

Follow these Steps:

First of all create XML fade_in.xml in anim res > anim > fade_in.xml

fade_in.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="2000"
        android:fromXScale="0.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="2000"
        android:toXScale="1.0"
        android:toYScale="1.0" />

    <alpha
        android:duration="1"
        android:fromAlpha="0.0"
        android:startOffset="2000"
        android:toAlpha="1.0" />
</set>

then create a second XML fade_out.xml in anim res > anim > fade_out.xml

fade_out.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >
    <scale
        android:duration="2000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.0"
        android:toYScale="1.0" />

    <alpha
        android:duration="1"
        android:fromAlpha="1.0"
        android:startOffset="2000" 
        android:toAlpha="0.0" />
</set>

after create both anim XML then set value inside res>value>style.xml

now add this code carefully inside style.xml for set card-flip animation in all activities. (if you want this animation between selected two activities then set animation in .java .)

add code in style.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>    

                            <!-- add code below -->
       <item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
   </style>

   <style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
       <item name="android:activityOpenEnterAnimation">@anim/fade_in</item>
       <item name="android:activityOpenExitAnimation">@anim/fade_out</item>
       <item name="android:activityCloseEnterAnimation">@anim/fade_in</item>
       <item name="android:activityCloseExitAnimation">@anim/fade_out</item>
   </style>

</resources>

Thanks !! Happy Coding :)