Scribd
Upload
45 views

Android Dev Lecture10

This document provides an overview of using basic views, picker views, and list views to design user interfaces for Android applications. It discusses text views, edit texts, buttons, images, checkboxes, radio buttons, progress bars, time pickers, date pickers, auto-complete text views, and list views. It provides step-by-step instructions for creating sample Android projects that demonstrate how to add and use these different view types through layout XML files and Java code. Learners are assigned exercises to further practice implementing the covered views in their own application code.

Uploaded by

عبدالرحمن الحربي
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
45 views

Android Dev Lecture10

This document provides an overview of using basic views, picker views, and list views to design user interfaces for Android applications. It discusses text views, edit texts, buttons, images, checkboxes, radio buttons, progress bars, time pickers, date pickers, auto-complete text views, and list views. It provides step-by-step instructions for creating sample Android projects that demonstrate how to add and use these different view types through layout XML files and Java code. Learners are assigned exercises to further practice implementing the covered views in their own application code.

Uploaded by

عبدالرحمن الحربي
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 34

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?

You might also like