1. HIT3328 / HIT8328 Software Development for
Mobile Devices
Dr. Rajesh Vasa, 2011
1
Twitter: @rvasa
Blog: http://rvasa.blogspot.com
Lecture 06
Menus and Lists

2. R. Vasa, 20112
Lecture Overview
•Working with Menus
•Using Frame Layout
•Adapters and Working with Simple Lists

3. R. Vasa, 20113
Menus
•Android offers a ‘Menu’ button, iOS does not
•Menus’ can be customised per activity
Menus have a label and an icon
Icon is strongly recommended by
the Android UI guidelines
Menu
Icons at different resolutions
should be provided (ideally)

4. R. Vasa, 20114
Creating a Menu
Name App (from Lecture
5)
Menus are defined as a
resource
We can use icons provided by
Android SDK (recommended)
We can use icons provided by
Android SDK (recommended)

5. R. Vasa, 20115
Menus are Resources
Convention is to place it
in ‘menu’ folder

6. R. Vasa, 20116
Wiring up a Menu to Show
Call back method that we have to write
Resource Identifier
XML Resource file is converted (inflated)
into a Menu object that will be rendered
(shown) on screen
XML Resource file is converted (inflated)
into a Menu object that will be rendered
(shown) on screen

7. R. Vasa, 20117
Handling Menu Click
Call back method that we have to write

8. R. Vasa, 20118
Toasting a Message
•There is often a need to show a message
for a short period and then fade on mobile
devices
•Android offers this via the Toast utility

9. R. Vasa, 20119
Toasting a Message
On Click
Message
displayed for a
second

10. R. Vasa, 20111
Creating a Toast
Duration can be customised
Android offers Toast.LENGTH_LONG,
Toast.LENGTH_SHORT as built in defaults
Duration can be customised
Android offers Toast.LENGTH_LONG,
Toast.LENGTH_SHORT as built in defaults

11. R. Vasa, 20111
Lecture Roadmap - Where are
we?
•Working with Menus
•Using Frame Layout
•Adapters and Working with Simple Lists

12. R. Vasa, 20111
Frame Layout Offers Overlays
•We often need a way to overlay multiple
views (or layouts) on top of each other
•Often with variation in transparency
•Frame Layout offers us this feature
•Frame Layout is also used to help create
Tab Panes in Android

13. R. Vasa, 20111
Simple Frame Layout (Light
Bulb)
Button is placed on top of Image View
n / Off Images are also placed on top of each othe

14. R. Vasa, 20111
Frame Layout - Code
2 Image Views and 1 Button in the same layout

15. R. Vasa, 20111
Frame Layout - Code
We control visibility explicitlyWe control visibility explicitly

16. R. Vasa, 20111
Light Bulb Logic
We flip the visibility of the images
Method is triggered onClickMethod is triggered onClick

17. R. Vasa, 20111
Lecture Roadmap - Where are
we?
•Working with Menus
•Using Frame Layout
•Adapters and Working with Simple
Lists

18. R. Vasa, 20111
A Simple List App.
Displays Latitude and Longitude of a location

19. R. Vasa, 20111
Constituents of a List based
screen
ListView
Text Views

20. R. Vasa, 20112
Lists get data via an Adapter
ListView
Data Source
Adapter

21. R. Vasa, 20112
Adapter Formats Data for
Display
ListView
Data Source
Adapter
Data is formatted for
display via customised
layout attached to the
Adapter
Data is formatted for
display via customised
layout attached to the
Adapter

22. R. Vasa, 20112
List Views are very flexible
We specify the
layout for each line
item of a list
Layout can be provided
as a resource file (XML)

23. R. Vasa, 20112
Adapter Feeds data to List
View
ListView
Data Source
Adapter
Data Source feeds data
to the Adapter for
formatting
Data Source feeds data
to the Adapter for
formatting

24. R. Vasa, 20112
Adapter Offers Separation of
Concerns
ListView
Data Source
Adapter
Data Source can be an
array, collection object,
external database, or an
external server
Data Source can be an
array, collection object,
external database, or an
external server

25. R. Vasa, 20112
Simple List App.
ListView
Data Source
Adapter
Domain Model:
HashMap (Cities, Location)
(Cities names)
(Simple Item
Layout)

26. R. Vasa, 20112
Domain Model
Ideally, you read an external resource
(Above data is hard-coded to illustrate concept)

27. R. Vasa, 20112
Wiring up Data - Adapter -
ListView
Activity extends ListActivity
We are using an Array Adapter
(others are available / you can
provide your own)

28. R. Vasa, 20112
Wiring up Data - Adapter -
ListView
We are using SDK provided layout style
(we can also write our own as an Layout XML)

29. R. Vasa, 20112
Wiring up Data - Adapter -
ListView
We are setting the data source to use

30. R. Vasa, 20113
Wiring up Data - Adapter -
ListView
Tell the List View to display from adapter

31. R. Vasa, 20113
Wiring up Data - Adapter -
ListView
Only one ListView can receive
data via the default
setListAdapter in an Activity

32. R. Vasa, 20113
Activity Layout
ListView that will receive data
provided via setListAdapter

33. R. Vasa, 20113
Activity Layout
ListView that will receive data
provided via setListAdapter
Special
built-in
identifier
Special
built-in
identifier

34. R. Vasa, 20113
Handling List Click Event
This call back is provided by the
parent (List Activity) class -- we
override it
This call back is provided by the
parent (List Activity) class -- we
override it

35. R. Vasa, 20113
But, what about complex lists?
Key concepts are the
same
We will cover it later in
depth
(if you are curious, look at examples
online)

36. R. Vasa, 20113
Lecture Summary
•Working with Menus
•Using Frame Layout
•Adapters and Working with Simple Lists