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.