Tabs of TabLayout not showing

Question

I have a main activity, which hosts a fragment, which in turn hosts a TabLayout (with a ViewPager). The tab bar is shown, baut the tabs themselves are not shown.

Here is my code in the main activity for displaying the host fragment:

        Fragment fragment = new BMITabsFragment();

        FragmentManager fragmentManager = getSupportFragmentManager();
        fragmentManager.beginTransaction().replace(R.id.content_frame, fragment).addToBackStack(Constants.BMI_TABS_FRAGMENT).commit();

Here is my the Fragment which hosts the TabLayout, which is BMITabsFragment (s.a.):

public class BMITabsFragment extends Fragment {
...
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
        mParam1 = getArguments().getString(ARG_PARAM1);
        mParam2 = getArguments().getString(ARG_PARAM2);
    }

}

@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    // Get the ViewPager and set it's PagerAdapter so that it can display items
    ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
    viewPager.setAdapter(new BMIFragmentPagerAdapter(getActivity().getSupportFragmentManager(),
            getActivity()));

    // Give the TabLayout the ViewPager
    TabLayout tabLayout = (TabLayout) view.findViewById(R.id.sliding_tabs);
    tabLayout.setupWithViewPager(viewPager);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View view = inflater.inflate(R.layout.fragment_bmitabs, container, false);
    return view;
}
...
}

This is my FragmentPagerAdapter:

public class BMIFragmentPagerAdapter extends FragmentPagerAdapter {

final int PAGE_COUNT = 2;
private FragmentManager fragmentManager;
private Context context;

public BMIFragmentPagerAdapter(FragmentManager fm, Context context) {
    super(fm);
    this.context = context;
    this.fragmentManager = fm;

}

public BMIFragmentPagerAdapter(FragmentManager fm) {
    super(fm);
    fragmentManager = fm;

}

@Override
public CharSequence getPageTitle(int position) {
    String[] pageTitles = context.getResources().getStringArray(R.array.page_titles_array);
    return pageTitles[position];
}

@Override
public Fragment getItem(int position) {
    SharedPreferences prefs = context.getSharedPreferences(Constants.SHARED_PREFS_FILE, 0);
    long patientId = prefs.getLong(Constants.SELECTED_PATIENT_ID, 1);
    Fragment fragment = null;
    switch (position){
        case 0:
            return BMITabelleFragment.newInstance(patientId);

        case 1:
            return BMIChartFragment.newInstance(patientId);

        default:
            return BMITabelleFragment.newInstance(patientId);
    }
}

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

And this is the fragment_bmitabs.xml:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="scrollable" />

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

</LinearLayout>

My code is based on the Google Android Guide at https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout

What I am missing here?

Note: I am using AppCompatActivity and the support libraries v4 & v7 and the com:android:support:design library

a simple update in styles.xml - along the lines of ` – Gene Bo Aug 29 '16 at 23:47 — Gene Bo, Aug 29 '16 at 23:47

score 51 · Answer 1 · edited Jul 12 '20 at 01:11

51

This fixed it for me:

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

https://code.google.com/p/android/issues/detail?id=180462

edited Jul 12 '20 at 01:11

Andreas is moving to Codidact

1,642
4
21
40

answered Jul 22 '15 at 22:00

Raul Amoretti de Souza

599
4
3

1

Absurd... documentation says "This view also supports being used as part of a ViewPager's decor, and can be added directly to the ViewPager in a layout resource file like so" suggesting that if you use this view in this way you don't need to call that method. – Massimo Aug 05 '16 at 08:15
1

not working on me. fragments of tab still not showing – ralphgabb Nov 08 '16 at 08:30

score 9 · Answer 2 · edited Sep 15 '16 at 20:22

9

Set tab icons after setupWithViewPager()

private void setTabs {
   tabLayout.setupWithViewPager(viewPager);
   setupTabIcons();
} 

private void setupTabIcons() {
   tabLayout.getTabAt(0).setIcon(tabIcons[0]);
   tabLayout.getTabAt(1).setIcon(tabIcons[1]);
   tabLayout.getTabAt(2).setIcon(tabIcons[2]);
}

edited Sep 15 '16 at 20:22

Mangesh

5,491
5
48
71

answered Oct 14 '15 at 13:34

Vikram

1,072
2
20
33

You forgot to fix the link in this answer. Right now it points to 'enter link description here'. – Reinstate Monica Dec 02 '15 at 12:36
That worked for me, the viewPager allready initialize the Tabs, just grabbing the tab with getTabAt() and set Text, Icon or CustomView worked! – leopold May 12 '17 at 16:39

score 6 · Answer 3 · answered Sep 16 '15 at 12:05

6

like @Nathaniel Ford said，this should a bug, I change to use design library 23.0.1。google fixed it,so change build.gradle to compile 'com.android.support:design:23.0.1'. ps:you also must change your compileSdkVersionto 23

answered Sep 16 '15 at 12:05

chinaanihchen

396
2
5

Thank you... this worked for me. The poor quality of Google's API keeps surprising me, it's just astonishing. – Merlevede Feb 03 '16 at 17:41

score 2 · Answer 4 · answered Jul 02 '18 at 01:08

None of the other answers worked for me, I tried all of them

However, this one did: TabLayout not showing tabs after adding navigation bar

According to that answer, you have to enclose your TabLayout in a AppBarLayout. Why? Who knows. But at least it works.

Example Code (taken from that post):

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="200dp"
    android:id="@+id/appBarLayout2">


    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabLayout2"
        app:tabMode="fixed"
        app:tabGravity="fill"

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

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

<android.support.v4.view.ViewPager
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_alignParentStart="true"
    android:layout_alignParentBottom="true"
    android:id="@+id/viewPager2"
    android:layout_below="@+id/appBarLayout2">

</android.support.v4.view.ViewPager>

score 1 · Answer 5 · answered May 16 '17 at 12:42

1

If you are using android:tabPadding attribute in Tablayout of xml file,remove it.

answered May 16 '17 at 12:42

sai durkha prasath

31
4

As this could be a valid answer, please elaborate it a bit more and explain why. Thank you – acostela May 16 '17 at 13:04

score 0 · Answer 6 · answered Sep 10 '19 at 10:11

0

You can use FragmentStatePagerAdapter instead of FragmentPagerAdapter. It may help you.

answered Sep 10 '19 at 10:11

Yogesh Nikam Patil

1,192
13
18

score 0 · Answer 7 · answered Aug 06 '21 at 11:52

If someone, in future, works with TabLayout along with ViewPager2 and faces same issue. Just add .attach(); at end of new TabLayoutMediator().

new TabLayoutMediator(tabLayoutRef, viewPager2Ref, (tab, position) -> tab.setText("Tab No. "+position)).attach();

Tabs of TabLayout not showing

7 Answers7

Linked