Old Fragment is still visible after I perform a Fragment Transaction?

Below is the code for my tabbed fragments. I’ve implemented the navigation drawer into my activity below. I’m also using Fragment Transactions as it works for my Navigation Drawer. When I run the app and click on the navaigation drawer whilst on the media_main page. The page changes however the three tabs are still visible at the top of the page, like so:

]2

The three tabs do not dissapear.

Below is my code:

    public class media_main extends AppCompatActivity {

    DrawerLayout drawerLayout;
    ActionBarDrawerToggle actionBarDrawerToggle;
    FragmentTransaction fragmentTransaction;
    NavigationView navigationView;
    ViewGroup container;

    /**
     * The {@link android.support.v4.view.PagerAdapter} that will provide
     * fragments for each of the sections. We use a
     * {@link FragmentPagerAdapter} derivative, which will keep every
     * loaded fragment in memory. If this becomes too memory intensive, it
     * may be best to switch to a
     * {@link android.support.v4.app.FragmentStatePagerAdapter}.
     */
    private SectionsPagerAdapter mSectionsPagerAdapter;

    /**
     * The {@link ViewPager} that will host the section contents.
     */
    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.media_main_fragment);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ViewGroup mContainer = container;

        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close);
        drawerLayout.addDrawerListener(actionBarDrawerToggle);

        final TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        drawerLayout.addDrawerListener(actionBarDrawerToggle);
        fragmentTransaction = getSupportFragmentManager().beginTransaction();
        fragmentTransaction.add(R.id.main_container, new HomeFragment());
        fragmentTransaction.commit();
        getSupportActionBar().setTitle("Drift Fan");
        navigationView = (NavigationView) findViewById(R.id.navigation_view);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.Home:
                        fragmentTransaction = getSupportFragmentManager().beginTransaction();
                        fragmentTransaction.replace(R.id.tabs, new HomeFragment());
                        fragmentTransaction.commit();
                        getSupportActionBar().setTitle("Home Fragment");
                        item.setCheckable(true);
                        drawerLayout.closeDrawers();
                        tabLayout.setVisibility(View.GONE);
                        break;
                    case R.id.my_account:
                        fragmentTransaction = getSupportFragmentManager().beginTransaction();
                        fragmentTransaction.replace(R.id.tabs, new myAccountFragment());
                        fragmentTransaction.commit();
                        getSupportActionBar().setTitle("My Account");
                        item.setCheckable(true);
                        drawerLayout.closeDrawers();
                        tabLayout.setVisibility(View.GONE);
                        break;
                    case R.id.nav_about:
                        fragmentTransaction = getSupportFragmentManager().beginTransaction();
                        fragmentTransaction.replace(R.id.tabs, new AboutDriftingFragment());
                        fragmentTransaction.commit();
                        getSupportActionBar().setTitle("About Drifting");
                        item.setCheckable(true);
                        drawerLayout.closeDrawers();
                        tabLayout.setVisibility(View.GONE);
                        break;
                    case R.id.nav_shop:
                        fragmentTransaction = getSupportFragmentManager().beginTransaction();
                        fragmentTransaction.replace(R.id.tabs, new ShopFragment());
                        fragmentTransaction.commit();
                        getSupportActionBar().setTitle("Shop");
                        item.setCheckable(true);
                        drawerLayout.closeDrawers();
                        tabLayout.setVisibility(View.GONE);
                        break;
                    case R.id.nav_media:
                        fragmentTransaction = getSupportFragmentManager().beginTransaction();
                        fragmentTransaction.replace(R.id.tabs, new ShopFragment());
                        fragmentTransaction.commit();
                        getSupportActionBar().setTitle("Shop");
                        item.setCheckable(true);
                        drawerLayout.closeDrawers();
                        tabLayout.setVisibility(View.VISIBLE);
                        break;

                }


                return false;
            }

        });




        // Create the adapter that will return a fragment for each of the three
        // primary sections of the activity.
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setAdapter(mSectionsPagerAdapter);

        tabLayout.setupWithViewPager(mViewPager);

    }

    @Override
    protected void onPostCreate(@Nullable Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        actionBarDrawerToggle.syncState();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_media_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    /**
     * A placeholder fragment containing a simple view.
     */
    public static class PlaceholderFragment extends Fragment {
        /**
         * The fragment argument representing the section number for this
         * fragment.
         */
        private static final String ARG_SECTION_NUMBER = "section_number";

        public PlaceholderFragment() {
        }

        /**
         * Returns a new instance of this fragment for the given section
         * number.
         */
        public static PlaceholderFragment newInstance(int sectionNumber) {
            PlaceholderFragment fragment = new PlaceholderFragment();
            Bundle args = new Bundle();
            args.putInt(ARG_SECTION_NUMBER, sectionNumber);
            fragment.setArguments(args);
            return fragment;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_media_main, container, false);
            TextView textView = (TextView) rootView.findViewById(R.id.section_label);
            textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER)));
            return rootView;
        }
    }

    /**
     * A {@link FragmentPagerAdapter} that returns a fragment corresponding to
     * one of the sections/tabs/pages.
     */
    public class SectionsPagerAdapter extends FragmentPagerAdapter {

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

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    media_gallery tb1 = new media_gallery();
                    return tb1;
                case 1:
                    media_video tb2 = new media_video();
                    return tb2;
                case 2:
                    media_podcasts tb3 = new media_podcasts();
                    return tb3;

            }

            return null;

        }

        @Override
        public int getCount() {
            // Show 3 total pages.
            return 3;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            switch (position) {
                case 0:
                    return "Gallery";
                case 1:
                    return "Video";
                case 2:
                    return "Podcasts";
            }
            return null;
        }}
}

Layout Below (EDIT)

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:id="@+id/drawer_layout">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:background="@color/splash">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/splash"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

        </android.support.v7.widget.Toolbar>

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

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

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



    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <include
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        layout="@layout/toolbar_layout"


        />
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_container">

    </FrameLayout>

</LinearLayout>

<android.support.design.widget.NavigationView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/navigation_view"
    android:layout_gravity="start"
    android:background="#000"
    app:itemTextColor="@color/colorPrimary"
    app:itemIconTint="#fff"
    app:menu="@menu/drawer_menu"
    app:theme="@style/NavigationViewStyle"
    app:headerLayout="@layout/navigation_drawer_header">


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


</android.support.v4.widget.DrawerLayout>

Your TabLayout is part of the activity and your main_container is below that, so when ever you change the item in main_container, TabLayout is visible. so other than R.id.Home you can made TabLayout to set as Gone.

In your layout, TabLayout is part of MainActivity,

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

And you’re trying to replace this Framelayour with other fragments,

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_container">

    </FrameLayout>

So other than this layout all will be visible all the time,

So what you can do is if you want tabs to be only in MainFragment, then remaining another fragment just make the Gone

final TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(MenuItem item) {
        switch (item.getItemId()) {
                            case R.id.Home:
                                // Your code
                                tabLayout.setVisibility(View.Visible)
                                break;
                            case R.id.my_account:
                                // Your code
                                tabLayout.setVisibility(View.GONE);
                                break;
                            case R.id.nav_about:
                               // Your code
                                tabLayout.setVisibility(View.GONE);
                                break;
                            case R.id.nav_shop:
                                // Your code
                                tabLayout.setVisibility(View.GONE);
                                break;

                        }

                       return false;
                }

            });

same for other views you don’t want in other fragments