Change Fragment destroy my Layout

Question

Can someone help me with the following: I just want, that the fragments in the middle change, when i click of one button:

But if i click of one, this one happens:

Anybody knows, what there is wrong?

My Fragments are just simple LineaLayouts with a textfield inside. My Main.xml looks like this:

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

<View
    android:id="@+id/actionbar"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@drawable/actionbar_design" />

<LinearLayout
    android:id="@+id/fragments"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@color/fragment_background"
    android:orientation="vertical" >

    <fragment
        android:id="@+id/clubFragment"
        android:name="com.ivenda.clubs.ClubListFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <fragment
        android:id="@+id/ticketFragment"
        android:name="com.ivenda.tickets.TicketListFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <fragment
        android:id="@+id/chatFragment"
        android:name="com.ivenda.chat.ChatListFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <fragment
        android:id="@+id/settingsFragment"
        android:name="com.ivenda.settings.SettingsFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

<LinearLayout
    android:id="@+id/tabbar"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@drawable/tabbar_design"
    android:orientation="horizontal" 
    android:gravity="bottom">

    <LinearLayout
        android:id="@+id/tabbarCustom1"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:background="@drawable/tabbar_design"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/tabBarChat"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:layout_marginRight="1dp"
            android:layout_weight="1"
            android:background="@drawable/tabbar_background_selector"
            android:src="@drawable/ic_launcher" />

        <View
            android:id="@+id/View02"
            android:layout_width="2dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:background="@color/tabbar_divider" />

        <ImageButton
            android:id="@+id/tabBarClubs"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:layout_marginRight="1dp"
            android:background="@drawable/tabbar_background_selector"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <View
        android:id="@+id/View03"
        android:layout_width="2dp"
        android:layout_height="40dp"
        android:layout_gravity="center"
        android:background="@color/tabbar_divider" />

    <LinearLayout
        android:id="@+id/tabbarCustom2"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_weight="1"
        android:background="@drawable/tabbar_design"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/tabBarTickets"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:layout_marginRight="1dp"
            android:layout_weight="1"
            android:background="@drawable/tabbar_background_selector"
            android:src="@drawable/ic_launcher" />

        <View
            android:id="@+id/View01"
            android:layout_width="2dp"
            android:layout_height="40dp"
            android:layout_gravity="center"
            android:background="@color/tabbar_divider" />

        <ImageButton
            android:id="@+id/tabBarSettings"
            android:layout_width="wrap_content"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:background="@drawable/tabbar_background_selector"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
</LinearLayout>

To change the fragments i use this call:

switchFragment(R.id.fragmentholder, new SettingsFragment());

private void switchFragment(int fragId, Fragment frag){
     FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
     ft.replace(fragId, frag);
     ft.commit();
}

Thanks very much!!

Answer 1

Don't put all 4 fragments in your layout if you only want to show one of them at a time. Just put a FrameLayout with the id "@+id/fragmentholder" in your layout at the place where you want the fragment to be shown, then call your method to replace the content of the FrameLayout with your desired fragment.