How to create and add Fragments in MainActivity


Fragment represents a specific part of a user interface. It is a behavior of a certain part of an activity.

Some important points about fragments

  • Fragments can also be modified during run time.
  • You can think fragment as a sub activity.
  • Fragments have their own life cycle.
  • For fragment we have one java class and a xml layout.

Let us create fragments in Android

Step 1: Create an Activity

  • You must create a subclass of FragmentActivity in order to use fragments.
    public class MainActivity extends FragmentActivity{
    }
  • Make sure you have imported the compatibility library. Fragments are supported since API 11. To make to compatible with older versions you need to add the support library.
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentActivity;

Step 2: Create Fragment

  • To create a fragment you need to create a subclass of Fragment.
    public class FragmentA extends Fragment{
    }
  • Now override the below method.
    	@Override
    	public View onCreateView(LayoutInflater inflater, ViewGroup container, 
    			Bundle savedInstanceState) {
    		// TODO Auto-generated method stub
    		
    		return inflater.inflate(R.layout.layout_fragmenta, container, false);
    	}
  • onCreateView(): It is a callback method which is called whenever android system is about to draw the user-interface for fragement. We wish to draw an user-interface. We can do so by inflating the layout with the help of LayoutInflater object.
  • container is the ViewGroup from activity's layout in which the user-interface of fragment will be inserted.
  • Now the inflate method of LayoutInflate
  1. First argument takes a resource id of the layout you wish to inflate.
  2. Second argument takes a ViewGroup in which the user-interface of a fragment is to be inflated.

Now let us create two fragments. We will then do communication between them.

Layout for fragmentA

<?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="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Add 1" />

</LinearLayout>

Layout for fragmentB

<?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="wrap_content"
        android:layout_height="wrap_content"
        android:text="0"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

How to add Fragments in MainActivity

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <fragment
        android:id="@+id/fragmentA"
        android:name="com.example.kb4devfragments.FragmentA"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="200dp"
        android:layout_marginTop="18dp"
      
         />
    <fragment
        android:id="@+id/fragmentB"
        android:name="com.example.kb4devfragments.FragmentB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="109dp"
        android:layout_marginTop="118dp"
        
         />

</RelativeLayout>

In the next tutorial we will implement FragmentA and FragmentB. We will also learn about inter-fragment communication.