Lab  

–  User  Interface  Classes  

Create  a  complex  user  interface  with  Android’s  user  interface  classes  

O b j e c t i v e s :  
Familiarize yourself with Android’s User Interface (UI) classes. Create a simple application that uses a
variety of UI elements including: Buttons, TextViews and Checkboxes. You will also reinforce the
knowledge you've gained in previous lessons by implementing a larger portion of the application from
scratch.

O v e r v i e w :  
In  this  Lab,  you  will  create  a  ToDo  Manager  application.  The  application  creates  and  manages  a  list  of  
ToDo Items (i.e., things that you need “to do.”) You will design this application’s user interface, includ-
ing its layout and resource files. You will also implement a bit more of the application’s features than
you did in previous Labs. Do NOT modify any resource IDs contained in the skeleton layout files as this
may break our test cases.

E x e r c i s e    A
A :    TT h e    B
B a s i c    TT o D o    M
M a n a g e r  
The main Activity for this application is called Lab4_UILabs. When the Activity runs, but there are no
previously saved ToDo Items, its initial UI will look something like this:    

Figure 1: Initial View

 
This user interface contains a single ListView that displays all existing ToDo Items. As shown above,
the last row of the ListView always displays a special View, with the words, “Add New ToDo Item.”  

1  
 
This last position within the ListView is known as the “footer.” You can add a View to the footer by us-
ing the ListView’s addFooterView() method.
When the user clicks on the ListView footer, the application will start a new Activity called AddToDo-
Activity that allows the user to create and save a new ToDo Item.

 
  Figure 2: Adding a New ToDo Item
ToDo items have at least the following fields. Default values appear in bold:
• Title: A user-provided String. The default Title is the empty String ("").
• Status: one of {Done, Not Done}
• Priority: one of {Low, Med, High}
• Time & Date: A deadline for completing this ToDo Item. The default deadline is 7 days from
the current date and time.
This Activity's user interface includes the following buttons:
• Cancel – finish the Activity without creating a new ToDo Item.
• Reset – reset the fields of the ToDo Item to their default values and update the display to reflect
this.
• Submit – create a new ToDo Item containing the user-entered / default data fields and return it to
ToDoManagerActivity. When the application returns to ToDoManagerActivity, the new ToDo
Item should appear in the ListView.

2  
 
For example, if the user creates and submits a new ToDo Item to an empty ToDo list, then once the
application returns to the ToDoManagerActivity, its ListView will contain the new ToDo Item, as
shown below.

Figure 3 (left): The user creates a new ToDo Item. Figure 3

(right) After submitting the new ToDo Item, the application
returns to the main Activity, displaying the new ToDo Item.

Back in the Main Activity, the user will be able to toggle the Done checkbox to indicate that the ToDo
Item's status has changed, say from Not Done to Done.

See the UILabs.mp4 screencast to see the app in action.

I m p l e m e n t a t i o n    N
N o t e s :  
1. Download the application skeleton files, for the Lab4_UILab project, from the assignment page
and import them into your IDE.
2. Implement the project according to the specifications described above. To implement the Lab,
look for comments in the skeleton files containing the String "//TODO." As with previous Labs,
these comments contain hints as to what you need to do to complete the project. However, be

3  
 
 aware that from here on out these comments will become increasingly less comprehensive, re-
quiring you to make more decisions about how to implement the whole project.
3. Don't forget that View's can be recycled in the ListAdapter's getView() method. When recycling
a View, you should clear out ALL the View's old state.

T e s t i n g  
The test cases for this Lab are in the Lab4_UILabTest project. You can run the test cases either all at
once, by right clicking the 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 Ro-
botium test cases.
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 tested on a Galaxy Nexus AVD emulator with API level 18. To limit
configuration problems, you should test you app against a similar AVD. Also, when testing,
make sure that your device is in Portrait mode when the test cases start running.
2. On startup, these test cases delete all existing ToDoItems.
 

S u b m i s s i o n  
To submit your work you will need to submit your modified files. The automatic grading system will
test your submission and give you feedback. This process may take some time, especially if many
students are submitting at the same time. To make sure your submission is correctly graded, pay at-
tention to the following aspects:

1. Your project files must be submitted in a zip file named [Link].

2. The zip file should have the following directory structure:
UILabSubmit/
- UILab/
- [Link]
- [Link]
- [Link]
3. Each new submission will overwrite any previous submissions.
 
 
If you got through Exercise A and submitted and passed the tests, and feel that you'd like to do more,
here are some suggested additions. This is optional and ungraded, but if you do something cool, please
consider posting some screenshots on the forums.

O p t i o n a l    EE x e r c i s e    B
B :    A
A    P
P r e t t i e r    TT o D o    M
M a n a g e r    A
A p p l i c a t i o n  
Right now the ToDo manager is quite ugly. Try modifying the layout files to create more attractive and
useable layouts. For example, play with the font size of the text, the amount of padding around the el-
ements, background colors and more.

4  
 
O p t i o n a l    EE x e r c i s e    C
C :    A
A n    ii m p r o v e d    TT o D o    M
M a n a g e r    A
A p p l i c a t i o n  
Modify your application so that ToDoItems whose status is Not Done are displayed in the Main
Activity with a different colored background than those whose status are Done. If you do this, then
when the user toggles the Done checkbox, the background color should also change as appropriate.
You might also consider changing the background color or adding a warning icon as the ToDo Item’s
deadline get close. Finally, right now, the user can't modify the ToDoItem's priority from the ToDoItem
ListView.  Modify this user interface so that it provides a drop down list, allowing users to select a
different Priority.

O p t i o n a l    EE x e r c i s e    D
D :    A
A    TT o D o    M
M a n a g e r    A
A p p l i c a t i o n    YY o u    M
M i g h t    A
A c t u a l l y    U
U s e  
Modify your application so that if the user long presses a ToDo Item in the Main Activity’s ListView, a
dialog pops up, allowing the user to delete the selected ToDo Item. If you're really feeling adventurous
place the app inside a Tab. Have one Tab display ToDoItems sorted by deadline, and another Tab for
ToDoItems first sorted by priority, and within a particular priority, further sorted by deadline.

5