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:

Hadi Note · Answer 1 · 2018-03-02T15:17:45.780

28

This is helpful :

/////// Syncing!!!

Replace

setupWithViewPager();

With

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

edited Mar 02 '18 at 15:17

answered Jun 04 '17 at 07:27

Hadi Note

1,386
17
16

This can help other people !! @Pierre.Vriens – Hadi Note Jun 04 '17 at 10:29
3

Jeez... thanks bro... I spent hours banging my head on that. There is literally no samples for that on the internets. – OoDeLally Oct 23 '19 at 09:26

score 8 · Accepted Answer · answered Jun 08 '16 at 20:39

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.

Thanks and nice work-around. I think this is messy way to handle this But it's solve the problem :D — Amir, Jun 08 '16 at 20:44

How sync TabLayout with ViewPager when using TabItem

2 Answers2

Linked