Mobile Application

Development
Part 1: Android Application Development

Lecture 10

Outline
Chapter 4: Designing Your User Interface
with Views
Using Basic Views
Using Picker Views
Using List Views to Display Long Lists
Understanding Specialized Fragments

Designing Your User Interface

with Views
Part 1

Objectives
How to use the basic views in Android to
design your user interface
How to use the picker views to display lists
of items
How to use the list views to display lists of
items
How to use specialized fragments

Learning Outcomes
Basic views: Commonly used views such as the
TextView, EditText, and Button views
Picker views: Views that enable users to select
from a list, such as the TimePicker and
DatePicker views
List views: Views that display a long list of items,
such as the ListView and the SpinnerView views
Specialized fragments: Special fragments that
perform specific functions

Using Basic Views

TextView
EditText
Button
ImageButton
CheckBox
ToggleButton
RadioButton
RadioGroup

Using the Basic Views

Step 1
Using Eclipse, create an Android project and
name it BasicViews1.

Using the Basic Views

Step 2
Modify the main.xml file by adding the
following elements shown in bold.

Using the Basic Views

Step 2

Using the Basic Views

Step 2

Using the Basic Views

Step 3
To see the views in action,
debug the project in Eclipse
by selecting the project
name and pressing F11.

Using the Basic Views

Step 4
Click the various views and
note how they vary in their look
and feel. The figure shows:
The first CheckBox view
(Autosave) is checked.
The second CheckBox view (star)
is selected.
The second RadioButton (Option
2) is selected.
The ToggleButton is turned on.

Assignment

Textbook pp. 161-163 (4 Steps).

Individual report contains output snapshots.
Due time: After one week.

Using the ProgressBar View

Step 1
Using Eclipse, create an Android project and
name it BasicViews2.

Using the Basic Views

Step 2
Modify the main.xml file by adding the
following elements shown in bold.

Using the Basic Views

Step 3
In the BasicViews2Activity.java file, add the
following statements in bold.

Using the Basic Views

Step 3

Using the ProgressBar View

Step 4
Press F11 to debug the project on the Android
emulator. The figure shows the ProgressBar
animating. After about five seconds, it will
disappear.

Assignment

Make two views of ProgressBar: Circular and

Linear Bar.
Textbook pp. 172-173 (4 Steps) and pp. 174176 (4 Steps).
Individual report contains output snapshots.
Due time: After one week.

Using the AutoCompleteTextView

Step 1
Using Eclipse, create an Android project and
name it BasicViews3.

Using the AutoCompleteTextView

Step 2
Modify the main.xml file by adding the
following elements shown in bold.

Using the AutoCompleteTextView

Step 3
In the
BasicViews3Activity.java

file, add the following

statements in bold.

Using the AutoCompleteTextView

Step 4
Press F11 to debug the
application on the Android
emulator. As shown in the
figure, a list of matching
names appears as you type into
the AutoCompleteTextView.

Assignment

Textbook pp. 177-178 (4 Steps).

Individual report contains output snapshots.
Due time: After one week.

Using Picker Views

TimePicker View
DatePicker View

Using the TimePicker View

Step 1
Using Eclipse, create an Android project and
name it BasicViews4.

Using the TimePicker View

Step 2
Modify the main.xml file by adding the
following elements shown in bold.

Using the TimePicker View

Step 3
Select the project name in Eclipse
and press F11 to debug the
application on the Android emulator.
The figure shows the TimePickerin
action.
Besides clicking the plus (+) and
minus (-) buttons, you can use the
numeric keypad on the device to
change the hour and minute, and
click the AM button to toggle
between AM and PM.

Using the TimePicker View

Step 4
Back in Eclipse,
add the
following
statements in
bold to the
BasicViews4Acti
vity.java file:

Using the TimePicker View

Step 5
Press F11 to debug the
application on the Android
emulator.
This time, the TimePickerwill
be displayed in the 24-hour
format.
Clicking the Button will display
the time that you have set in
the TimePicker.

Assignment

Textbook pp. 179-181 (5 Steps).

Individual report contains output snapshots.
Due time: After one week.

Using the DatePicker View

Step 1
Using the BasicViews4 project created earlier,
modify the main.xml file as shown here

Using the DatePicker View

Step 2
Press F11 to debug the
application on the
Android emulator.
The figure shows the
DatePicker view
you have to change the
emulators orientation to
landscape by pressing CtrlF11; portrait mode is too
narrow to display the
DatePicker.

Questions?