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:

Lynd

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.

Philoprogenitive

Thanks and nice work-around. I think this is messy way to handle this But it's solve the problem :D – Lynd

Answer 2

This is helpful :

/////// Syncing!!!

Replace

setupWithViewPager();

With

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

Emblazonry

This can help other people !! @Pierre.Vriens – Emblazonry

Jeez... thanks bro... I spent hours banging my head on that. There is literally no samples for that on the internets. – Diminished