ViewPager Not Synched with TabLayout

Question

I have a ViewPager and Tablayout that shows nth number of items. The Tabs are populated with the correct page titles and the ViewPager contained Fragments display the correct fine except that the selected Tab is not synched with the ViewPager current item.

The selected Tab position is 1 less than the position of viewpager current item. Here is the Viewpager adapter.

 public class ViewPagerAdapter extends FragmentStatePagerAdapter {
        public ViewPagerAdapter(FragmentManager fm){
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Recipe selectedRecipe = getRecipeList().get(position);
            return RecipeDetailFragment.newInstance(selectedRecipe.getId);
        }

        @Override
        public int getCount() {
            return .getRecipeList().size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            Recipe selectedRecipe = .getRecipeList().get(position);
            String title = selectedRecipe.getTitle();                
            return title ;
        }

        @Override
        public int getItemPosition(Object object) {
            return POSITION_NONE;
        }   

    }

Here is how I setup the ViewPager

private void setupViewPager() {
       ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

}

Here is what the output looks like

Edit 1: I think the problem have to do with how the getItem method of the ViewPager is being called, here is log of left and right scroll for10 items

Data is showing correctly, both are referencing the same ArrayList — Val Okafor, Mar 06 '17 at 04:50
I think list data is incorrect.. otherwise everything looks fine — Abhishek Singh, Mar 06 '17 at 04:51
Thanks, I just verified again that the data is very correct. The tab layout position is behind the Viewpager. — Val Okafor, Mar 06 '17 at 05:03
post your RecipeDetailFragment.newInstance(selectedRecipe.getId); — Noorul, Mar 06 '17 at 05:27
No error, when it reaches the end it works fine. The tablayout and viewpager are synched at the beginning and at the end. They go out of synch in the middle. — Val Okafor, Mar 06 '17 at 06:30
Post all related codes with this question which will help us to further investigate. — Noorul, Mar 06 '17 at 06:38
if some one encounter this issue using viewPager2 [see this answer](https://stackoverflow.com/a/74768477/7048025) — Amer Alzibak, Dec 12 '22 at 08:38

score 1 · Answer 1 · answered Mar 06 '17 at 05:32

1

instead of using static variable in fragment you can use, public function in fragment like below.

add

    @Override
    public Fragment getItem(int position) {
        Recipe selectedRecipe = getRecipeList().get(position);
        RecipeDetailFragment receiptFRagment= new ReceiptFragment();
        receiptFragment.setData(selectedRecipe.getId);
        return receiptFragment;
    }

instead of this

    @Override
    public Fragment getItem(int position) {
        Recipe selectedRecipe = getRecipeList().get(position);
        return RecipeDetailFragment.newInstance(selectedRecipe.getId);
    }

Add public function in fragment,

  public void setData(int id){
   this.id= id;
  }

answered Mar 06 '17 at 05:32

Noorul

3,386
3
32
54

Thanks, I removed the static Fragment factory method and still have the same experience. I think the getItem is causing the problem. I have added a screenshot of the getitem log – Val Okafor Mar 06 '17 at 06:22
you attached image made your question unclear. can you little bit elaborate? – Noorul Mar 06 '17 at 06:24
When I create Viewpager, getItem is called with position 1 and then 0. If I swipe right, it goes to position 2, then 3, 4 to 10. If swipe right, it goes from position 10 t0 8. – Val Okafor Mar 06 '17 at 06:27

score 0 · Answer 2 · answered Mar 06 '17 at 14:54

Finally, this is how I synched the ViewPager selected item with the Tablayout selected tab.

void selectPage(final int pageIndex){
        new Handler().postDelayed(
                new Runnable() {
                    @Override public void run() {
                        tabLayout.setSmoothScrollingEnabled(true);
                        tabLayout.setScrollPosition(pageIndex, 0f, true);
                    }
                }, 100);
    }

Then I called this method from two places, first when I setup Viewpager

 recipePosition = getIntent().getIntExtra(Constants.RECIPE_POSITION, 0);
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
        if (recipePosition > 0){
            recipePosition--;
        }
        viewPager.setCurrentItem(recipePosition,true);
        selectPage(recipePosition);

And then second in the setItem

Recipe selectedRecipe = getRecipeList().get(position);
RecipeDetailFragment receiptFRagment= new ReceiptFragment();
receiptFragment.setData(selectedRecipe.getId);
selectPage(position);
return receiptFragment;

Its works, I still could not understand why these are not synched by default!

ViewPager Not Synched with TabLayout

2 Answers2