Android | Creating Android Fragment

android-fragment-2Android Fragment is a reusable module or a component that can be added to one or more activities. You can think of fragment as a “sub-activity” that needs a host “real activity” to be embedded in. Fragment has its own lifecycle, its own input events & can be added or remove at run-time. Also, Fragment can add its own item menu to the activity action bar.

Objectives:

  • How to create a simple fragment?
  • How to add a fragment to an activity?
  • How to add fragment menu item to activity actionbar?

Environment & Tools:

  • Android Developer Tools (ADT) (or Eclipse + ADT plugin)
  • AVD Nexus S Android 4.3 “emulator”
  • Min SDK 11

About this Sample:

  • We will create one simple FragmentFragmentA” and add it to the Activity layout.

( 1 ) Create Android Application

  • File >> New >> Android Application
  • App Name: HTTP App
  • Enter Project Name: android-app-fragments
  • Pakcage: com.hmkcode.android
  • Keep other defualt selections, go Next  till you reach Finish

( 2 ) Activity Layout & Views

  • The layout a LinearLayout
  • It contains one TextView says “Activity
  • It also contains one fragment pointing to Fragment class “FragmentA.java“.
  • res/layout/activity_main.xml
<LinearLayout 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" 
    android:orientation="vertical">

    <TextView 
        android:id="@+id/activityTextView"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_gravity="center_horizontal"
        android:gravity="center"
        android:text="Activity"
        android:textSize="20dp"/>

    <fragment class="com.hmkcode.android.FragmentA"
        android:id="@+id/fragmentA"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"/>

</LinearLayout>

( 3 ) Activity Class

  • The activity class is really simple it overrides the onCreate()
  • onCreate() method just point to the layout activity_main.xml
  • /src/com/hmkcode/android/MainActivity.java
package com.hmkcode.android;

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

public class MainActivity extends Activity  {

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

( 4 ) Fragment Layout

  • The layout a LinearLayout with blue background
  • It contains one TextView says “Fragment A
  • It also contains one Button Click A” to be used to interact with the host Activity.
  • res/layout/fragment_a_layout.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"
    android:background="#0099ff">
    <TextView 
        android:id="@+id/fragment_A_TextView"
        android:layout_width="fill_parent"
    	android:layout_height="0dp"
    	android:layout_weight="3"
    	android:text="Fragment A"
    	android:layout_gravity="center_horizontal"
    	android:gravity="center"
    	android:textColor="#fff"
    	android:textSize="20dp"
    	/>
    <Button
        android:id="@+id/fragment_A_Button"
        android:layout_width="100dp"
    	android:layout_height="0dp"
    	android:layout_weight="1"
    	android:layout_gravity="center"
        android:text="Click A"/>
</LinearLayout>

( 5 ) Fragment Class

  • The activity class is really simple it overrides the onCreateView()
  • onCreateView() method inflates “creates” the view of the fragment by pointing to fragment_a_layout.xml
  • /src/com/hmkcode/android/FragmentA.java
package com.hmkcode.android;

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

public class FragmentA extends Fragment {

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

        View view =  inflater.inflate(R.layout.fragment_a_layout, container, false);
        return view;

	}

}

If you deploy and run the App you will get the following:

android-fragment

( 6 ) Add Fragment Menu Items to Activity ActionBar

  • A Fragment can add its menu items to the host Activity Options Menu or Action Bar.
  • Fragment should override onCreateOptionsMenu()
  • onCreateOptionsMenu() will NOT be called unless setHasOptionsMenu(true) is called during onCreate().
  • /res/menu/fragment_a_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/action_a"
        android:orderInCategory="100"
        android:showAsAction="always"
        android:title="A Item"/>

</menu>
  • /src/com/hmkcode/android/FragmentA.java
package com.hmkcode.android;

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

public class FragmentA extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
        View view =  inflater.inflate(R.layout.fragment_a_layout, container, false);
        return view;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setHasOptionsMenu(true);
    }

    @Override
    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
        inflater.inflate(R.menu.fragment_a_menu, menu);
        super.onCreateOptionsMenu(menu, inflater);
    }
}

android-fragment-2