3D Flip Animation on android.support.v4.Fragment

Question

I am currently reading this tutorial:

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

on flip Animations of Fragments. Unfortunately, the object-animator is only available for android.app.Fragment, and not the support Fragment.

I tried to reconstruct the .xml animations using scale and rotation animations. But now the animations are just not executed, and after the time that I've set in the animations .xml file passes, the other Fragment appears, instead of flipping.

Did I simply make a misstake in implementing the .xml animations?
Or is it not possible to do a 3D flip animation without object-animator?
Or is it not possible to do a 3D flip animation with the support Fragment?

Here are my .xml animations: flip_left_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" >

  <!-- Before rotating, immediately set the alpha to 0. -->
 <alpha
    android:valueFrom="1.0"
    android:valueTo="0.0"
    android:propertyName="alpha"
    android:duration="0" />

 <!-- Rotate. -->
 <rotate
    android:valueFrom="-180"
    android:valueTo="0"
    android:propertyName="rotationY"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:duration="800"/>

<!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
<alpha
    android:valueFrom="0.0"
    android:valueTo="1.0"
    android:startOffset="400"
    android:duration="1" /> 
</set>

flip_left_out.xml

 <set xmlns:android="http://schemas.android.com/apk/res/android" >

   <!-- Rotate. -->
   <rotate
    android:duration="800"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:propertyName="rotationY"
    android:valueFrom="0"
    android:valueTo="180" />

<!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
<alpha
    android:duration="1"
    android:propertyName="alpha"
    android:startOffset="400"
    android:valueFrom="1.0"
    android:valueTo="0.0" />

 </set>

flip_right_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Before rotating, immediately set the alpha to 0. -->
<alpha
    android:duration="0"
    android:propertyName="alpha"
    android:valueFrom="1.0"
    android:valueTo="0.0" />

<!-- Rotate. -->
<rotate
    android:duration="800"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:propertyName="rotationY"
    android:valueFrom="180"
    android:valueTo="0" />

<!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
<alpha
    android:duration="1"
    android:propertyName="alpha"
    android:startOffset="400"
    android:valueFrom="0.0"
    android:valueTo="1.0" />

  </set>

flip_right_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Rotate. -->
<rotate
    android:duration="800"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:propertyName="rotationY"
    android:valueFrom="0"
    android:valueTo="-180" />

<!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
<alpha
    android:duration="1"
    android:propertyName="alpha"
    android:startOffset="400"
    android:valueFrom="1.0"
    android:valueTo="0.0" />

 </set>

And here is the code where they are executed:

FragmentTransaction trans = getActivity().getSupportFragmentManager().beginTransaction();

trans.setCustomAnimations(R.anim.flip_right_in, R.anim.flip_right_out, 
                           R.anim.flip_left_in, R.anim.flip_left_out);
trans.addToBackStack(null);

trans.replace(R.id.content_frame, new MyFragment()).commit();

Did you made 3d flip effect? can you please tell me how you've replaced the above code with object animator? — , Sep 26 '16 at 12:50

score 3 · Accepted Answer · answered Aug 27 '13 at 13:59

3

You can use NineOldAndroids. It backports the Honeycomb (Android 3.0) animation API all the way back to Android 1.0. You'll get ObjectAnimator, ValueAnimator and all the other good stuff.

answered Aug 27 '13 at 13:59

Anup Cowkur

20,443
6
51
84

And how exactly would the 3D flip animation work then? Would I just be able to use objectanimator even on my support Fragment? – Philipp Jahoda Aug 27 '13 at 14:03
Yup. That's all you have to do. – Anup Cowkur Aug 27 '13 at 14:05
2

I imported the library, replaced my .xml animations with the object animator .xml files, but I'm getting an error: Unknown animation name: object Animator – Philipp Jahoda Aug 27 '13 at 14:20
are you sure you imported and used it correctly? See a sample xml file here: https://github.com/JakeWharton/NineOldAndroids/blob/master/sample/res/anim/object_animator.xml – Anup Cowkur Aug 27 '13 at 14:39
I copied die animations from the google tutorial, and added the library like i would add any other library. :) But i will try and readadd id and do stuff like clean^^ – Philipp Jahoda Aug 27 '13 at 18:29
@PhilippJahoda could you please tell me where I can find your answer :) Thanks. – Arkadiusz 'flies' Rzadkowolski Mar 05 '14 at 21:53
Hi @PhilippJahoda Can you share how you solved it? I am facing same problem. Thanks – Martin Vandzura Mar 06 '14 at 13:30
Yes, please have a look at my answer below, I just undeleted it. I originally deleted it because it somehow got down voted. – Philipp Jahoda Mar 06 '14 at 13:50
1

@AnupCowkur Are you sure you can just use NineOldAndroids? I am also getting the error `Unknown animation name: object Animator`. – theblang Aug 20 '14 at 15:26

Philipp Jahoda · Answer 2 · 2014-03-06T13:51:31.747

2

Thank you all for your help.

I managed to solve my problem. The solution has to do with NineOldAndroids and another Library with support-v4 support for NineOldAndroids.

What I did:

I downloaded this library: https://github.com/kedzie/Support_v4_NineOldAndroids (This is a support library for NineOldAndroids)
Imported it into my workspace
Downloaded the NineOldAndroids Library and imported it into my workspace
Imported the NineOldAndroids library into the support-v4 Library
Imported the support-v4-nineoldandroids library into my project
Did the Filp-Animation

edited Mar 06 '14 at 13:51

answered Aug 29 '13 at 12:43

Philipp Jahoda

50,880
24
180
187

If smb have issues with "support-v4 support for NineOldAndroids" importing etc. - make sure your ADT is up to date. Like if this support-v4 built against API 19 it has to be available in your ADT. I had issues cuz my ADT had only API 18. The solution was to update ADT to the latest version. – Stan Apr 20 '14 at 15:14
how to do with support-v4 support for NineOldAndroids using android studio – Sathish Kumar J Jun 13 '17 at 12:27

score 1 · Answer 3 · edited Jun 14 '17 at 13:28

In case if you are not supporting below api<3

use the same code as given in: https://stuff.mit.edu/afs/sipb/project/android/docs/training/animation/cardflip.html

just tweaked the flipCard method to:

private void flipCard() {
if (mShowingBack) {
    mShowingBack = false;
    FragmentTransaction trans = getActivity().getFragmentManager().beginTransaction();
    trans.setCustomAnimations(R.animator.card_flip_right_in,
            R.animator.card_flip_right_out,
            R.animator.card_flip_left_in,
            R.animator.card_flip_left_out)
         .replace(R.id.memberCardContainer, new CardFrontFragment())
         .commit();
    return;
}

// Flip to the back.
mShowingBack = true;
FragmentTransaction trans = getActivity().getFragmentManager().beginTransaction();
trans.setCustomAnimations(R.animator.card_flip_right_in,
        R.animator.card_flip_right_out,
        R.animator.card_flip_left_in,
        R.animator.card_flip_left_out)
     .replace(R.id.memberCardContainer, new CardBackFragment())
     .commit();
}

This gives a conversion error when your fragment classes extend the support v4 fragment — Eli, Aug 06 '17 at 16:03

3D Flip Animation on android.support.v4.Fragment

3 Answers3

Linked