Fragments overlapping using ListFragment and FragmentTabHost

Question

My FragmentTabHost and ListView works fine until I clicked an item in ListView then change Tab.That is when the Fragments overlap.

Here is the image after clicking an item in ListView then changing from Tab 1(where the ListView resides) to Tab 2(another fragment is called).

http://i904.photobucket.com/albums/ac243/fookywooky/OverlappingFragments_zps2b60e9ab.png

Here is my main activity

public class MainActivity extends FragmentActivity {
private FragmentTabHost hostTab;

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

    hostTab = (FragmentTabHost)findViewById(android.R.id.tabhost);
    //hostTab = (TabHost) findViewById(R.id.tabhost);
    hostTab.setup(this,getSupportFragmentManager(), android.R.id.tabcontent);


    hostTab.addTab(
            hostTab.newTabSpec("tab1").setIndicator("Tab 1",
                    getResources().getDrawable(android.R.drawable.star_on)),
            FragmentTab.class, null);
    hostTab.addTab(
            hostTab.newTabSpec("tab2").setIndicator("Tab 2",
                    getResources().getDrawable(android.R.drawable.star_on)),
            FragmentTab1.class, null);
    hostTab.addTab(
            hostTab.newTabSpec("tab3").setIndicator("Tab 3",
                    getResources().getDrawable(android.R.drawable.star_on)),
            FragmentTab2.class, null);

}

And here is my fragment for Tab 1(with ListView)

public class FragmentTab extends ListFragment implements OnItemClickListener {

@Override
public void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    String[] values = new String[] { "Ang na  Ang na", "Sulakihin", "Somaskidot", "Moko Moko"};
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, values);
    setListAdapter(adapter);
}




@Override
public void onListItemClick(ListView l, View v, int position, long id) {

    switch(position){
    case 0:
        // Create new fragment and transaction
        Fragment newFragment = new FragmentInListView();
        FragmentTransaction transaction = getFragmentManager().beginTransaction();

        transaction.replace(android.R.id.tabcontent, newFragment);
        transaction.addToBackStack(null);
        transaction.setTransitionStyle(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
        // Commit the transaction
        transaction.commit();
        break;
    default:
    }

    }
}

I just added 1 fragment for 1 item in the ListView for testing. Still no fragments for Items 2,3 and 4.

Here is my code for the Tab 2.

public class FragmentTab1 extends Fragment {

FragmentActivity main;

@Override
public void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    // TODO Auto-generated method stub

    View view = inflater.inflate(R.layout.fragment_layout1,
            container, false);
        TextView tv= (TextView) view.findViewById(R.id.text);
        tv.setText("Fragment 2"); 
        return view;

}

}

And here is my activity_main.xml

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/replace"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">


<android.support.v4.app.FragmentTabHost 

    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
   </LinearLayout>

</android.support.v4.app.FragmentTabHost>

And here is the xml file for the list view fragment.

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"
android:id="@+id/tanga" >

<ListView 
    android:id="@+id/lv"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</ListView>

and lastly, here is the xml for Tab 2

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical" 
android:id="@+id/bobo">

<TextView
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical|center_horizontal"
    android:text="@string/hello_world"
    android:textAppearance="?android:attr/textAppearanceMedium" />

Just feel free to ask if you want anymore code to be posted. I will be grateful for any help or comments. Please help. Thanks in advance.