Replace fragments in Android

Question

I can't replace the fragments using the codes below. I mean that the second fragment appeared under the first fragment. The first fragmnent didn't hide as I expected. What is wrong here? Thanks a lot!

My activity :

public class MainActivity extends Activity  {

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

    final FragmentManager fm = this.getFragmentManager();
    final Fragment fragmenttwo = new FragmentTwo();

    Button fmchangebutton = (Button) this.findViewById(R.id.fmchangebutton);
    fmchangebutton.setOnClickListener(new OnClickListener(){

        @Override
        public void onClick(View v) {

             FragmentTransaction ft = fm.beginTransaction();
             ft.replace(R.id.fragment1, fragmenttwo);
             ft.commit();

        }

    });

    };

};

activity_main.xml

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

<Button
    android:id="@+id/fmchangebutton"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Change Fragment" />

<fragment
    android:id="@+id/fragment1"
    android:name="com.example.fragementex.FragmentOne"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
 </LinearLayout>

fragmnetone.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" >

<EditText
    android:id="@+id/editText1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="clip_horizontal"
    android:ems="10"
    android:gravity="center_vertical|center_horizontal|top|fill_vertical"
    android:text="This is Fragment One" >


</EditText>

</LinearLayout>

fragmnettwo.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" >

<EditText
    android:id="@+id/editText1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="clip_horizontal"
    android:ems="10"
    android:gravity="center_vertical|center_horizontal|top|fill_vertical"
    android:text="This is Fragment Two" >

  </EditText>

 </LinearLayout>

Answer 1

You cannot replace a fragment attached to the layout, you need to create a host container as FrameLayout like this:

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

      <Button
          android:id="@+id/fmchangebutton"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:text="Change Fragment" />

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

</LinearLayout>

Then, you will able to - first - add and display the first fragment and replace it with the second as follows:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // set the layout which contains the framelayout
    setContentView(R.layout.activity_main);

    final FragmentManager fm = this.getFragmentManager();
    final Fragment fragmentone = new FragmentOne();
    final Fragment fragmenttwo = new FragmentTwo();

    // if first initialization
    if(savedInstanceState == null) {
        // display with "add" the first fragment
        this.getFragmentManager().beginTransaction()
            .add(R.id.frame_layout, fragmentone).commit();
    }

    Button fmchangebutton = (Button) this.findViewById(R.id.fmchangebutton);
    fmchangebutton.setOnClickListener(new OnClickListener(){
        @Override
        public void onClick(View v) {
            FragmentTransaction ft = fm.beginTransaction();
            // "replace" the fragment inside the framelayout
            ft.replace(R.id.frame_layout, fragmenttwo);
            ft.commit();
        }
    });

}