Lecture 06 Menus and Lists

HIT3328 / HIT8328 Software Development for Mobile Devices

Dr. Rajesh Vasa, 2011 Twitter: @rvasa Blog: http://rvasa.blogspot.com
1

Lecture Overview

Using Frame Layout Adapters and Working with Simple Lists

Working with Menus

R. Vasa, 2011

Menus

Menus can be customised per activity

Android offers a Menu button, iOS does not

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, 2011

Creating a Menu
Name App (from Lecture 5)

Menus are dened as a resource

We can use icons provided by Android SDK (recommended)

4

R. Vasa, 2011

Menus are Resources

Convention is to place it in menu folder

5

R. Vasa, 2011

Wiring up a Menu to Show

Call back method that we have to write

Resource Identier

XML Resource le is converted (inated) into a Menu object that will be rendered (shown) on screen
6

R. Vasa, 2011

Handling Menu Click

Call back method that we have to write

R. Vasa, 2011

Toasting a Message

Android offers this via the Toast utility

There is often a need to show a message for a short period and then fade on mobile devices

R. Vasa, 2011

Toasting a Message

Message displayed for a second

On Click

R. Vasa, 2011

Creating a Toast

Duration can be customised

Android offers Toast.LENGTH_LONG, Toast.LENGTH_SHORT as built in defaults

10

R. Vasa, 2011

Lecture Roadmap - Where are we?

Using Frame Layout Adapters and Working with Simple Lists

Working with Menus

11

R. Vasa, 2011

Frame Layout Offers Overlays

Frame Layout is also used to help create Tab Panes in Android

Frame Layout offers us this feature

Often with variation in transparency

We often need a way to overlay multiple views (or layouts) on top of each other

12

R. Vasa, 2011

Simple Frame Layout (Light Bulb)

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

R. Vasa, 2011

Frame Layout - Code

2 Image Views and 1 Button in the same layout

14

R. Vasa, 2011

Frame Layout - Code

We control visibility explicitly

15

R. Vasa, 2011

Light Bulb Logic

We ip the visibility of the images Method is called onClick

16

R. Vasa, 2011

Lecture Roadmap - Where are we?

Using Frame Layout Adapters and Working with Simple Lists

Working with Menus

17

R. Vasa, 2011

A Simple List App.

Displays Latitude and Longitude of a location

18

R. Vasa, 2011

Constituents of a List based screen

Text Views

ListView

19

R. Vasa, 2011

Lists get data via an Adapter

Data Source

ListView

Adapter

20

R. Vasa, 2011

Adapter Formats Data for Display

Data Source

ListView

Adapter

Data is formatted for display via customised layout attached to the Adapter
21

R. Vasa, 2011

List Views are very flexible

We specify the layout for each line item of a list Layout can be provided as a resource le (XML)

22

R. Vasa, 2011

Adapter Feeds data to List View

Data Source

ListView

Adapter

Data Source feeds data to the Adapter for formatting

23

R. Vasa, 2011

Adapter Offers Separation of Concerns

Data Source

ListView

Adapter

Data Source can be an array, collection object, external database, or an external server
24

R. Vasa, 2011

Simple List App.

Domain Model: HashMap (Cities, Location)

Data Source (Cities names)

ListView
25

Adapter (Simple Item Layout)

R. Vasa, 2011

Domain Model

Ideally, you read an external resource

26

R. Vasa, 2011

Wiring up Data - Adapter - ListView

Activity extends ListActivity

We are using an Array Adapter (others are available)

27

R. Vasa, 2011

Wiring up Data - Adapter - ListView

We are using SDK provided layout style (we can also write our own)
28

R. Vasa, 2011

Wiring up Data - Adapter - ListView

We are setting the data source to use

29

R. Vasa, 2011

Wiring up Data - Adapter - ListView

Tell the List View to display from adapter

30

R. Vasa, 2011

Wiring up Data - Adapter - ListView

Only one ListView can receive data via the default setListAdapter

31

R. Vasa, 2011

Activity Layout

ListView that will receive data provided via setListAdapter

32

R. Vasa, 2011

Activity Layout

Special built-in identier ListView that will receive data provided via setListAdapter
33

R. Vasa, 2011

Handling List Click Event

This call back is provided by the parent (List Activity) class -- we override it

34

R. Vasa, 2011

But, what about complex lists?

We will cover it later

(if you are curious, look at examples online)

Key concepts are the same

35

R. Vasa, 2011

Lecture Summary

Using Frame Layout Adapters and Working with Simple Lists

Working with Menus

36

R. Vasa, 2011