Cant see tablayout with viewpager

Question

this my code to link tablayout with viewpager it was working fine but now it is not working i am unable to see tab layout in my device can any one tell what is causing this problem i think my code is right

<android.support.design.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/arootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.blipclap.creativegraphy.HomeActivity"
tools:showIn="@layout/app_bar_home">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white">

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_below="@+id/tabLayout"> 
</android.support.v4.view.ViewPager>

</RelativeLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_gravity="bottom"
        app:layout_behavior=".Helper.BottomNavigationBehaviour"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        app:itemIconTint="@android:color/background_dark"
        app:itemTextColor="@android:color/background_dark"
        app:menu="@menu/bottom_navigation_menu"> 
</android.support.design.widget.BottomNavigationView>


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

over here i have may adapter

public class MyFragmentAdapter extends FragmentPagerAdapter {

    private Context context;

    public MyFragmentAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        if (position == 0)
            return CategoryFragment.getInstance();
        else if (position == 1)
            return TrendingFragment.getInstance();
        else if (position == 2)
            return RecentsFragment.getInstance(context);
        else
            return null;
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position) {
            case 0:
                return "Category";
            case 1:
                return "Trending";
            case 2:
                return "Recents";
        }
        return "";
    }}

this is activity code i used

 viewPager = (ViewPager)findViewById(R.id.viewPager);
            MyFragmentAdapter adapter = new 
 MyFragmentAdapter(getSupportFragmentManager(), this);
            viewPager.setAdapter(adapter);

            tabLayout = (TabLayout) findViewById(R.id.tabLayout);
            tabLayout.setupWithViewPager(viewPager);

this is the screenshot as you can see i am unable to see tab layout in my phone can any help what is the problem

my layout uses bottom navigation behavior so coordinate layout is necessary and bottom navigation need to be out has it should be child of coordinator layout

I figured out tab layout is hidden behind the app bar

<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.blipclap.creativegraphy.HomeActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        app:theme="@style/ToolbarColoredBackArrow" />

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

<include layout="@layout/content_home" />


</android.support.constraint.ConstraintLayout>

Answer 1

solution for this is

     <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
android:layout_marginTop="?attr/actionBarSize"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

tab layout was actually under appbar so i just