Download android:layout_height="wrap_content"

IS 389 ANDROID FRAGMENT LAB
EKEDAHL
ABSTRACT
In this lab, you will work with Android Fragments. The application that you create for this lab will show
you the event lifecycle of adding and replacing fragments and how fragments are displayed within their
container (activity)

For this lab, I have posted this document electronically. I suggest that you load the Microsoft
Word document. That way you can copy and paste my code into your lab.

There is a significant amount of layout and Java code in this program. Thus, the program
assumes that you are starting with the project IS389FragmentLayoutLab.zip. (available on the
Fragments page of my Web site). A summary of this code appears in the Work Completed
section:
KEY TERMS

Back stack: As users navigate from activity to activity or from fragment to fragment, activities
and fragments are added and replaced from what is called the back stack.

Fragment: a portion of a user interface within and activity. Fragments are used to build multipane user interface.

Task: When you run an application, that application is considered a task. The same task is used
as you navigate from activity to activity and to and from activities outside of your application.
Work Completed
Because there is so much code in this lab, I have completed the boiler plate for you. That is, I have
created all of the files that comprise the application. You will review these files and their purpose before
starting to write the code that will “connect the dots” together.
HANDS-ON STEPS: Importing the template project into Eclipse
In the following sequence of steps, you will import the startup activity into Eclipse and review its
contents.
1. From by Web site, download the file IS389FragmentLayoutLab.zip and import it into Eclipse.
This file appears on the Fragments page.
The following excerpt from the Package Explorer shows the files and their folder location. Some of these
files have been completes. Some contain only a template for the code that you will write. Finally, some
of the code derives from the code you wrote in the networking and ListView labs.
The res/layout/strings.xml file contains all of the prompt resources and activity titles as usual:
In this application, the main activity operates similar to the main activity for the other applications that
you have written. The main activity contains buttons used to display the other activities in the
application. There are two activity_main.xml layout files and one MainActivity.java file.

The first layout is named activity_main.xml and appears in the layout folder. This layout will be
rendered while the device is in portrait mode. The activity contains two buttons and two
fragments that are rendered vertically. (android:orientation="vertical")

The second layout is named activity_main.xml and appears in the layout-land folder. This layout
will be rendered while the device is in landscape mode. The activity contains two buttons and
two fragments that will be rendered horizontally.
(android:orientation="horizontal")
Both of the above layout files have the same widgets having the same name values for the (+@id/)
property. Both layout files share the same Java code. The only difference between the two is the
orientation / position of the widgets. Both layout files contain the following buttons:
<Button
android:id="@+id/btnConfig"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/prompt_button_config" />
<Button
android:id="@+id/btnFragmentList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/prompt_button_fragmentList" />
The src/MainActivity.java file contains the Java code to for the two activity_main.xml files. The code
file is shared between the two activity files that will render the page in portrait and landscape modes. I
have written log messages in each of the event handlers (listeners) so that you can see the event
lifecycle for the activities and fragments:
The MainActivity.java file displays two other activities.

The activity named ActivityConfig.java contains code to get configuration and display
information discussed in class.

The activity named ListActivityFragment.java contains the activity that will render one or two
fragments based on the orientation.

A third activity named DetailActivityFragment.java will render the detail fragment for the while
the device is in portrait monde.
The ActivityConfig.java files used two layout files that are part of the startup package. Again, both
layouts have the same widgets having the same names. In portrait mode, the widgets are rendered
vertically. In landscape mode, the prompts and corresponding values are rendered horizontally using
nested linear layouts.
The following code shows the layout /config_activity.xml layout file. It has <TextView> prompts and
values stored in <EditText> widgets rendered one below another. The orientation of the
<LinearLayout> is vertical.
<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"
android:orientation="vertical"
tools:context="com.example.fragmentorientation.ConfigActivity" >
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PORT" />
<TextView
android:id="@+id/tv_density_dpi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv_density_dpi_prompt" />
<EditText
android:id="@+id/edit_density_dpi"
android:labelFor="@id/tv_density_dpi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:editable="false"
android:ems="10" >
</EditText>
<TextView
android:id="@+id/tv_width_pixels"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv_width_pixels_prompt" />
<EditText
android:id="@+id/edit_width_pixels"
android:labelFor="@id/tv_width_pixels"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:editable="false"
android:ems="10" >
</EditText>
<TextView
android:id="@+id/tv_height_pixels"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv_height_pixels_prompt" />
<EditText
android:id="@+id/edit_height_pixels"
android:labelFor="@id/tv_height_pixels"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:editable="false"
android:ems="10" >
</EditText>
<TextView
android:id="@+id/tv_orientation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<TextView
android:id="@+id/tv_screen_height_dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv_screen_height_dp_prompt" />
<EditText
android:id="@+id/edit_screen_height_dp"
android:labelFor="@id/tv_height_pixels"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:editable="false"
android:ems="10" >
</EditText>
<TextView
android:id="@+id/tv_screen_width_dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv_screen_width_dp_prompt" />
<EditText
android:id="@+id/edit_screen_width_dp"
android:labelFor="@id/tv_height_pixels"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:editable="false"
android:ems="10" >
</EditText>
</LinearLayout>
The following code segment shows the layout-land/config_activity.xml layout file. Again, this layout will
be rendered while the device is in landscape mode. It is a bit more complex:

The first child of the <LinearLayout> widget is a <ScrollView> widget. The
<ScrollView>. The <ScrollView> widget makes its child scrollable. A <ScrollView>
must have one child layout which is the layout that becomes scrollable. You should never use a
<ScrollView> with a <ListView> because the <ListView> is already scrollable.

Pairs of prompts and values are laid out horizontally by enclosing them in another child
<LinearLayout>.
<?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:scrollbars="vertical" >
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:editable="false"
android:text="LAND" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_density_dpi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv_density_dpi_prompt"
android:labelFor="@id/edit_density_dpi" />
<EditText
android:id="@+id/edit_density_dpi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:editable="false">
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_width_pixels"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv_width_pixels_prompt" />
<EditText
android:id="@+id/edit_width_pixels"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:editable="false"
android:labelFor="@id/tv_width_pixels" >
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_height_pixels"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv_height_pixels_prompt" />
<EditText
android:id="@+id/edit_height_pixels"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:editable="false"
android:labelFor="@id/tv_height_pixels" >
</EditText>
</LinearLayout>
<TextView
android:id="@+id/tv_orientation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_screen_height_dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv_screen_height_dp_prompt" />
<EditText
android:id="@+id/edit_screen_height_dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:editable="false"
android:labelFor="@id/tv_height_pixels" >
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_screen_width_dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tv_screen_width_dp_prompt" />
<EditText
android:id="@+id/edit_screen_width_dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:editable="false"
android:labelFor="@id/tv_height_pixels" >
</EditText>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
There are two activity layouts designed to render fragments. The layout named activity_frgment_list.xml
in the layout and layout-land folders. One will render a single fragment containing a <ListView> the
second twill render two fragments. The first contains the same <ListView>. The second is designed
to render detail information. The template for the two fragments have already been created. In this lab,
you will create the complete code for the two layouts. The fragments will appear in the following files:

The fragment layout named list_fragment.xml is the fragment that will render a bound
<ListView> The binding process is the same as you discovered in previous labs.

The fragment named detail_fragment.xml will render the detail information corresponding to
the selected item in the list fragment.
There are two layout files used to render the <ListView>. These layouts are exactly the same as the
<ListView> layouts discussed in previous labs.

The layout named lv_header_row.xml is used to render the header row in in the <ListView>.

The layout named lv_item_row.xml renders the detail rows in the <ListView>.
Finally, the following files contain the code containing the Weather class and WeatherAdapter, which is
derivedf

The file named src/Weather.java contains the same Weather class discussed in previous labs.

The file name src/WeatherAdapter.java contains the same WeatherAdapter class discussed in
previous labs with a couple of slight modifications.
Working with Device Orientation
Up to this point, your programs have been implemented such that they expect the device to be in
portrait orientation. However, well-behaved applications should behave well in both portrait and
landscape orientations. In this section of the lab, you will learn how to determine the current device
position, and information about the current screen size.
The android.content.res.Resources class is used to access an application’s resources. This
class has several public methods used to access specific resource categories. The getResources()
method of the Context class gets a reference to the application’s current resources. The Resources
class, in turn supports, methods get the display metrics and device configuration:

The getDisplayMetrics() class gets the current DisplayMetrics instance. It has
properties named widthPixles and heightPixels to get the absolute height and width
of the device. The densityDpi property gets the dots per inch. There are several other
properties and methods used to get additional device information.

The getConfiguration() method gets the current configuration information. This
configuration information includes the device orientation and screen resolution information. It
describes information about the keyboard and touch screen too. The data returned by
getConfiguration() is of type android.content.res.Configuration.
The Configuration class, in turn, supports the following properties.

The screenHeightDp gets the current screen height (in device independent units). This is the
height of the screen based on the current orientation. The screenWidthDp gets the current
screen width (in device independent units). This is the width of the screen based on the current
orientation. The orientation property gets the device orientation. The value can be one of the
following constants. ORIENTATION_LANDSCAPE, ORIENTATION_PORTRAIT, and
ORIENTATION_UNDEFINED.
The following code segment shows how to get the display metrics
DisplayMetrics metrics = getResources().getDisplayMetrics();
int widthPixels = metrics.widthPixels;
int heightPixels = metrics.heightPixels;
int densityDpi = metrics.densityDpi;
The statement fragment getResources().getDisplayMetrics() gets the display metrics
applicable to the current context’s resources. The remaining statements read the respective properties
and store the values in corresponding variables.
The following code segment shows how to get the configuration information:
Configuration config = getResources().getConfiguration();
switch (config.orientation)
{
case Configuration.ORIENTATION_LANDSCAPE:
{
tv_orientation.setText("ORIENTATION_LANDSCAPE");
break;
}
case Configuration.ORIENTATION_PORTRAIT:
{
tv_orientation.setText("ORIENTATION_PORTRAIT");
break;
}
case Configuration.ORIENTATION_UNDEFINED:
{
tv_orientation.setText("ORIENTATION_UNDEFINED");
break;
}
}
int screenHeightDp = config.screenHeightDp;
int screenWidthDp = config.screenWidthDp;
The statement fragment getResources().getConfiguration() gets the current configuration
instance applicable to the current resources. The switch statement displays a message based on the
current orientation (config.orientation). The final statements get the screen height and width
and store the result in int variables.
HANDS-ON STEPS: Determining the device orientation and screen resolution.
In the following steps, you will add the code the ConfigActivity.java file to get information from the
Resources and Configuration classes and display the results in the form’s widgets. Again, much
of the code for this activity has already been created for you.
The widgets have been created for both the portrait and landscape layouts. The src/configActivity.java
file has been created from a template. You will create two procedures to display information from the
DisplayMetrics and Configuration classes.
1. Activate the Code Editor for the src/ConfigActivity.java file. At the end of the ConfigActivity
class, create the following procedure named ShowDisplayMetrics().
protected void ShowDisplayMetrics()
{
EditText edit_density_dpi = (EditText) findViewById(R.id.edit_density_dpi);
EditText edit_width_pixels = (EditText) findViewById(R.id.edit_width_pixels);
EditText edit_height_pixels = (EditText) findViewById(R.id.edit_height_pixels);
DisplayMetrics metrics = getResources().getDisplayMetrics();
int widthPixels = metrics.widthPixels;
edit_width_pixels.setText(Integer.toString(widthPixels));
int heightPixels = metrics.heightPixels;
edit_height_pixels.setText(Integer.toString(heightPixels));
int densityDpi = metrics.densityDpi;
edit_density_dpi.setText(Integer.toString(densityDpi));
}
2. Create another procedure named ShowConfiguration() and enter the following code:
protected void ShowConfiguration()
{
TextView tv_orientation = (TextView)
findViewById(R.id.tv_orientation);
EditText edit_screen_height_dp = (EditText)
findViewById(R.id.edit_screen_height_dp);
EditText edit_screen_width_dp = (EditText)
findViewById(R.id.edit_screen_width_dp);
Configuration config = getResources().getConfiguration();
switch (config.orientation)
{
case Configuration.ORIENTATION_LANDSCAPE:
{
tv_orientation.setText("ORIENTATION_LANDSCAPE");
break;
}
case Configuration.ORIENTATION_PORTRAIT:
{
tv_orientation.setText("ORIENTATION_PORTRAIT");
break;
}
case Configuration.ORIENTATION_UNDEFINED:
{
tv_orientation.setText("ORIENTATION_UNDEFINED");
break;
}
}
int screenHeightDp = config.screenHeightDp;
int screenWidthDp = config.screenWidthDp;
edit_screen_height_dp.setText(Integer.toString(screenHeightDp));
edit_screen_width_dp.setText(Integer.toString(screenWidthDp));
}
3. Write the following statements in the onCreate() method to call these procedures.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_config);
ShowDisplayMetrics();
ShowConfiguration();
}
4. Test the application. Click the Config button display the configuration activity. The configuration
information should be read and displayed in the activity’s widgets. Rotate the device to appear
in portrait mode. Using the emulator, rotate the device by clicking LEFT-CTRL F11.
Note that the portrait activity is rendered and the widgets appear horizontally.
Creating Multiple Layouts
The imported project contains two layouts for the main activity (activity_main.xml) and two layouts for
the configuration activity (activity_config.xml). While very simple it does illustrate how activities are
rendered and destroyed automatically by the Android system.
HANDS-ON STEPS: Understanding multiple layouts and
In the following sequence of steps, you will setup the application’s activities and develop the code to
determine the application’s orientation.
For this application, you will use several layouts, some of which have been created for you. Some of
these layouts will render an activity in portrait mode depending on the orientation of the device. Others
will be used to layout activity fragments.
The following list describes the activities and layouts
Working with Fragments
When working with fragments, an activity contains widgets that act as templates. Each template, in
turn, renders a fragment. In this example, you will use the <FrameLayout> widget as the template.
Note the following about the <FrameLayout> class:

The purpose of the <FrameLayout> class is to block out an area of the screen to display a
single item. In this example, you will use the <FrameLayout> to display a fragment made up
of a single <LinearLayout>.

The FrameLayout is derived from the ViewGroup class. The FrameLayout has constants
that define how to the widget appears in its container.
While there are many reasons to create fragments, you will use them here to display master data in
portrait mode, and both master and detail data in landscape mode. This implementation requires:

An activity named res\layout\activity_fragment_list.xml that will render only the List fragment.
A <FrameLayout> widget will be used as the placeholder that will render the list fragment
(list_fragment.xml).

An activity named res\layout-land\ activity_fragment_list.xml that will render both the List and
Detail fragment (list_fragment.xml and detail_fragment.xml).
Each fragment has a layout and may have both portrait and landscape layouts. These layouts are no
different than the layouts with which you have been working. In this example, you will complete two
layouts for the two fragments. The fragments themselves do not have landscape layouts as they will
appear the same shape and size regardless of the device’s orientation.

The first fragment layout named list_fragment.xml contains one <TextView> used to display
a title and a <ListView> to display a list. The list implementation is the same as the list
implementation used in previous labs.

The second fragment named detail_fragment.xml contains the widgets that will render detail
data for the selected weather day.
In the following sequence of steps, you will create the layout code for the two fragments, While the
fragments have been created, the following steps will create an XML layout file. In the Package Explorer,
open the res/layout folder. Right-click the folder name. Select New Android XML file to create the layout
file.
1. Open the res/layout/ActivityFragmentList.xml. Enter the following code to configure the
activity.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@+id/displayList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/red" >
</FrameLayout>
</LinearLayout>
2. Open the res/layout-land folder. Modify the following code in the ActivityFragmentList.xml.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:baselineAligned="false"
android:orientation="horizontal" >
<FrameLayout
android:id="@+id/displayList"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2">
</FrameLayout>
<FrameLayout
android:id="@+id/displayDetail"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:background="@color/red" >
</FrameLayout>
</LinearLayout>

The portrait activity has one <FrameLayout> that will be the container for a fragment.

The landscape activity has two fragments. The first displays the same <FrameLayout> as the
first activity. However, it also renders the detail fragment to the right of the first fragment (the
<LinearLayout> orientation is horizontal.
Even though the fragment code has not been completed yet, you can test to the program to see that the
Activity renders one or two frames based on device orientation.
Test the application and click the fragment button to view the fragment activity. Rotate the device. As
you can see, the two fragments appear as shown in the following figure:
Creating Fragment Layouts
In this section of the lab, you will create the layouts for the fragments themselves. This requires that you
create two layouts. One for the ListView and the other for the Details view. Associating an activity
template with a fragment is done programmatically. You will see how to do that in a moment.
1. Activate the editor for the file res\layout\list_fragment.xml. Again, the <LinearLayout> has
already been created for you. Enter the following statements (shown in bold):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="@string/list_heading"
android:textSize="20sp" />
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
2. Activate the editor for the file res\layout\detail_fragment.xml.
If you were to run the application at this point, you would not see the fragments rendered. Fragments
will not render automatically. Rather, you must write the code to associate a fragment with its
container.
Connecting the List Activity to the Fragment
Before a fragment will be rendered in a <FrameLayout>, you must write the code to wire the two
together. This task is typically performed in the onCreate() listener for the activity that will display
the fragment. There are two steps to this process:

First, the fragment for the List activity must be displayed.

Second, the fragment for the Detail activity must be displayed, but only if the Detail view is
visible.
The following code segment shows how to display the List fragment (FragmentList.java):
if (savedInstanceState == null) {
android.app.FragmentTransaction ft =
getFragmentManager().beginTransaction();
FragmentList fragmentList = new FragmentList();
ft.add(R.id.displayList, fragmentList, "List_Fragment");
ft.commit();
}
Setting up a fragment always involves performing the same similar steps:

The if statement tests whether the fragment has been saved or not. The fragment will only be
created if it has not been created before.

First, get a reference to the FragmentTransaction class via the FragmentManager. The
FragmentTransaction class provide the API to perform fragment operations. The
statement fragment
getFragmentManager().beginTransaction()
gets a reference to the FragmentTransaction.

Next, you create an instance of the class that represents the fragment. In this example, the class
is named FragmentList. The statement
ft.add(R.id.displayList, fragmentList, "List_Fragment");
adds a fragment to the activity state (back stack). The first argument to the add() method is a
reference to the layout container, the second is the instance of the class to add. This class is
derived from the Fragment class. The final argument contains a string ID.

Calling commit() causes the fragment transaction to be committed thereby adding this
fragment to the activity.
The next block of statements adds the Detail fragment:
if (findViewById(R.id.displayDetail) != null) {
detailPage = true;
getFragmentManager().popBackStack();
FragmentDetail detailFragment = (FragmentDetail) (getFragmentManager()
.findFragmentById(R.id.displayDetail));
if (detailFragment == null) {
FragmentTransaction ft = getFragmentManager().beginTransaction();
detailFragment = new FragmentDetail();
ft.replace(R.id.displayDetail, detailFragment,
"Detail_Fragment1");
ft.commit();
}
}
The if statement tests whether the R.id.displayDetail resource exists or not. This statement is
playing a little trick. The res/layout-land/activity_fragment_list.xml layout contains a
<FrameLayout> named displayDetail. The displayList layout does not. Thus, if the landscape view is
being rendered, the R.id.displayDetail exists and the fragment should be loaded. The
remaining code is similar to the code that you just wrote.

A flag named detailPage is set to true.

The resource is removed from the back stack by calling
getFragmentManager().popBackStack();

The next statement tries to get a reference to the fragment named detailFragment.

If the fragment does not already exist, it is created.

The following statement begins the transaction.
FragmentTransaction ft = getFragmentManager().beginTransaction();

The next statement creates the fragment.
detailFragment = new FragmentDetail();

The next statement replaces the old detail fragment with this one.
ft.replace(R.id.displayDetail, detailFragment, "Detail_Fragment1");

Finally, the commit() method is called to add the fragment.
The above code will associate the fragment with the activity
Building the List Activity
Now that you have created the code to display the fragment, you will now write the code for the
fragment. Note the following about the code in this example:

The code for this fragment is similar to the code that you wrote to display the weather in a
<ListView>

The procedure named StartBackgroundProcess.
NOTE THAT THE LAB IS NOT COMPLETE FROM THIS POINT.
Connecting the Detail Activity
Building the Detail Activity
In this part of the lab, you will work with the activity named ActivityFragmentList.java that will manage
two fragments. The first named FragmentActivityList.java FragmentActivityDetail.java