Android - Making translations and objectAnimator on the same XML file

Question

I've been trying to make a 3D Cube rotation effect while sliding from one fragment to another. First i was using a translate effect (on XML) calling with FragmentTransaction.setCustomAnimations(...) and then, when opening/closing the fragment, i was playing with the Camera classe to make the rotation.

This was working FINE, but seems that I HAVE TOO (don't ask me why) use all of this animation using only XML file. After a long search i found out that i should use objectAnimator to make the rotation.

Followed the Google sample and i manage to make the flip animation. Now i need to translate the fragments making them sliding in and sliding out. Seems that i can't use objectAnimator and translate effect on the same XML file. Since this error appears:

java.lang.RuntimeException: Unknown animator name: translate at (...)

Any ideas on how i can make the sliding effect and use the objectAnimator on the same time?

Thank you for your time!

Code i've been using:

card_flip_right_in.xml

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

    <!-- Rotate. -->
    <objectAnimator
        android:duration="@integer/card_flip_time_full"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:propertyName="rotationY"
        android:valueFrom="180"
        android:valueTo="0" />

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

</set>

Fragment calling another fragment: (cube rotation should be visible between this 2)

private void launchArticle(int prev, int pos){
        ArticleFragment newFragment = new ArticleFragment();
        Bundle args = new Bundle();
        args.putString("pos", pos);
        args.putInt("prev", prev);
        newFragment.setArguments(args);
        android.app.FragmentTransaction transaction = getFragmentManager().beginTransaction();
        Fragment currFrag = (Fragment)getFragmentManager().findFragmentById(R.id.headlines_fragment);
        if (currFrag != null) {
                transaction.hide(currFrag);
        }
        transaction.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
                );

        transaction.replace(R.id.fragment_container, newFragment, pos);
        transaction.addToBackStack(null);

        transaction.commit();
}

UPDATE:

I've manage to solve the previous problem using a class that extends my framelayout of the fragments i'm using

SlidingFrameLayout.java

public class SlidingFrameLayout extends FrameLayout
{
    private static final String TAG = SlidingFrameLayout.class.getName();
    public SlidingFrameLayout(Context context) {
        super(context);
    }

    public SlidingFrameLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public float getXFraction()
    {
        final int width = getWidth();  
        if(width != 0) return getX() / getWidth();  
        else return getX();  
    }

    public void setXFraction(float xFraction) {
        final int width = getWidth();  
        setX((width > 0) ? (xFraction * width) : -9999);  
    }

    public float getYFraction()
    {
        final int height = getHeight();  
        if(height != 0) return getY() / getHeight(); else return getY();   
    }

    public void setYFraction(float yFraction) {
        final int height = getHeight();  
        setY((height > 0) ? (yFraction * height) : -9999);  
    }
}

and by adding this to the objectAnimator:

<!-- Move -->
    <objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="@integer/card_flip_time_full"
        android:interpolator="@android:anim/linear_interpolator"
        android:propertyName="xFraction"
        android:valueFrom="-1"
        android:valueTo="0" />

This is working better, but the rottation axes are in the middle of the FrameLayout and it's not making the illusion of a cube... Is it possible to set the rotation axes on a certain point?

Answer 1

Solved the problem by creating my own methods on the extended FrameLayout. Here's the code from the extended FrameLayout:

//Rotate from Left to Right turning visible
    public float getRotateLeftRightIn(){
        return getRotationY();
    }
    public void setRotateLeftRightIn(int rotateLeftRightIn){
        setPivotX(getWidth());
        setPivotY(getHeight()/2);
        setRotationY(rotateLeftRightIn);
    }

And on the XML:

<!-- Rotate. -->
<objectAnimator
    android:duration="@integer/card_flip_time_full"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:propertyName="rotateLeftRightIn"
    android:valueFrom="@integer/card_flip_rotation_off"
    android:valueTo="0" 
    android:valueType="intType"/>

In this case, @integer/card_flip_time_full stands for the duration of the entire animation and @integer/card_flip_rotation_off stands for the degrees (in this case -90%).

After this, all I need to do to make this animation to work is, when starting the fragment, set the xml files in the custom animation

transaction.setCustomAnimations(enter,exit,popEnter,popExit);

Hope this can be useful to some one ^^

Answer 2

An alternative to the answer accepted, you could define an animator set, as seen here:

  <item android:state_pressed="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="2"
        android:valueType="floatType"/>
        <!-- you could have other objectAnimator elements
             here for "x" and "y", or other properties -->
    </set>   
  </item>   

  <item android:state_enabled="true"
    android:state_pressed="false"
    android:state_focused="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="2"
        android:valueType="floatType"/>
    </set> 
  </item> 

How to use StateListAnimator?