How to replace fragment with another fragment?

Question

I am getting trouble in fragment. I am having two fragments & both fragment contains List. What i am doing is when ever user click on button, the fragment should be replaced from another fragment. The problem i am getting when ever i am clicking on button the other fragment is coming below to current fragment.

Screenshot

MainActivity

public class MainActivity extends Activity {

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

    public void selectFrag(View view) {
        Fragment fr;

        if(view == findViewById(R.id.button2)) {
            fr = new FragmentTwo();

        }else {
            fr = new FragmentOne();
        }

        FragmentManager fm = getFragmentManager();
        FragmentTransaction fragmentTransaction = fm.beginTransaction();
        fragmentTransaction.replace(R.id.fragment_place, fr);
        fragmentTransaction.commit();

    }

}

FragmentOne.Class

public class FragmentOne extends ListFragment implements OnItemClickListener {


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

        return inflater.inflate(R.layout.fragment_one, container, false);
    }


    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        ArrayAdapter adapter = ArrayAdapter.createFromResource(getActivity(), R.array.action, android.R.layout.simple_list_item_1);
        setListAdapter(adapter);
        getListView().setOnItemClickListener(this);
    }
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,long id) {
        Object o = this.getListAdapter().getItem(position);
        String pen = o.toString();

        // Toast.makeText(getActivity(), pen, Toast.LENGTH_SHORT).show();
    }



}

FragmentTwo.Class

public class FragmentTwo extends ListFragment implements OnItemClickListener {



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

        return inflater.inflate(R.layout.fragment_two, container, false);
    }



    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        ArrayAdapter adapter = ArrayAdapter.createFromResource(getActivity(), R.array.type, android.R.layout.simple_list_item_1);
        setListAdapter(adapter);
        getListView().setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,long id) {
        Object o = this.getListAdapter().getItem(position);
        String pen = o.toString();

        // Toast.makeText(getActivity(), pen, Toast.LENGTH_SHORT).show();
    }

}

activity_main

<?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">

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="selectFrag"
        android:text="Fragment No.1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="selectFrag"
        android:text="Fragment No.2" />

    <fragment
        android:id="@+id/fragment_place"
        android:name="com.example.pitech09.myapplication.FragmentOne"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Answer 1

// main activity

<?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">
<!-- a frame layout for replace in full-->
        <FrameLayout
                android:id="@+id/fragment_place"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"/>

    </LinearLayout>

// Fragment code // here you have to write code and depending on click event you can replace a fragments

FragmentOne fr = new FragmentOne();
   FragmentManager fm = getFragmentManager();
    FragmentTransaction fragmentTransaction = fm.beginTransaction();
    fragmentTransaction.replace(R.id.fragment_place, fr);
    fragmentTransaction.commit();

// same way you have to do in next fragment

Answer 2

As @RishabhDuttSharma suggested, Use a FrameLayout instead of fragment in your activity layout and initialize the first fragment in code.

Layout:

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

Code:

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

    Fragment fr = new FragmentOne();
    FragmentManager fm = getFragmentManager();
    FragmentTransaction fragmentTransaction = fm.beginTransaction();
    fragmentTransaction.replace(R.id.fragment_place, fr);
    fragmentTransaction.commit();
}

Answer 3

Use this code in your MainActivity

    Button btnList = (Button) findViewById(R.id.btnList);
    Button btnGrid = (Button) findViewById(R.id.btnGrid);
    btnList.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            final Fragment listfragment = new ListFragment();
            getSupportFragmentManager().beginTransaction().addToBackStack(null).replace(R.id.fragment_place, listfragment).commit();

        }
    });
    btnGrid.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            final Fragment gridfragment = new GridFragment();
            getSupportFragmentManager().beginTransaction().addToBackStack(null).replace(R.id.fragment_place, gridfragment).commit();
        }
    });