Tabs don't appear with TabLayout

Question

I'm trying to get a simple TabLayout with 3 tabs. Having follow different tutorials, my tab don't show up on the final result ( There is just 3 empty tab with no text ).

This how I try to add those tabs:

First the xml layout container the ViewPager (communitylayout)

<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:orientation="vertical" android:padding="4dip"
        android:layout_above="@+id/bottomcontent3"
        android:gravity="center_horizontal"
        android:background="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.TabLayout
            android:id="@+id/comtabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
            android:background="@android:color/white" />

        <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/compager"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </android.support.v4.view.ViewPager>

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

The Tab xml (tabtext):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tabtext"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="@color/tab_text_color"
        />

</RelativeLayout> 

And finally the java class where I try to add those Tabs:

super.onSaveInstanceState(savedInstanceState);
        view = inflater.inflate(R.layout.communitylayout, container, false); // communitylayout is the first xml I put, see above
        Bundle data = getArguments();
        MainActivity.addShapeAndBottom(inflater, view, "com", this);

        TabLayout tabLayout = (TabLayout) view.findViewById(R.id.comtabs);

        // add tabs
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());

        RelativeLayout layout1 = (RelativeLayout) inflater.inflate(R.layout.communitytablayout, container, false);
        RelativeLayout layout2 = (RelativeLayout) inflater.inflate(R.layout.communitytablayout, container, false);
        RelativeLayout layout3 = (RelativeLayout) inflater.inflate(R.layout.communitytablayout, container, false);

            //tab is an array of Strings containing the Tab name  


((TextView)layout1.findViewById(R.id.tabtext)).setText(tabs[0]);
((TextView)layout2.findViewById(R.id.tabtext)).setText(tabs[1]);
((TextView)layout3.findViewById(R.id.tabtext)).setText(tabs[2]);


        tabLayout.getTabAt(0).setCustomView(layout1);
        tabLayout.getTabAt(1).setCustomView(layout2);
        tabLayout.getTabAt(2).setCustomView(layout3);
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);



        ViewPager pager = (ViewPager) view.findViewById(R.id.compager);
        CommunityPagerFragment adapter = new CommunityPagerFragment(getChildFragmentManager());

        pager.setAdapter(adapter);
        tabLayout.setupWithViewPager(pager);
        //tabLayout.set

        return view;

I'm kind of lost, I don't know why my Tabs remain invisible. Thanks in advance.

EDIT Here is my adapter:

public class CommunityPagerFragment extends FragmentPagerAdapter {

    public CommunityPagerFragment(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int index) {

        switch (index) {
            case 0:
                return new BlogFragment();
            case 1:
                return new NewsFragment();
            case 2:
                return new FAQFragment();
        }

        return null;
    }

    @Override
    public int getCount() {
        // get item count - equal to number of tabs
        return 3;
    }




    public class BlogFragment extends Fragment {

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.communitylistview, container, false);
            return view;
        }
    }

    public class NewsFragment extends Fragment {

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.communitylistview, container, false);
            /*ProgressBar loadingAnim = new ProgressBar(getContext());
            loadingAnim.setLayoutParams(new LinearLayout.LayoutParams(40,40));
            container.addView(loadingAnim);*/

            return view;
        }
    }

    public class FAQFragment extends Fragment {

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            View view = inflater.inflate(R.layout.communitylistview, container, false);
            return view;
        }
    }

}

Answer 1

The key was to setupWithViewpager first before managing the tabs.