How to solve same content replication in viewpager

Question

I'm developing an App using TabLayout and ViewPager.

As a result, I have set images to show in different fragments, eg. fragment_page1, fragment_page2, fragment_page3 etc. But images in Fragment_page1 are visible in all fragments. Please, how do I solve this issue?

This is my FragmentAdapter class

public class SimpleFragmentPageAdapter extends FragmentPagerAdapter {
    private String[] tabtitle=new String[]{"Description","Directions","Developers","Chant Page","Chant Page",};
    Context context;
    private int pagecount=4;
    public SimpleFragmentPageAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context=context;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0: //Fragment # 0 - This will show DevelopersFragment
                return DescriptionFragment.newInstance(0, "page # 0");
            case 1: //Fragment # 0 - This will show Page1Fragment
                return Page1Fragment.newInstance(1, "Chant # Page1");
                case 2: //Fragment # 0 - This will show Page1Fragment
                return Page1Fragment.newInstance(2, "Chant # Page2");
                case 3: //Fragment # 0 - This will show Page1Fragment
                return Page1Fragment.newInstance(3, "Chant # Page2");
                //etc
            default:
                return null;
        }
    }

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return "Chant Page" + position;
    }
}

This is my fragment_page1 xml

This is my fragment_page2

This is the Activity that runs ViewPager

 

    

    
    

    

    


    
    


protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tips_7);


        ActionBar actionBar = getSupportActionBar();
        actionBar.setTitle("CHANT");



        ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
        viewPager.setAdapter(new com.aronti.chanthymnography.SimpleFragmentPageAdapter(getSupportFragmentManager(), this));

        //Attach the page change listener inside the activity
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            // This method will be invoked when a new page becomes selected
            @Override
            public void onPageSelected(int position) {
                Toast.makeText(Tips_7.this, "Selected Chant:" + position, Toast.LENGTH_SHORT).show();
            }

            // This method will be invoked when the current page is scrolled
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetpixels) {

            }

            // Called when the scroll state changes:
            //SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING, SCROLL_STATE_SETTLING
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        tabLayout.setupWithViewPager(viewPager);

    }

user_3395198 · Answer

You should set different class in getItem(int position) section.

Return the Fragment associated with a specified position.

@Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0: //Fragment # 0 - This will show DevelopersFragment
                return DescriptionFragment.newInstance(0, "page # 0");
            case 1: //Fragment # 0 - This will show Page1Fragment
                return Page1Fragment.newInstance(1, "Chant # Page1");
                case 2: //Fragment # 0 - This will show Page1Fragment
                return Page2Fragment.newInstance(2, "Chant # Page2");
                case 3: //Fragment # 0 - This will show Page1Fragment
                return Page3Fragment.newInstance(3, "Chant # Page2");
                //etc
            default:
                return null;
        }
    }

user_7253581 · Answer

 @Override
public void setUserVisibleHint(boolean isVisibleToUser) {
    super.setUserVisibleHint(isVisibleToUser);
    if (isVisibleToUser) {
        if (getFragmentManager() != null) {
            getFragmentManager().beginTransaction().detach(this).attach(this).commit();
        }
    }
}

Use this function in your Fragments, this function will attach the same fragment again on activity, and then fragment life cycle will start again. and then you can set image in respective fragment.

How to solve same content replication in viewpager

2 Answers