Android -- Introduction to Fragments (Part 2)

Building off our last example, we'll spend some time demonstrating how to introduce multiple fragments into a single activity.  Along the way, we'll pick up a little more knowledge on how the activities and fragment interaction with one another.

Let's start by extending the res/layout/main.xml to have two layouts as follows;

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

Notice we've duplicated the original linear layout (id=container) and identified the copy as container2.  In addition, both of these layouts have been contained within a parent layout, the layout_height attributes were modified to keep the first layout from using the full screen.

As you may recall, the activity FragTest01.java specifies adding an object of the MyFragment class into the desired container;

.
.
            getFragmentManager().beginTransaction()
                     .add(R.id.container, MyFragment.newInstance())
                     .commit();
.
.

If we extend on this call as follows we're left with creating two copies of the MyFragment fragment and placing into two independent containers.

.
.
            getFragmentManager().beginTransaction()
                     .add(R.id.container, MyFragment.newInstance())
                     .add(R.id.container2, MyFragment.newInstance())
                     .commit();
.
.

Ehh, not terribly interesting, two copies of the same fragment with the same layout.

We can now create specialized fragments, one for each layout.  We'll leave MyFragment.java/myfrag.xml in the top layout and create new elements MyFragment02.java/myfrag2.xml for the lower frame.

Duplicating res/layout/myfrag.xml, we simply change the text to demonstrate the difference from the original.

$ cat res/layout/myfrag2.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 02"
   android:textColor="#000000"
   android:textSize="20px" />
</LinearLayout>

Similarly, we'll duplicate MyFragment.java for a new class, inflating from the new layout file.

$ cat src/com/fsk/example/FragTest01/MyFragment02.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 MyFragment02 extends Fragment {
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.myfrag2, container, false);
    }

   public static Fragment newInstance() {
        MyFragment02 fragment = new MyFragment02();
        fragment.setRetainInstance(true);
        return fragment;
    }

}

Finally, return to the activity and add unique fragments rather than adding two copies of the original.

             .

             .

            getFragmentManager().beginTransaction()

                     .add(R.id.container, MyFragment.newInstance())

                     .add(R.id.container2, MyFragment02.newInstance())

                     .commit();

             .

             .

We end with two specialized fragments within the same activity;

Nothing sexy, but a toy example that demonstrates tying and linking activities and fragments.

Cheers.

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.