Android - creating translations and objectAnimator in one XML file

Question

I am trying to make the effect of the rotation of a 3D Cube while moving from one fragment to another. First I used the translation method (in XML) with FragmentTransaction.setCustomAnimations(...) , and then, opening / closing the fragment, I played with the camera class to make the rotation.

It worked FINE, but it looks like I have (don't ask me why), using all this animation, using only an XML file. After a long search, I found out that I should use objectAnimator to rotate.

A Google sample followed, and I managed to create a flip animation. Now I need to translate the fragments, making them slide and slide out. I can't seem to use objectAnimator and translate the effect in the same XML file. Since this error appears:

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

Any ideas on how I can make the slide effect and use objectAnimator at the same time?

Thank you for your time!

The code I used:

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 causing another fragment: (between it, rotation of cube 2 should be visible)

 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 was able to solve the previous problem using a class that extends the scope of my fragments that I use

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 adding this to the Animator object:

 <!-- 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 works better, but the rotation axes are in the middle of the FrameLayout, and this does not create the illusion of a cube ... Is it possible to set the rotation axes at a certain point?

Answer 1

Solved the problem by creating my own methods in the extended FrameLayout. Here is 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 in 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 indicates the duration of the entire animation, and @integer/card_flip_rotation_off indicates degrees (in this case, -90%).

After that, all I need to do to make this animation work is to install the xml files in the user animation when the fragment starts

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

Hope this can be useful for someone ^^

Answer 2

An alternative to the accepted answer, you can define a set of animators, as shown 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?