Jacques Krause Jacques Krause - 5 months ago 60
Android Question

Tablayout Tabs Text Not Displaying

I am using

TabLayout
inside a
Fragment
to display three fixed tabs and the tabs are working but it doesn't show the tab text even after I set the tabTextColor in layout it's still not visible.

NewFragment.java

public class NewFragment extends Fragment {

private RecyclerView mRecyclerView;
private RecyclerView.LayoutManager mLayoutManager;
private RecyclerView.Adapter mAdapter;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {

View inflatedView = inflater.inflate(R.layout.new_fragment, container, false);

TabLayout tabLayout = (TabLayout) inflatedView.findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
final ViewPager viewPager = (ViewPager) inflatedView.findViewById(R.id.viewpager);

LinearLayoutManager mLayoutManager = new LinearLayoutManager(getActivity());
mLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);

viewPager.setAdapter(new PagerAdapter(getFragmentManager(), tabLayout.getTabCount()));
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {

}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});

return inflatedView;
}

public class PagerAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;

public PagerAdapter(FragmentManager fm, int NumOfTabs) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}

@Override
public Fragment getItem(int position) {

switch (position) {
case 0:
return new FragmentTab();
case 1:
return new FragmentTab();
case 2:
return new FragmentTab();
default:
return null;
}
}

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


newfragment.xml

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".NewFragment">

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabTextColor="#ffffff"
app:tabGravity="fill"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"/>

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

Answer

The problem is you're calling TabLayout.setupWithViewPager() after you've set up your tabs by calling addTab() on your TabLayout instance.

From the documentation of setupWithViewPager():

This method will link the given ViewPager and this TabLayout together so that changes in one are automatically reflected in the other. This includes scroll state changes and clicks. The tabs displayed in this layout will be populated from the ViewPager adapter's page titles.

If you would like to use your TabLayout with a ViewPager, you should override getPageTitle() in your PagerAdapter (and remove the addTab() calls, they are unnecessary).

You could do something like this:

public class PagerAdapter extends FragmentStatePagerAdapter {
    int mNumOfTabs;

    // array of tab titles
    private String tabTitles[] = new String[]{"Tab1", "Tab2", "Tab3"};

    public PagerAdapter(FragmentManager fm, int NumOfTabs) {
        super(fm);
        this.mNumOfTabs = NumOfTabs;
    }

    // overriding getPageTitle()
    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles[position];
    }

    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                return new FragmentTab();
            case 1:
                return new FragmentTab();
            case 2:
                return new FragmentTab();
            default:
                return null;
        }
    }

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