TabLayout not showing Android

Question

Don't understand why my TabLayout is not showing in my Fragment i'm under the support version of fragment, sdk 25, everything's working great but can't see my TabLayout, after searching i didn't find anything about my problem, please some help. Here's my code :

public class ViewPagerFragment extends Fragment {

    public static final String KEY_NEW_INDEX = "key_new_index";
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

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

        final View view = inflater.inflate(R.layout.fragment_view_pager, container, false);

        final SportFragment sportFragment = new SportFragment();
        Bundle bundle = new Bundle();
        sportFragment.setArguments(bundle);

        final BuzzFragment buzzFragment = new BuzzFragment();
        bundle = new Bundle();
        buzzFragment.setArguments(bundle);

        mViewPager = (ViewPager) view.findViewById(R.id.viewPager);
        mTabLayout = (TabLayout) view.findViewById(R.id.tabLayout);


        mViewPager.setAdapter(new FragmentPagerAdapter(getChildFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return position == 0 ? sportFragment : buzzFragment;
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return position == 0 ? "Sport" : "Buzz";
            }

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

        });

                mTabLayout.setupWithViewPager(mViewPager);


        return view;
    }
}

And this is my xml file :

<FrameLayout 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"
             tools:context="com.example.ideo.testfrag.FragmentUI.Fragments.ViewPagerFragment">

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabLayout"
        android:background="@color/colorPrimary"/>

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

</FrameLayout>

Calamitous

Get it, may help other, just place the tabLayout view under the viewPager view... ^^ – Calamitous

try the below answer it will work... – Toilsome

Answer 1

Notice: If you are using viewpager2 don't forgot add this method (attach) end of TabLayoutMediator

    val viewpager = findViewById<ViewPager2>(R.id.viewpager_main)
    val tablayout = findViewById<TabLayout>(R.id.tablayout_main)

    viewpager.adapter = pagerTabAdapter
    TabLayoutMediator(tablayout , viewpager , true) { tab , index ->
        val title = titleList[index]
        tab.text  = title
    }.attach()

Tananarive

Answer 2

In a situation where my MainActivity hosts a few tabs. I do it like this:

MainActivity JAVA:

    public class MainActivity extends AppCompatActivity {

TabLayout tabLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);



    int position = 0;

    tabLayout = (TabLayout) findViewById(R.id.tab_layout);

    tabLayout.addTab(tabLayout.newTab().setText("HOME"));
    tabLayout.addTab(tabLayout.newTab().setText("Search"));
    tabLayout.addTab(tabLayout.newTab().setText("PROFILE"));
    tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

    final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
    final PagerAdapter adapter = new PagerAdapter
            (getSupportFragmentManager(), tabLayout.getTabCount());
    viewPager.setAdapter(adapter);
    viewPager.setOffscreenPageLimit(2);
    viewPager.setCurrentItem(position);
    viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

            viewPager.setCurrentItem(tab.getPosition());

            if(tab.getPosition() == 0){

                InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
                inputMethodManager.hideSoftInputFromWindow(viewPager.getWindowToken(), 0);

            }
            else if(tab.getPosition() == 1){

                InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
                inputMethodManager.hideSoftInputFromWindow(viewPager.getWindowToken(), 0);

            }
            else if(tab.getPosition() == 2){

                InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(INPUT_METHOD_SERVICE);
                inputMethodManager.hideSoftInputFromWindow(viewPager.getWindowToken(), 0);

            }

        }

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

        }

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

        }});

  }
}

MainActivity XML

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen"
tools:context="celebritytime.com.celeberitytime.MainActivity">


<FrameLayout
    android:id="@+id/container_id"
    android:layout_width="0dp"
    android:layout_height="match_parent">

</FrameLayout>

<android.support.design.widget.TabLayout
    android:id="@+id/tab_layout"
    android:tag="NationFragmentTag"
    android:showDividers="none"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="#020202"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

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

</RelativeLayout>

Let me know if you need the ViewPager code.

Thissa

Answer 3

you are not adding tabs in tablayout

call this after u initialize the tablayout

    //Adding the tabs using addTab() method
    tabLayout.addTab(tabLayout.newTab().setText("Sport"));
    tabLayout.addTab(tabLayout.newTab().setText("Buzz"));

Toilsome

Answer 4

You are using FrameLayout, so your viewpager is overlapping yout tabview. Same will happen with relative layout as well. To solve your problem use linear layout or use below property of relative layout (Replace frame layout with relative layout).

Gutsy

Answer 5

I know its a little old ,but check If the tab layout is not covered by PageViewer view

Funnyman

Answer 6

Had the same problem. Solved once I injected this line into TabLayout in xml:

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

Since you need to set .noActionBar in AndroidManifest to get rid of the old ActionBar, if that's your case also, it is not easy to guess.

Ritchie