in tab layout fragments not showing their's layout

Question

I have a tablayout in which I have included five fragments, but when I go to any other tab, the fragments XML (layout) is not showed, instead a black screen appears only. I am including my tab activity code and the screenshot of the app and for reference one fragment with its XML.

TABS_ACTIVITY

 public class Bottom_Tabs_Activity extends AppCompatActivity {
        private TabLayout tabLayout;
        private ViewPager viewPager;
        private int[] tabIcons = {
                R.drawable.ic_friends,
                R.drawable.ic_chat,
                R.drawable.ic_map,
                R.drawable.ic_status,
                R.drawable.ic_profile
        };
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.tabs);
            viewPager = (ViewPager) findViewById(R.id.viewpager);
            if (viewPager != null)
                setupViewPager(viewPager);
            else {
                Log.e("test", "i am null");
            }
            tabLayout = (TabLayout) findViewById(R.id.tabs);
            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]);
                tabLayout.getTabAt(3).setIcon(tabIcons[3]);
                tabLayout.getTabAt(4).setIcon(tabIcons[4]);
            }
     private void setupViewPager(ViewPager viewPager)
        {
            ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
            adapter.addFrag(new MapFragment(),"MAPS");
            adapter.addFrag(new PeopleFragment(),"PEOPLE");
            adapter.addFrag(new HomeFragment(),"HOME");
            adapter.addFrag(new ChatFragment(),"CHAT");
            adapter.addFrag(new ProfileFragment(),"PROFILE");

            viewPager.setAdapter(adapter);
        }
        class ViewPagerAdapter extends FragmentPagerAdapter
        {
            private final List<Fragment> mFragmentList = new ArrayList<>();
            private final List<String> mFragmentTitleList = new ArrayList<>();
            public ViewPagerAdapter(FragmentManager manager)
            {
                super(manager);
            }
            @Override
            public Fragment getItem(int position) {
                return mFragmentList.get(position);
            }
            @Override
            public int getCount() {
                return mFragmentList.size();
            }
            public void addFrag(Fragment fragment, String title) {
                mFragmentList.add(fragment);
                mFragmentTitleList.add(title);
            }
            @Override
            public CharSequence getPageTitle(int position) {

                // return null to display only the icon
                return null;
            }
        }
    }

TABS_LAYOUT.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ffffff"  />

    <android.support.design.widget.AppBarLayout

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:layout_gravity="bottom"

        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.TabLayout

            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:layout_alignParentBottom="true"

            app:tabMode="fixed"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>


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

MapFragment.java

public class MapFragment extends Fragment{
 public MapFragment() {
            // Required empty public constructor
        }

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
        }

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

    }

Mapfragment.xml

    <RelativeLayout 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=".Fragments.MapFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MAP"
        android:textSize="40dp"
        android:textStyle="bold"
        android:layout_centerInParent="true"/>

</RelativeLayout>

SCREENSHOT of APP

Answer 1

getChildFragmentManager() instead of getSupportFragmentManager()

private void setupViewPager(ViewPager viewPager)
{

    FragmentManager cfManager = getChildFragmentManager();           
    ViewPagerAdapter adapter = new ViewPagerAdapter(cfManager);

    // ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());

    ...   
    ...
}

Answer 2

You could rearrange the layout like this.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" >

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/background"
            app:tabIndicatorColor="@color/tab_indicator_color"
            app:tabMode="scrollable" />

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



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

I think it will work. May be this app:layout_behavior="@string/appbar_scrolling_view_behavior" one is the key.