Slide out effect (translationX) doesn't work with LayoutTransition + ObjectAnimator

Question

I tend to have a slide out effect, when I make a View invisible (Not gone) in LinearLayout.

My expect animation effect are :-

1. The view will fade out slowly (alpha)
2. The view will slide from left toward right (translationX)

I try to achieve such effect via LayoutTransition + ObjectAnimator, by referring to official API demo LayoutAnimationsHideShow.java

However, for my case, only the alpha effect will work. I fail to make translationX effect work.

Here's my outcome in Video : http://youtu.be/iU9ArUFvgbY

The complete code example is as follow.

LayoutAnimationsHideShow.java

public class LayoutAnimationsHideShow extends Activity {

    private int numButtons = 1;
    ViewGroup container = null;
    private LayoutTransition mTransitioner;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_animations_hideshow);

        container = new LinearLayout(this);
        container.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT));

        // Add a slew of buttons to the container. We won't add any more buttons at runtime, but
        // will just show/hide the buttons we've already created
        for (int i = 0; i < 4; ++i) {
            Button newButton = new Button(this);
            newButton.setText(String.valueOf(i));
            container.addView(newButton);
            newButton.setOnClickListener(new View.OnClickListener() {
                public void onClick(View v) {
                    v.setVisibility(View.INVISIBLE);
                }
            });
        }

        resetTransition();

        ViewGroup parent = (ViewGroup) findViewById(R.id.parent);
        parent.addView(container);

        Button addButton = (Button) findViewById(R.id.addNewButton);
        addButton.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                for (int i = 0; i < container.getChildCount(); ++i) {
                    View view = (View) container.getChildAt(i);
                    view.setVisibility(View.VISIBLE);
                }
            }
        });

        setupCustomAnimations();
        long duration = 500;
        mTransitioner.setDuration(duration);
    }

    private void resetTransition() {
        mTransitioner = new LayoutTransition();
        container.setLayoutTransition(mTransitioner);
    }

    private void setupCustomAnimations() {
        mTransitioner.setAnimator(LayoutTransition.APPEARING, null);
        mTransitioner.setAnimator(LayoutTransition.CHANGE_APPEARING, null);
        mTransitioner.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, null);

        final WindowManager wm = (WindowManager) this.getSystemService(Context.WINDOW_SERVICE);
        int width = wm.getDefaultDisplay().getWidth();

        // Removing
        ObjectAnimator animOut = ObjectAnimator.
                ofFloat(null, "translationX", 0f, (float)width).
                ofFloat(null, "alpha", 1f, 0f).
                setDuration(mTransitioner.getDuration(LayoutTransition.DISAPPEARING));
        mTransitioner.setAnimator(LayoutTransition.DISAPPEARING, animOut);
        animOut.addListener(new AnimatorListenerAdapter() {
            public void onAnimationEnd(Animator anim) {
                View view = (View) ((ObjectAnimator) anim).getTarget();
                view.setAlpha(0f);
            }
        });

    }
}

layout_animations_hideshow.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/parent"
    >
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Show Buttons"
            android:id="@+id/addNewButton"
            />
    </LinearLayout>
</LinearLayout>

I was wondering, is there anything I had done wrong, which causes slide from left toward right animation effect doesn't work?

Answer 1

Pretty sure you need to be using an ObjectAnimator.of(PropertyValuesHolder) to animate multiple properties in parallel. The second call to ofFloat(null, "alpha", 1f, 0f) is just overriding the first instance, so the translation is never set.

ex:

public static ValueAnimator ofFloat(float... values) {
        ValueAnimator anim = new ValueAnimator();
        anim.setFloatValues(values);
        return anim;
    }

A good video on how to handle animations can be found here.