Duplicate Fragments with RecyclerView appearing in ViewPager after swiping

Question

Fragment with RecyclerView is having problem inside ViewPager. Duplicate RecyclerView appears overlapped when the fragments gets recreated after swiping. I am using ViewPager, Fragment, FragmentStatePagerAdapter

Pic 1 : For the first time there RecyclerView is fine.

Pic 2 : After swiping multiple fragments and then swiping back to same fragment then duplicate fragments gets overlapped while scrolling.

using FragmentStatePagerAdapter

class SlidingFragmentPagerAdapter extends FragmentStatePagerAdapter {
        SparseArray<FragmentMain> registeredFragments = new SparseArray<FragmentMain>();
        FragmentManager fm;

        public SlidingFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
            this.fm = fm;
        }

        @Override
        public Fragment getItem(int position) {
            Calendar cal = Calendar.getInstance();
            cal.add(Calendar.DATE, -1 * (FragmentViewPager.MAX_PAGE - position - 1));

            return FragmentMain.newInstance(position + "", cal.getTime());
        }

        @Override
        public int getCount() {
            return MAX_PAGE;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            FragmentMain fragment = (FragmentMain)  super.instantiateItem(container, position);
            registeredFragments.put(position, fragment);
            return fragment;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            registeredFragments.remove(position);
            super.destroyItem(container, position, object);
        }

        public FragmentMain getRegisteredFragment(int position) {
            return registeredFragments.get(position);
        }
    }

Using ViewPager

mViewPager = (ViewPager) view.findViewById(R.id.viewpager);
rootView.findViewById(R.id.img_floating_btn2);
mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);
mSlidingTabLayout.setDistributeEvenly(true);
adapter = new SlidingFragmentPagerAdapter(getFragmentManager());
mViewPager.setAdapter(adapter);
mViewPager.setCurrentItem(MAX_PAGE);
mSlidingTabLayout.setViewPager(mViewPager);

Note I tried using mViewPager.setOffscreenPageLimit(adapter.getCount()); buti have more than 50 fragments in ViewPager

Answer 1

I had the same problem, I had a ViewPager with a RootFragment containing other fragments. I added these fragments to the RootFragment with:

getFragmentManager().beginTransaction().add(containerLayout.getId(), ItemFragment.newInstance()).commit();

I fixed it by changing it to replace instead of add.

getFragmentManager().beginTransaction().replace(containerLayout.getId(), ItemFragment.newInstance()).commit();

Even when the container is empty you have to use replace instead of add!