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:
Find the view pager that will allow the user to swipe between fragments. Create an adapter that knows which fragment should be shown on each page. Set the adapter onto the view pager. Give the TabLayout the ViewPager.
It is possible to use a TabLayout without a ViewPager by using a TabLayout. OnTabSelectedListener . For navigation within an Activity , manually populate the UI based on the tab selected.
This is helpful :
/////// Syncing!!!
Replace
setupWithViewPager();
With
tablayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With