Fragment Standard Transition Not Animating

Fragment standard transition not animating

I finally got this to work after much trial and error.

First and foremost, get the lastest ACL, it did fix custom animations, and while this was not my exact problem, once those worked I ended up using them instead of standard transitions.

Right now I am using:

ft.setCustomAnimations(android.R.anim.fade_in,android.R.anim.fade_out,android.R.anim.fade_in,android.R.anim.fade_out);

The key to making it work on both Android 2.1, 2.2 and 2.3, as well as Android 3.0+ was to do the following:

• Make sure you are using ONLY API´s available to the lowest API LEVEL you wish to support (in my case 2.1).
• Compile using Android 3.0.
• In the manifest file, set android:hardwareAccelerated="true" inside your application tag.

Fragment animations now work on all devices. If you do not set the extra info in the application tag, the animation will occur, but in a very very choppy way, making it seem as though it did not happen at all.

Hope this helps someone in the future!

As a note, there are some API checking tools so you are sure you are not using any APIs that aren't available to you. I prefer to work on 2.1 so the IDE doesn't show anything I can't use, once I have stable code I jump back to compiling on 3.0

Animate the transition between fragments

You need to use the new android.animation framework (object animators) with FragmentTransaction.setCustomAnimations as well as FragmentTransaction.setTransition.

Here's an example on using setCustomAnimations from ApiDemos' FragmentHideShow.java:

ft.setCustomAnimations(android.R.animator.fade_in, android.R.animator.fade_out);

and here's the relevant animator XML from res/animator/fade_in.xml:

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/accelerate_quad"
    android:valueFrom="0"
    android:valueTo="1"
    android:propertyName="alpha"
    android:duration="@android:integer/config_mediumAnimTime" />

Note that you can combine multiple animators using <set>, just as you could with the older animation framework.

---

EDIT: Since folks are asking about slide-in/slide-out, I'll comment on that here.

Slide-in and slide-out

You can of course animate the translationX, translationY, x, and y properties, but generally slides involve animating content to and from off-screen. As far as I know there aren't any transition properties that use relative values. However, this doesn't prevent you from writing them yourself. Remember that property animations simply require getter and setter methods on the objects you're animating (in this case views), so you can just create your own getXFraction and setXFraction methods on your view subclass, like this:

public class MyFrameLayout extends FrameLayout {
    ...
    public float getXFraction() {
        return getX() / getWidth(); // TODO: guard divide-by-zero
    }

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

Now you can animate the 'xFraction' property, like this:

res/animator/slide_in.xml:

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

Note that if the object you're animating in isn't the same width as its parent, things won't look quite right, so you may need to tweak your property implementation to suit your use case.

Android Fragments and animation

To animate the transition between fragments, or to animate the process of showing or hiding a fragment you use the Fragment Manager to create a Fragment Transaction.

Within each Fragment Transaction you can specify in and out animations that will be used for show and hide respectively (or both when replace is used).

The following code shows how you would replace a fragment by sliding out one fragment and sliding the other one in it's place.

FragmentTransaction ft = getFragmentManager().beginTransaction();
ft.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right);

DetailsFragment newFragment = DetailsFragment.newInstance();

ft.replace(R.id.details_fragment_container, newFragment, "detailFragment");

// Start the animated transition.
ft.commit();

To achieve the same thing with hiding or showing a fragment you'd simply call ft.show or ft.hide, passing in the Fragment you wish to show or hide respectively.

For reference, the XML animation definitions would use the objectAnimator tag. An example of slide_in_left might look something like this:

<?xml version="1.0" encoding="utf-8"?>
<set>
  <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="x" 
    android:valueType="floatType"
    android:valueFrom="-1280"
    android:valueTo="0" 
    android:duration="500"/>
</set>

Nested fragments disappear during transition animation

In order to avoid the user seeing the nested fragments disappearing when the parent fragment is removed/replaced in a transaction you could "simulate" those fragments still being present by providing an image of them, as they appeared on the screen. This image will be used as a background for the nested fragments container so even if the views of the nested fragment go away the image will simulate their presence. Also, I don't see loosing the interactivity with the nested fragment's views as a problem because I don't think you would want the user to act on them when they are just in the process of being removed(probably as a user action as well).

I've made a little example with setting up the background image(something basic).

Animating fragments and the back stack

The bug was fixed in the 3.2 release with the addition of the following new api:

http://developer.android.com/reference/android/app/FragmentTransaction.html#setCustomAnimations(int, int, int, int)

It's to be noted that it has not yet been back-ported to the compatibility library (as mentioned in the bug report).

How can I implement fragment animation?

The problem was that I replaced the fragment first and then I applied
the animation. It has an order:

getSupportFragmentManager().beginTransaction()
                        .setCustomAnimations(R.anim.slide_in,R.anim.slide_out)
                        .replace(R.id.frag_container, fragment)
                        .comit()

---

Related Topics