How to use Android Fragment?

When talk about Android Fragment, I don't see there is a need to use it initially. My perception is, if you have activity, why you need to use it? After more involve in the Android development, then I realize that it is quite useful for modular activity design.

What is Fragment?
- Fragment represent a sub-activity that added into a main activity
- It must be added into an activity and only working if it is added into an activity
- It has its own lifecycle, but much depends on the parent activity lifecycle
- It has its own layout which I find it is useful for modular activity design
- You can dynamically add/remove into an activity during runtime. (This is a great feature)

The table below explain the lifecycle of the fragment.

Fragment Callbacks

onAttach()

onCreate

onCreateView

onActivityCreated

onStart()

onResume

onPause

onStop

onDestroyView

onDestroy

onDetech

Below is the sample source code explain the simple concept of Fragment

1. Create a project with the below configuration

Application Name: TechTips
Project Name: TechTips
Package Name: com.example.techtips

2. TechTipsActivity.java

package com.example.techtips;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class TechTipsActivity extends Activity {

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

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.activity_tech_tips, menu);
  return true;
 }
}

3. TechTipsFragment.java

package com.example.techtips;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class TechTipsFragment extends Fragment{
 @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment_tech_tips, null);
        return v;
    }
}

4. activity_tech_tips.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"
    tools:context=".TechTipsActivity" >


   <fragment
        android:id="@+id/techtipsfragment"
        android:name="com.example.techtips.TechTipsFragment"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
    />

</RelativeLayout>

5. fragment_tech_tips.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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/app_name"
    />
</LinearLayout>

Run on your device/emulator, you will see the "Tech Tips" wording is displayed. Explore the code, you will find out that, the "Tech Tips" wording is being handle by fragment layout xml file. First snippet code with basic concept to move on to the next and more complicated sample. More to come for Android Fragment...