Simple Tutorial for Fragments

Hey Folks, Let us learn a simple creation of Fragments.

Fragment is an independent component which can be used by an activity. A fragment encapsulate functionality so that it is easier to reuse within activities and layouts. 


Learn more from http://developer.android.com/guide/components/fragments.html 

Create xml for main view from layout folder
mainview.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" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="onClickFragment"
            android:text="Button1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="onClickFragment"
            android:text="Button2" />

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="onClickFragment"
            android:text="Button3" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/frg_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>

Create xml from layout folder for fragments

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

</LinearLayout>

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

</LinearLayout>
 
fragment3.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="wrap_content"
        android:layout_height="wrap_content"
        android:text="Fragment 3"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

 

Coding Part

Create MainActivity class from your Package name. 
 
This is the parent Activity which extends FragmentActivity

public class MainActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        FragmentTransaction frgTrans = getSupportFragmentManager()
                .beginTransaction();
        FirstFragment firstFragment = new FirstFragment();
        frgTrans.add(R.id.frg_container, firstFragment);
        frgTrans.commit();
    }

    public void onClickFragment(View view) {

        Fragment newFragment;
        if (view == findViewById(R.id.button1)) {
            newFragment = new FirstFragment();

        } else if (view == findViewById(R.id.button2)) {
            newFragment = new SecondFragment();
        } else if (view == findViewById(R.id.button3)) {
            newFragment = new ThirdFragment();
        } else {
            newFragment = new FirstFragment();
        }
        FragmentTransaction newfrgTrans = getSupportFragmentManager()
                .beginTransaction();
        //newfrgTrans.setCustomAnimations(R.anim.pop_enter,R.anim.pop_exit); //you can also set animations
        newfrgTrans.replace(R.id.frg_container, newFragment);
        newfrgTrans.addToBackStack(null);
        newfrgTrans.commit();
    }


Create FirstFragment class:

public class FirstFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub

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

}

Create SecondFragment class:  


public class SecondFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.fragment2, container, false);
    }

}

Create ThirdFragment class: 


public class ThirdFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.fragment3, container, false);
    }

}