Using TabLayout inside a Fragment; tab text invisible

Question

I'm currently experimenting with various new components in the new Android Support Design library. I've implemented a NavigationView in my MainActivity.java, which uses a FragmentManager to navigate between the items in the Navigation drawer:

getSupportFragmentManager()     .beginTransaction()     .replace(R.id.content, mTabLayoutFragment)     .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)     .commit(); 

I'm using a TabLayout in one of the fragments. Here is the fragment's layout:

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_width="match_parent"     android:layout_height="match_parent">      <android.support.design.widget.TabLayout         android:id="@+id/tabLayout"         android:layout_width="match_parent"         android:layout_height="wrap_content"         app:tabMode="fixed"         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> 

And the Java code behind it:

import android.os.Bundle; import android.support.design.widget.*; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  public class TabLayoutFragment extends Fragment {          @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,                              Bundle savedInstanceState) {         View inflatedView = inflater.inflate(R.layout.fragment_tablayout, container, false);          TabLayout tabLayout = (TabLayout) inflatedView.findViewById(R.id.tabLayout);         tabLayout.addTab(tabLayout.newTab().setText("Campusplan"));         tabLayout.addTab(tabLayout.newTab().setText("Raumplan"));         final ViewPager viewPager = (ViewPager) inflatedView.findViewById(R.id.viewpager);          viewPager.setAdapter(new PagerAdapter                 (getFragmentManager(), tabLayout.getTabCount()));         viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));         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:                     TabItem1 tab1 = new TabItem1();                     return tab1;                 case 1:                     TabItem1 tab2 = new TabItem1();                     return tab2;                 default:                     return null;             }         }          @Override         public int getCount() {             return mNumOfTabs;         }     } } 

Please note TabItem1 and TabItem1, which are fragments consisting of nothing but a TextView. These two are to be displayed in the TabLayout.

Now, this code seems to be working, to some extent. Here is how it looks like:

What's weird is, after I rotate the device, everything seems to be working just fine:

It seems like something gets called upon a configuration change. This is weird, especially considering that I have following in my AndroidManifest:

android:configChanges="orientation|screenSize" 

Answer 1

I face the same problem with new version of android support Design Library v23.1.1. But I just figure it out what happening.

if your view pager has 2 fragment as your mention above, then you set your view pager with this statement:

tabLayout.setupWithViewPager(viewPager); 

automatically you will have 2 tabs with empty text. So you should not add new tab anymore. But something you have to do is to set text in that two created tabs.

tabLayout.getTabAt(0).setText("Campusplan"); tabLayout.getTabAt(1).setText("Raumplan"); 

Conclusion. To make tabs work as you want, important thing you have to do :

tabLayout.setupWithViewPager(viewPager); tabLayout.getTabAt(0).setText("Campusplan"); tabLayout.getTabAt(1).setText("Raumplan"); 

I hope this will be helpful for you :)

Answer 2

Update: Design Library v23.0.0 solves this issue.

---

Found the problem here: https://code.google.com/p/android/issues/detail?id=180462

Simple workaround:

tabLayout.post(new Runnable() {     @Override     public void run() {         tabLayout.setupWithViewPager(viewPager);     } });