Navigation Drawer click to open another fragment to replace TabLayout & ViewPager

Question

I have a project that has a navigation drawer and it includes with 2 item "Home" and "Message". "Message" page is a individual fragment and "Home" page is a tabLayout combine viewPager that includes 3 different fragment. What I want is "Message" fragment to replace Home's tabLayout and viewPager. Now my problem is when I try replace with "Message" fragment, the fragment itself didn't show anything but considering there is big TextView inside the "Message" fragment.

MainActivity's navigation click code

navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {


            switch (item.getItemId()) {

                case 0:
                    drawerLayout.openDrawer(GravityCompat.START);
                    break;

                case R.id.Home:
                    getSupportActionBar().setTitle("Home");
                    viewPager.setAdapter(mSectionPageAdapter);
                    viewPager.setCurrentItem(1);
                    mTabLayout.setupWithViewPager(viewPager);
                    break;


                case R.id.Message:
                    mTabLayout.removeAllTabs();
                    getSupportActionBar().setTitle("Message");
                    getSupportFragmentManager().beginTransaction().replace(R.id.viewPager_mainActivity, friendMessageFragment).commit();
                    break;



            }

            drawerLayout.closeDrawer(GravityCompat.START);
            return true;
        }
    });

Image of Home tabLayout

Image of Message fragment, this fragment suppose to have a textView in the middle

I try to use getSupportFragmentManager() to replace my TabLayout but it seems not working at all. Does anyone has any Idea of what am I doing wrong or what am I lacking in this code, I have been struggling these days to solve this problem...

Update MainActivity XML code

<android.support.v4.widget.DrawerLayout 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/drawer_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivityUsed.MainActivity">


<android.support.design.widget.CoordinatorLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/floatingActionButton"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_gravity="bottom|end"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:src="@drawable/add"
        app:backgroundTint="@color/backgroundOrange" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar_main_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:showDividers="beginning"
            android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">



            <include
                android:id="@+id/app_bar_info_regis_main_activity"
                layout="@layout/app_bar_info_regis" />

            <include android:id="@+id/app_bar_search_view"
                layout="@layout/search_view"/>


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


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


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


        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager_mainActivity"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_below="@id/appbar_main_layout">


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


    </RelativeLayout>

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

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:layout_marginEnd="-65dp"
    android:layout_marginRight="-65dp"
    android:fitsSystemWindows="false"
    app:headerLayout="@layout/nav_header"
    app:itemIconTint="@color/colorAccent"
    app:menu="@menu/main_activity_menu" />

Answer 1

when it is only two items, you could use a ViewFlipper , which permits two child nodes.

or use a FrameLayout as a container and inflate fragments accordingly, instead of pre-existing XML .

as it is, it would inflate the second fragment, with no chance to return to the first one fragment.