hit3328 - chapter0601 - menus and lists

HIT3328 / HIT8328 Software Development for Mobile DevicesDr. Rajesh Vasa, 2011

1

Twitter: @rvasa Blog: http://rvasa.blogspot.com

Lecture 06Menus and Lists

R. Vasa, 20112

Lecture Overview

•Working with Menus

•Using Frame Layout

•Adapters and Working with Simple Lists

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)

R. Vasa, 20114

Creating a MenuName 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)

R. Vasa, 20115

Menus are Resources

Convention is to place it in ‘menu’ folder

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

R. Vasa, 20117

Handling Menu Click

Call back method that we have to write

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

R. Vasa, 20119

Toasting a Message

On Click

Message displayed for a

second

R. Vasa, 201110

Creating a Toast

Duration can be customisedAndroid offers Toast.LENGTH_LONG,

Toast.LENGTH_SHORT as built in defaults

Duration can be customisedAndroid offers Toast.LENGTH_LONG,

Toast.LENGTH_SHORT as built in defaults

R. Vasa, 201111

Lecture Roadmap - Where are we?•Working with Menus

•Using Frame Layout

•Adapters and Working with Simple Lists

R. Vasa, 201112

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

R. Vasa, 201113

Simple Frame Layout (Light Bulb)

Button is placed on top of Image View On / Off Images are also placed on top of each other

R. Vasa, 201114

Frame Layout - Code

2 Image Views and 1 Button in the same layout

R. Vasa, 201115

Frame Layout - Code

We control visibility explicitlyWe control visibility explicitly

R. Vasa, 201116

Light Bulb Logic

We flip the visibility of the images

Method is triggered onClickMethod is triggered onClick

R. Vasa, 201117

Lecture Roadmap - Where are we?•Working with Menus

•Using Frame Layout

•Adapters and Working with Simple Lists

R. Vasa, 201118

A Simple List App.

Displays Latitude and Longitude of a location

R. Vasa, 201119

Constituents of a List based screen

ListView

Text Views

R. Vasa, 201120

Lists get data via an Adapter

ListView

Data Source

Adapter

R. Vasa, 201121

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

R. Vasa, 201122

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)

R. Vasa, 201123

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

R. Vasa, 201124

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

R. Vasa, 201125

Simple List App.

ListView

Data Source

Adapter

Domain Model: HashMap (Cities, Location)

(Cities names)

(Simple Item Layout)

R. Vasa, 201126

Domain Model

Ideally, you read an external resource(Above data is hard-coded to illustrate concept)

R. Vasa, 201127

Wiring up Data - Adapter - ListView

Activity extends ListActivity

We are using an Array Adapter (others are available / you can

provide your own)

R. Vasa, 201128

Wiring up Data - Adapter - ListView

We are using SDK provided layout style(we can also write our own as an Layout XML)

R. Vasa, 201129

Wiring up Data - Adapter - ListView

We are setting the data source to use

R. Vasa, 201130

Wiring up Data - Adapter - ListView

Tell the List View to display from adapter

R. Vasa, 201131

Wiring up Data - Adapter - ListView

Only one ListView can receive data via the default

setListAdapter in an Activity

R. Vasa, 201132

Activity Layout

ListView that will receive data provided via setListAdapter

R. Vasa, 201133

Activity Layout

ListView that will receive data provided via setListAdapter

Special built-in

identifier

Special built-in

identifier

R. Vasa, 201134

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

R. Vasa, 201135

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)

R. Vasa, 201136

Lecture Summary

•Working with Menus

•Using Frame Layout

•Adapters and Working with Simple Lists