Add/Remove Fragment - Simple Example

What we are going to do :     

A View with a Button. When we click that Button a fragment is being added dynamically in our View. We click again and the fragment is being dynamically removed.

before and after Fragment Transaction took place

What we need: 

One Activity and one Fragment. In the Activity's layout we add two layout objects. That's a Button and a FrameLayout.

In Fragment's layout we have a TextView that contains just text in a color background

So the code for the Activity's and Fragment's layout is: 

<?xml version="1.0" encoding="utf-8"?> <relativelayout 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/button_frag_1" android:layout_width="124dp" android:layout_height="wrap_content" android:text="@string/button_text_1" /> <FrameLayout android:id = "@+id/fragment_container_1" android:layout_width="80dp" android:layout_height="wrap_content" android:layout_alignBottom="@+id/button_frag_1" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:layout_toRightOf="@+id/button_frag_1" > </FrameLayout> </RelativeLayout>
Fragment's Layout : <?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" android:background="@color/cool"> <TextView android:id="@+id/tv" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#FFCC99" android:gravity="center" android:text="Add/Remove Fragment" /> </LinearLayout>
 
Note the android:id = "@+id/fragment_container_1"  in the Activity's layout which is an identifier for our fragment. When we make Transactions like add we refer to a fragment by id.

Activity and Fragment :

Fragment Class :   is a typical Fragment class as we have seen it before
public class AddRemoveFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate( R.layout.addremove_fragment , container, false); return view; } }

Activity Class :  onClick() begins Transaction. If state is null then we add and commit the fragment else we need to remove and commit again.
So the code is :

public class AddRemoveActivity extends FragmentActivity { public int state=0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.addremove_activity); final AddRemoveFragment Frag_A = new AddRemoveFragment(); final Button button = (Button) findViewById(R.id.button_frag_1); button.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); if ( state == 0 ) { state=1; transaction.add(R.id.fragment_container_1, Frag_A); transaction.commit(); } else { state=0; transaction.remove(Frag_A); transaction.commit(); } } }); } }