Fragmenttransaction Animation to Slide in Over Top

FragmentTransaction animation to slide in over top

I found a solution which works for me. I ended up using a ViewPager with a FragmentStatePagerAdapter. The ViewPager provides the swiping behavior and the FragmentStatePagerAdapter swaps in the fragments. The final trick to achieve the effect of having one page visible "under" the incoming page is to use a PageTransformer. The PageTransformer overrides the ViewPager's default transition between pages. Here is an example PageTransformer that achieves the effect with translation and a small amount of scaling on the left-hand side page.

public class ScalePageTransformer implements PageTransformer {
    private static final float SCALE_FACTOR = 0.95f;

    private final ViewPager mViewPager;

    public ScalePageTransformer(ViewPager viewPager) {
            this.mViewPager = viewPager;
    }

    @SuppressLint("NewApi")
    @Override
    public void transformPage(View page, float position) {
        if (position <= 0) {
            // apply zoom effect and offset translation only for pages to
            // the left
            final float transformValue = Math.abs(Math.abs(position) - 1) * (1.0f - SCALE_FACTOR) + SCALE_FACTOR;
            int pageWidth = mViewPager.getWidth();
            final float translateValue = position * -pageWidth;
            page.setScaleX(transformValue);
            page.setScaleY(transformValue);
            if (translateValue > -pageWidth) {
                page.setTranslationX(translateValue);
            } else {
                page.setTranslationX(0);
            }
        }
    }

}

Fragments and slide over animation

After quite a bit of experimentation and testing, here is the method I adopted.

Probably not the best, but it works for me.

1. Create an animator for fragments which does nothing
2. When creating the new fragment, pass in the initial X position, which is the negative width of the container view. This will put the new fragment offset to the left of the container view and therefor hidden, for now.
3. Call setCustomAnimations on the FragmentTransaction with the "stay still" animation
4. Using the FragmentTransaction add the new fragment
5. Create an animation listener which, in onAnimationEnd, will call the containing view to do the following.
6. Swap the order of the two views by calling bringChildToFront
7. Start a new view animation on the old view to shrink it and fade it out
8. Start a new view animation on the new view to slide it in
9. Attach an AnimatorListener to the animation so that the old view can be removed at the animation end.

These are the steps to follow, the rest is just implementation :-D

Related Topics