Card Flip Animation between Activities
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.
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.
- Disable the automatic window animations, by calling
overridePendingTransition(0, 0)
- 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)
- Setup a onPreDrawListener on your new view, in which you re-create the view of your parent activity (the image in my case)
- 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
ObjectAnimator
s. - 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
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 :)