Switch Fragments In View Pager With Flip Animation

I've been trying to switch fragments inside a fragmentStatePagerAdapter, but even though I was able to change from fragment C-D in the same position; I have not been able to animat

Solution 1:

*You can animate it using a * PageTransformer.

See the below sample code.

publicclassMainActivityextendsFragmentActivity {


    SectionsPagerAdapter mSectionsPagerAdapter;

    ViewPager mViewPager;

    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // activity_main.xml should contain a ViewPager with the id "@+id/pager"
        setContentView(R.layout.activity_main);

        // Create the adapter that will return a fragment for each of the three// primary sections of the app.
        mSectionsPagerAdapter = newSectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mSectionsPagerAdapter);

        // set the card transformer and set reverseDrawingOrder to true, so the fragments are drawn from the right to// the left
        mViewPager.setPageTransformer(true, newCardTransformer(0.7f));// Animation.

    }


    publicclassSectionsPagerAdapterextendsFragmentPagerAdapter {

        publicSectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Overridepublic Fragment getItem(int position) {
            Fragmentfragment=newDummyFragment();
            return fragment;
        }

        @OverridepublicintgetCount() {
            return10;
        }
    }


    publicstaticclassDummyFragmentextendsFragment {

        publicDummyFragment() {
        }

        @Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

            LinearLayoutroot=newLinearLayout(getActivity());
            root.setLayoutParams(newLinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
            root.setOrientation(LinearLayout.VERTICAL);

            for (intr=0; r < 5; r++) {

                LinearLayoutrow=newLinearLayout(getActivity());
                row.setLayoutParams(newLinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, 0, 1.0f));
                row.setOrientation(LinearLayout.HORIZONTAL);
                row.setGravity(Gravity.CENTER);

                for (intc=0; c < 4; c++) {

                    ImageViewicon=newImageView(getActivity());
                    icon.setLayoutParams(newLinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT, 1.0f));
                    icon.setScaleType(ScaleType.CENTER);
                    icon.setImageResource(R.drawable.ic_launcher);

                    row.addView(icon);

                }

                root.addView(row);

            }

            return root;

        }
    }


    publicclassCardTransformerimplementsPageTransformer {

        privatefinalfloat scalingStart;

        publicCardTransformer(float scalingStart) {
            super();
            this.scalingStart = 1 - scalingStart;
        }

        @OverridepublicvoidtransformPage(View page, float position) {

            if (position >= 0) {
                finalintw= page.getWidth();
                floatscaleFactor=1 - scalingStart * position;

                page.setAlpha(1 - position);
                page.setScaleX(scaleFactor);
                page.setScaleY(scaleFactor);
                page.setTranslationX(w * (1 - position) - w);
            }
        }
    }

}

or

You can use ViewPagerTransforms Libraray.

It will animate during switching fragment.

Solution 2:

The training documentation details how to create a card-flip animation. To implement this as you described, all you need to do is nest the last two fragments (the 'C' and 'D' fragments) of the ViewPager in a single fragment; then apply the animation to the transition:

publicclassCardFlipFragmentextendsFragment {

    privatebooleanmShowingBack=false;

    @Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        Viewview= inflater.inflate(R.layout.fragment_card_flip, container, false);

        if(savedInstanceState == null) {
            getChildFragmentManager()
                    .beginTransaction()
                    .add(R.id.container, newFrontFragment())
                    .commit();
        }

        return view;
    }

    publicvoidonFlip(View view) {
        if(mShowingBack) {
            getChildFragmentManager().popBackStack();
        } else {
            mShowingBack = true;

            getChildFragmentManager()
                    .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)
                    .replace(R.id.container, newBackFragment())
                    .addToBackStack(null)
                    .commit();
        }
    }

}