!

"# % &'"()*+,-
!"#$%&'$()
Familiarize yourself with the Fragment class. Create a simple application that uses Fragments to
produce a two-pane or single-pane user interface depending on the current devices screen size.
After completing this Lab you should better understand the Fragment class and its lifecycle, and how
Fragments interact with the Activities that host them.
*+$,%-($ /) 0,123$45(
In this exercise you will create an application that uses Fragments to display simulated
1
Twitter Tweets.
This application will present multiple Fragments arranged in different layouts depending on the
devices screen size. One of these Fragments, called the FriendsFragment, will display the names of
several celebrities. If the user selects a name from this Fragment, he or she will see several simulated
Twitter Tweets from these people, appearing in a second Fragment, called the FeedFragment. For this
Lab, the number and identity of the celebrities will be fixed (once you learn more about User Interface
classes, Networking, and Services, you may want to extend this application into a more general Twitter
feed reader).
The graphics below depict the applications user interface when running on a typical small screen
device (e.g., a smartphone). This layout will be called the single-pane layout:
1
1
The Twitter API requires a network connection and authentication in order for your application to
retrieve Twitter data. Because we have not yet discussed networking, this application will only simulate
a live Twitter feed.
Figure 1: When user clicks on a celebrity's name, they see Twitter tweets
from that celebrity.
To implement this user interface, you will implement two Fragments; one called FriendsFragment and
the other called FeedFragment. The FriendsFragment, displayed on the left of the figure above, is a
subclass of ListFragment. If the user selects a celebrity name from this ListFragment, then the Tweets
from that person will be displayed in the FeedFragment. The FeedFragment displays a single TextView,
wrapped in a ScrollView, containing all the tweets for a single celebrity.
When running on a larger-screen tablet, however, the application will present a different user interface,
as shown below. This layout is called the two-pane layout.
In this case, the application displays both Fragments at the same time. You will implement the code that
manages the application layouts. Note: You are not going to create two different applications. You are
going to create a single application that works whether the particular device its running on is small or
large. Look at the documentation for more information about multi-pane user interfaces here:
6378$3$451&94 :95$()
This exercise is quite similar to the applications discussed in the lecture (as always, download and
examine the source code for the example applications from the class source code repository). We have
provided you with an application skeleton, including all necessary layout and resource files. Dont
change any resource IDs in these files as that might break the Labs test cases.
You will need to modify two areas within the Labs source code. Both of these areas are marked with a
comment containing the word TODO. Both are in the MainActivity.java file. To do this, you will
need to examine and understand the resource IDs contained in the main_activity.xml files that are in
res/layout and res/layout-large directories.
1. In MainActivity.java, find TODO 1. Add the source code needed to add the FriendsFragment to
the two-pane layout.
2
Figure 2: A two-pane user interface used when the device is a
Tablet.
2. In MainActivity.java, find TODO 2." Add the source code to replace the FeedFragment displayed
in the single-pane layout.
;$(&42 14< =>"3-((-94)
The test cases for this Lab are in the FragmentsLabTestPhone and FragmentsLabTestTablet projects.
The FragmentsLabTestPhone test case should be run on a phone. The FragmentsLabTestTablet should
be run on a Tablet (we used the Nexus 7). You can run the test cases by right clicking a particular Test
project folder and then selecting Run As>Android Junit Test, or one at a time, by right clicking on an
individual test case class and then continuing as before. The test classes are Robotium test cases. You
will eventually have to run each test case, one at a time, capture log output, and submit the output to
Coursera. These test cases are designed so that if you pass the test case, your submission should pass as
well. The FragmentsLabTestPhone test case should output exactly 9 Log messages. The
FragmentsLabTestTablet test case should output exactly 7 Log messages. As you implement various
steps of the Lab, run the test cases every so often to see if you are making progress toward completion
of the Lab.
Warnings:
1. These test cases have been run on the emulator using a Galaxy Nexus AVD with API level 18 with
768MB of RAM (for the phone test) and a Nexus 7 at API level 18 with 768MB of RAM (for the
tablet test). To limit configuration problems, you should test your app against similar AVDs.
Once youve passed all the test cases, follow the instructions on the Assignment page to submit log
information to the Coursera system for grading.
Tips: Saving a LogCat filter.
1. In the LogCat View, press the green "+" sign to "add a new LogCat filter."
2. A dialog box will pop up. Type in the information shown in the screenshot below.
3. A saved filter called, "FragmentsLab" will appear in the LogCat View.
3
Tips: Running your test cases and capturing your LogCat output for submission.
1. For each test case, clear the LogCat console by clicking on the "Clear Log" Button (the Button with
the red x in the upper right of the LogCat View).
2. Then right click on an individual test case file in the Project Explorer. Run As -> Android JUnit
Test.
3. When the test case finishes, if it's not already selected, click on the "FragmentsLab" filter in the left
hand pane of the LogCat View.
4. Select everything within the LogCat View (Ctrl-A or Cmd-A) and press the "Export Selected Items
To Text File" button (floppy disk icon) at the top right of the LogCat View.
5. Submit this file to the Coursera system.
Extras:
This assignment may be too easy for those with strong programming backgrounds. If you fall into that
category, here are some suggestions for more challenging enhancements you can make to the
application.
1. Add the necessary code so that the application maintains its state (which Friend and/or Feed is
selected) after a reconfiguration.
2. Instrument the application to monitor the lifecycle callbacks for both the Activity and the Fragment
classes.
3. Take a deeper look at the issue of supporting multiple screens. We handled this by defining two
different main_activity.xml files, one for large devices and one for smaller devices. Read through
the documentation on Supporting Multiple Screens. After reading this over, go back an look at our
application. Could you come up with a way to have layouts that are different for small devices in
landscape mode, small devices in portrait mode, and a large device (two-pane layout)?
4