jacobz jacobz - 4 months ago 54
Android Question

Using TabLayout inside a Fragment; tab text invisible

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:

enter image description here

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

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);
    }
});
Comments