Android -- Introduction to Fragments (Part 1)

Life gets busy. As a result, I took a hiatus from Android development for a period of several months. What I returned to; the concept of fragments, support libraries, Android Studio and with it a new file structure, new IDE and numerous new technologies for Android development.

Surrounded by new concepts and tools, one must focus on ramping back up one area at a time. With the objective of increased productivity, tools such as Android Studio do much for the developer hiding subtleties from the developer by automating a good deal of the heavy lifting. While I fully recommend use of such tools, the course of this post will be working with the SDK, no IDE, to better understand the subtleties and reduce the complexity of the files and structures.

Let's start by creating a project;

$ android list
targets | grep id:
id: 1 or "android-7"
id: 2 or "android-8"
id: 3 or "android-21"
id: 4 or "Google Inc.:Google APIs:7"
id: 5 or "Google Inc.:Google APIs:8"
id: 6 or "Google Inc.:Google APIs:21"

Targeting Google API v21, we specify target 6.

$ android create project --name FragTest01 --path ./ws/FragTest01 --target 6 --package com.fsk.example.FragTest01 --activity FragTest01

Build it by executing the build via Ant;

$ cd ws/FragTest01
$ ant debug
$ adb devices
List of devices attached 
01aa7bcb8c8c07be device

With a connected device, start the logcat service, followed by installing and running the app;

$ xterm -e adb logcat &
$ adb -s 01aa7bcb8c8c07be install -r ./bin/FragTest01-debug-unaligned.apk
$ adb -s 01aa7bcb8c8c07be shell am start -a android.intent.action.MAIN -n com.fsk.example.FragTest01/.FragTest01

We now have an initial project set up, we can continue to play.

First modification we'll make is to the res/layout/main.xml file that was generated as part of the project creation. We'll simply be adding an id to the layout, the usage will become apparent later.

$ cat res/layout/main.xml 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Hello World, FragTest01"
    />
</LinearLayout>

We'll move along next by creating our first fragment. Before we do so though, let's spend a bit of time discussing the concept of fragments.

The Android developers website does solid job describing the concept of fragments, I'd recommend spending some candle-lit quality time with it, but for now the Cliff Notes for fragments are:

• Fragments represent behavior, or portion of user interface in an activity. Think of fragments as a new container to stuff behaviors previously localized in activities with the overall goal of better supporting evolving screen sizes and resolutions.
• A fragments meaning of life is to be contained within an activity, the activity gives the fragment(s) a purpose in life.

Since a fragment represents a portion of the UI, let's create a layout file for it;

$ cat res/layout/myfrag.xml 
<?xml version="1.0" encoding="utf-8"?>
   <LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="horizontal"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:background="#666666">
   <TextView
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:text="My Fragment Example"
   android:textColor="#000000"
   android:textSize="20px" />
</LinearLayout>

Linear layout, text view with some static text.

Next, we'll create a fragment that uses this layout.

$ cat src/com/fsk/example/FragTest01/MyFragment.java

package com.fsk.example.FragTest01;

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

public class MyFragment extends Fragment {
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.myfrag, container, false);
    }
   public static Fragment newInstance() {
        MyFragment fragment = new MyFragment();
        fragment.setRetainInstance(true);
        return fragment;
    }
}

The two key methods of interest; onCreateView() and newInstance().   

The onCreateView() method is part of the Fragment Lifecycle, it's purpose is to return a View that is the root of the fragment layout. This is done in this case by inflating the myfrag.xml layout file.

The newInstance() method returns a new instance of the fragment, used by the activity which is shown below;

$ cat src/com/fsk/example/FragTest01/FragTest01.java 
package com.fsk.example.FragTest01;

import android.app.Activity;
import android.os.Bundle;
import java.util.Timer;
import java.util.TimerTask;

public class FragTest01 extends Activity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        init();
    }

    private void init()
    {
       Timer t=new Timer();
       t.schedule(new TimerTask() 
       {
           public void run()
           {
            getFragmentManager().beginTransaction()
                     .add(R.id.container, MyFragment.newInstance())
                     .commit();
           }
       },5000);
    }
}

The activity simply sets the content view, represented by main.xml, then schedules a timer to add (read that as create) the fragment after 5 seconds. Adding/removing/replacing of fragments is done in the form of 'transactions' which are executed on the UI thread some time after being committed.

About as simple of an example as there is. We'll expand on it in later posts.

Full source for this example can be retrieved here.

Cheers.