Fragment layout affecting persistence when replaced

Question

I'm a bit of a noob with Android Fragments, so hope someone can point out my error easily. I've built up a non-ActionBar app from scratch to have a MainActivity with three fragments (using a tutorial online). My fragments are controlled by three buttons on the MainActivity, and the XML for this fragment holder and buttons is:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <fragment
        android:id="@+id/theFragment"
        android:name="org.mypackage.FragmentOne"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <LinearLayout
        android:id="@+id/bottomSection"
        android:layout_width="fill_parent"
        android:layout_height="70.0dip"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:background="@android:color/white"
        android:orientation="horizontal">

        <RelativeLayout
            android:id="@+id/relativeLayout1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white">

            <ImageButton
                android:id="@+id/button1"
                android:layout_width="50dip"
                android:layout_height="50dip"
                android:layout_alignParentLeft="true"
                android:layout_marginBottom="7dip"
                android:layout_marginLeft="50dip"
                android:layout_marginTop="8dip"
                android:adjustViewBounds="true"
                android:background="@null"
                android:onClick="selectFrag"
                android:scaleType="fitCenter"
                android:src="@drawable/offerbutton" />

            <ImageButton
                android:id="@+id/button3"
                android:layout_width="50dip"
                android:layout_height="50dip"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="7dip"
                android:layout_marginRight="50dip"
                android:layout_marginTop="8dip"
                android:adjustViewBounds="true"
                android:background="@null"
                android:onClick="selectFrag"
                android:scaleType="fitCenter"
                android:src="@drawable/talkbutton" />
        </RelativeLayout>
    </LinearLayout>

    <ImageButton
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:layout_margin="5dip"
        android:background="@android:color/transparent"
        android:onClick="selectFrag"
        android:padding="20dip"
        android:paddingRight="20dip"
        android:src="@drawable/floatingbutton"
        android:text="Floating Button" />
</FrameLayout>
</RelativeLayout>

These buttons call a simple selectFrag method in MainActivity:

public void selectFrag(View view) {
    Fragment fr;
    switch (view.getId()) {
        case R.id.button1:
            fr = new FragmentOne();
            break;
        case R.id.button2:
            fr = new FragmentTwo();
            break;
        case R.id.button3:
            fr = new FragmentThree();
            break;
        default:
            fr = new FragmentOne();
            break;
    }
    FragmentManager fm = getFragmentManager();
    FragmentTransaction ft = fm.beginTransaction();
    ft.replace(R.id.theFragment, fr);
    ft.addToBackStack(null);
    ft.commit();
}

I've developed Fragment2 and Fragment3, both with moderately complex XML layouts, and they work fine (press button 2, Fragment1 vanishes, Fragment2 appears, and the same for button 3). I'm now working on the layout for Fragment1. At the moment, it's a simple holder layout:

fragment_one.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="This is fragment No.1"
    />
</LinearLayout>

PROBLEM: AS SOON AS I try to make fragment_one.xml more complex (include new LinearLayouts and views inside them etc.), then this layout becomes permanently displayed onscreen when I click the button to move to Fragment2 or Fragment3. In summary, Fragment2 or Fragment3 aren't completely removing the layout of Fragment1. Fragment2 or 3 are successfully displayed onscreen, but below "This is fragment No.1" textView.

I'm stuck. Any ideas? I've tried playing with <FrameLayout/> instead of <fragment/>, but wasn't getting anywhere fast...

score 1 · Accepted Answer · edited May 23 '17 at 10:27

That's normal behavior. You are not actually replacing the fragment but more like putting it on top of the previous fragment. What you can do is set the background color to white(or whatever is the default background you use in your application) in fragment 2 so it paints over fragment 1.

From android documentation:

When you add a fragment to an activity layout by defining the fragment in the layout XML file, you cannot remove the fragment at runtime. If you plan to swap your fragments in and out during user interaction, you must add the fragment to the activity when the activity first starts, as shown in the next lesson.

Also more about it in this SO question

Thanks, very helpful. Using your comments, I have created an empty fragment, and I redirect to the first real fragment in onCreate(). Seems to work well, cheers! — iaindownie, Dec 04 '15 at 11:12

Fragment layout affecting persistence when replaced

1 Answers1