How sync TabLayout with ViewPager when using TabItem

Question

I want to use TabLayout with TabItem with following code:

  <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_primary"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/white"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/white"
        app:tabTextColor="@color/gray_light">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:icon="@drawable/ic_language" />


        <!-- other tabs ... -->


    </android.support.design.widget.TabLayout>

And this is show me Icons correctly like this:

But the problem is when I want to add my TabLayout to ViewPager, with following code, all of them exist and clickable but disappear. Did I miss something?

 MyPagerAdapter adapter = new MyPagerAdapter(getFragmentManager());
 pager.setAdapter(adapter);

 tabLayout.setupWithViewPager(pager);

and this is result:

Answer 1

What tabLayout.setupWithViewPager(pager) is going to do is call getPageTitle() on the view pager's adapter and create tabs with the strings that are returned. I would recommend not calling setupWithViewPager(). Then you will need to do two things:

• Call viewPager.addOnPageChangeListener with an OnPageChangeListener implementation that will select the tab based on the selected page.

• Call tabLayout.setOnTabSelectedListener with an OnTabSelectedListener implementation that will call viewPager.setCurrentPage() with the selected tab number.

Just make sure your PagerAdapter count matches the number of tabs in your TabLayout.

Answer 2

This is helpful :

/////// Syncing!!!

Replace

setupWithViewPager();

With

tablayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));