Slide up and Down animation for Fragment transaction in Android

Question

I am developing an app in Android. I am using a flow to take information form the user. To build the flow I am using few fragments. There are five steps and I am using five fragments. I am using another fragment to show the previous records he saved using list view. In my activity I am using a button named Expand. The button Expand is used to show the previous records using fragment. When the user clicks on the button Expand the fragment will take place and the Expand button text will be set to Hide. When the button text is Hide, if the user clicks on the button again the fragment will be removed from the stack and the previous fragment added to the back stack will be shown.

For example let us assume that I have five fragments named FragmentA, FragmentB, FragmentC, FragmentD, FragmentE and another fragment named ProjectRowsFragment which will be used to show the records previously saved in a ListView on the click event of the button named Expand.

Let us assume that the user is in FragmentC and he clicked on the Expand button. What will happen is that FragmentC will be replaced and ProjectRowsFragment will be added. If the user clicks on the button again the ProjectRowsFragment will be replaced and the FragmentC will come in from back stack. If it was FragmentD then it will be replaced and ProjectRowsFragment will be added and if user clicks on the button again ProjectRowsFragment will be replaced and FragmentD will come in from back stack.

I have done with the transactions.

What I want is that I want animation to be added while the ProjectRowsFragment (The fragment I am using to show the records) is shown and replaced. When it is shown it will slide down from the top and then when it is removed from the back stack it will slide up.

After trying a lot I accomplished the slide down effect, but how can I get the slide up animation.

Here is my codes.

fragmentManager = getFragmentManager();
fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.setCustomAnimations(R.animator.slide_in_from_top, 0, R.animator.slide_in_from_bottom, 0);
fragmentTransaction.replace(R.id.fragment_container, ProjectRowsFragment.newInstance(this.projectId));
fragmentTransaction.addToBackStack(null);
fragmentTransaction.commit();
projectRowsExpanded = true;

slide_in_from_top.xml file is

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

Here i have three images to visualize

Initial Step

If the user clicks on the button indicated a list will be placed.

If the user clicks again in the indicated button.

Answer 1

Instead of applying custom animations to fragment, you can add animation to your FrameLayout , by passing your fragment container view to following functions to expand and collapse:

FrameLayout v = (FrameLayout) findViewById(R.id.fragment_container);
expand(v); //To Expand
collapse(v); //To Collapse


public static void expand(final View v) {
    v.measure(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    final int targetHeight = v.getMeasuredHeight();

    v.getLayoutParams().height = 1;
    v.setVisibility(View.VISIBLE);
    Animation a = new Animation() {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            v.getLayoutParams().height = interpolatedTime == 1
                    ? ViewGroup.LayoutParams.WRAP_CONTENT
                    : (int) (targetHeight * interpolatedTime);
            v.requestLayout();
        }

        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };

    a.setDuration((int) (targetHeight / v.getContext().getResources().getDisplayMetrics().density));
    v.startAnimation(a);
}

public static void collapse(final View v) {
    final int initialHeight = v.getMeasuredHeight();

    Animation a = new Animation() {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            if (interpolatedTime == 1) {
                v.setVisibility(View.GONE);
            } else {
                v.getLayoutParams().height = initialHeight - (int) (initialHeight * interpolatedTime);
                v.requestLayout();
            }
        }

        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };

    a.setDuration((int) (initialHeight / v.getContext().getResources().getDisplayMetrics().density));
    v.startAnimation(a);
}