Tab text disappeared with viewpager

Question

A very simple example. I think most people implement a tab in this way. But the tab text is just missing.

Version of design support lib is the latest 24.2.0.

Here is my layout code:

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    app:tabTextColor="@android:color/darker_gray"
    app:tabSelectedTextColor="@android:color/white"
    android:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.TabItem
        android:text="@string/tab_domain"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.design.widget.TabItem
        android:text="@string/tab_upload"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.design.widget.TabItem
        android:text="@string/tab_download"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

I'm using ButterKnife 8.2.1 to bind view objects. And here is my activity code in onCreate():

    final DiagnosePagerAdapter adapter = new DiagnosePagerAdapter(getSupportFragmentManager(),
            tabs.getTabCount());
    tabs.setupWithViewPager(pager);
    pager.setAdapter(adapter);
    pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabs));

And here is my adapter:

    class DiagnosePagerAdapter extends FragmentStatePagerAdapter {
    int mNumOfTabs;
    List<Fragment> fragments = new ArrayList<>();

    public DiagnosePagerAdapter(FragmentManager fm, int numberOfTabs) {
        super(fm);
        this.mNumOfTabs = numberOfTabs;
        fragments.add(new DomainFragment());
        fragments.add(new UploadFragment());
        fragments.add(new DownloadFragment());
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return mNumOfTabs;
    }
}

I've seen a similar question here: Using TabLayout inside a Fragment; tab text invisible

Answers in that question said this has been fixed in 23.0.0, and none of the workaround works on my phones, including a Xiaomi HM 2A and a Huawei device.

score 11 · Accepted Answer · answered Aug 19 '16 at 06:02

You must override getPageTitle()as below (I think this will solve your issue):

@Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "Domain";
            case 1:
                return "Upload";
            case 2:
                return "Download";
        }
        return null;
    }

Also, as you have fixed number of tabs, you should use FragmentPagerAdapter instead of FragmentStatePagerAdapter. And then change your xml layout as below :

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    app:tabTextColor="@android:color/darker_gray"
    app:tabSelectedTextColor="@android:color/white"
    android:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Change your adapter as below :

class DiagnosePagerAdapter extends FragmentPagerAdapter {

    public DiagnosePagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position) {
            case 0:
                fragment = new DomainFragment();
                break;
            case 1:
                fragment = new UploadFragment();
                break;
            case 2:
                fragment = new DownloadFragment();
                break;
        }
        return fragment;
    }

    @Override
    public int getCount() {
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "Domain";
            case 1:
                return "Upload";
            case 2:
                return "Download";
        }
        return null;
    }

}

And change your onCreate() as below :

final DiagnosePagerAdapter adapter = new DiagnosePagerAdapter(getSupportFragmentManager());
pager.setAdapter(adapter);//call setAdapter() before setupWithViewPager()
tabs.setupWithViewPager(pager);

@Bleaker : Good to know it solved your issue. Kindly accept the answer by clicking on the green tick beside the answer. — Monish Kamble, Aug 22 '16 at 04:14

Bobin · Answer 2 · 2020-09-18T22:34:53.407

The text of Tabs is overwritten because Android does not use the Tabs which you defined in your layout xml. Instead, it creates completely new Tabs.

The other answer already explained how to add text using the Adapter.

But if you want to add an icon, or do some other stuff with your Tabs, then you will have to execute the following in the first created Fragment.

public void onCreateView(...) {
    ...
    TabLayout tabLayout = getActivity().findViewById(R.id.tabLayout);
    PagerAdapter.setTitle(tabLayout);

Then in your PagerAdapter...

public static void setTitle(TabLayout tabLayout) {
    TabLayout.Tab tab;

    tab = tabLayout.getTabAt(0);
    tab.setIcon(R.drawable.home_icon);
    tab.setText(R.string.my);

    tab = tabLayout.getTabAt(1);
    tab.setIcon(R.drawable.icon_search);
    tab.setText(R.string.search);

    tab = tabLayout.getTabAt(2);
    tab.setIcon(R.drawable.icon_settings);
    tab.setText(R.string.settings);
}

Imo this is a bit messy but Ive found no other way.

score 0 · Answer 3 · answered Feb 05 '21 at 07:17

Make the tablayout scrollable true so that it can show the complete name of the text. For refernce you can use the following code.

 <androidx.viewpager.widget.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@+id/tb_socialMedia_fragment">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabInlineLabel="true"
        app:tabMode="scrollable"
        />
</androidx.viewpager.widget.ViewPager>

score 0 · Answer 4 · edited Feb 05 '21 at 07:27

You Can use following code if u want to add name to tablayout and also add class

class SocialMediaVpAdapter(
    var fragmentManager: FragmentManager, var context :Context) : FragmentPagerAdapter(fragmentManager) {
    override fun getCount(): Int {
        return 4
    }

    override fun getPageTitle(position: Int): CharSequence? {
         return when (position) {
            0 -> {
                context.getString(R.string.social_all)
            }
            1 -> {
                context.getString(R.string.social_facebook)
            }
            2 -> {
                context.getString(R.string.social_Instagram)
            }
            3 ->{
                context.getString(R.string.social_tiktok)
            }

            else ->context.getString(R.string.social_all)
         }
    }

    override fun getItem(position: Int): Fragment {
        return when (position) {
            0 -> {
                AllSocialMedia()
            }
            1 -> {
                FbSocialMediaActivity()
            }
            2 -> {
                InstagramSocialMedia()
            }
            3 ->{
                TikTokSocialMedia()
            }

            else -> AllSocialMedia()
        }
    }
}

Tab text disappeared with viewpager

4 Answers4