Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How sync TabLayout with ViewPager when using TabItem

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:

enter image description here

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:

enter image description here

like image 563
Amir Avatar asked Jun 08 '16 20:06

Amir


People also ask

How do I use TabLayout with ViewPager?

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.

Can we use TabLayout without ViewPager in Android?

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.


2 Answers

This is helpful :

/////// Syncing!!!

Replace

setupWithViewPager();

With

tablayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));
like image 133
Hadi Note Avatar answered Sep 21 '22 04:09

Hadi Note


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.

like image 44
kris larson Avatar answered Sep 22 '22 04:09

kris larson