Proper Fragment Transaction with Fragments defined by XML, and not Fragments defined Programmatically

Question

I have two fragments, each fragment contains a view pager, where I currently am using this library in order to use different colored tabs for my view pager. Now I have an action bar action that when clicked basically leads to fragment2. But when I do that fragment1 is not removed and is on top of the fragment2 that the user just switched into, like this. Now, I tried to do what the answer said, and add the fragments programmatically, but that isn't possible (I think) since I'm using the custom PagerSlidingTabStrip. Now is there anyway to change fragments on the click of a button, while still using the custom library? Additionally, I'd just like to add that I'm somewhat new to Android.

Fragment1

import java.lang.reflect.Field;

import android.app.AlertDialog;
import android.app.FragmentTransaction;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.LayoutParams;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import android.widget.RelativeLayout;

import com.actionbarsherlock.app.SherlockFragment;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;
import com.actionbarsherlock.view.MenuItem;
import com.astuetz.PagerSlidingTabStrip;
import com.bernard.beaconportal.R.layout;



public class FragmentsView extends SherlockFragment {


        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            setHasOptionsMenu(true);


            View view = inflater.inflate(R.layout.viewpager_schedule, container, false);




            ViewPager pager = (ViewPager) view.findViewById(R.id.viewPager1);




            pager.setAdapter(new ViewPagerAdapterScheduleView(getChildFragmentManager()));
            PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) view.findViewById(R.id.pagerTabStrip1);


            tabs.setViewPager(pager);

            return view;
        }

        @Override
        public void onDetach() {
            super.onDetach();
            try {
                Field childFragmentManager = Fragment.class
                        .getDeclaredField("mChildFragmentManager");
                childFragmentManager.setAccessible(true);
                childFragmentManager.set(this, null);
            } catch (NoSuchFieldException e) {
                throw new RuntimeException(e);
            } catch (IllegalAccessException e) {
                throw new RuntimeException(e);
            }
        }

        @Override
        public void onCreateOptionsMenu(
              Menu menu, MenuInflater inflater) {
           inflater.inflate(R.menu.android_edit, menu);
        }

        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
           // handle item selection
           switch (item.getItemId()) {
              case R.id.edit:
                  alert_dialog();
                 return true;
              default:
                 return super.onOptionsItemSelected(item);
           }

        }



        private void alert_dialog() {
             {
                AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
                builder.setTitle("Edit Bands")
                       .setItems(R.array.edit_mode, new DialogInterface.OnClickListener() {
                           public void onClick(DialogInterface dialog, int which) {

                               Fragment newFragment = new FragmentsLinked();

                               android.support.v4.app.FragmentTransaction transaction = getFragmentManager().beginTransaction();




                               transaction.replace(R.id.view_container, newFragment);
                               transaction.addToBackStack(null);



                               transaction.commit();
                       }
                });
                AlertDialog alertDialog = builder.create();

                         alertDialog.show();


        }
        }



        }

Fragment 2

import java.lang.reflect.Field;
import com.actionbarsherlock.app.SherlockFragment;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuInflater;
import com.actionbarsherlock.view.MenuItem;
import com.astuetz.PagerSlidingTabStrip;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;



public class FragmentsLinked extends SherlockFragment {



        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            setHasOptionsMenu(true);



            View view = inflater.inflate(R.layout.viewpager_schedule_linked, container, false);
            // Locate the ViewPager in viewpager_main.xml
            ViewPager pager = (ViewPager) view.findViewById(R.id.viewPager2);
            // Set the ViewPagerAdapter into ViewPager
            pager.setAdapter(new ViewPagerAdapterScheduleLinked(getChildFragmentManager()));

            return view;
        }

        @Override
        public void onDetach() {
            super.onDetach();
            try {
                Field childFragmentManager = Fragment.class
                        .getDeclaredField("mChildFragmentManager");
                childFragmentManager.setAccessible(true);
                childFragmentManager.set(this, null);
            } catch (NoSuchFieldException e) {
                throw new RuntimeException(e);
            } catch (IllegalAccessException e) {
                throw new RuntimeException(e);
            }
        }

        @Override
        public void onCreateOptionsMenu(
              Menu menu, MenuInflater inflater) {
           inflater.inflate(R.menu.android_apply, menu);
           inflater.inflate(R.menu.android_help, menu);

        }




}

xml used for Fragment 1

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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/view_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

        <com.astuetz.PagerSlidingTabStrip
    android:id="@+id/pagerTabStrip1"
    android:layout_width="match_parent"
    android:layout_height="48dip"
    app:pstsIndicatorColor="#3498DB" 
    app:pstsUnderlineColor="#3498DB"
    />

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

</RelativeLayout>

xml used for fragment 2

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    android:id="@+id/linked_container"
    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="fill_parent"
    android:layout_height="fill_parent" 
    >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="50dp"/>

    <View
        android:id="@+id/View2"
        android:layout_width="fill_parent"
        android:layout_height="8dp"
        android:layout_alignBottom="@+id/textView2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:background="#3498DB" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="48dip"
        android:layout_alignParentTop="true"
        android:gravity="center"
        android:text="Edits Will be Applied to All of the Same Band"
        android:textAlignment="gravity"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

If you have any questions or I didn't explain something well enough or something like that just say something and I'll add it or explain it better

Answer 1

You cannot remove fragment that is declared in xml layout file. remove your fragment from xml and add it from code (ie in activity's onCreate()) and you will be then able to remove it later.