7/28/2019 L06 Menus Frames Lists 1pp

1/36

Dr. Rajesh Vasa, 2011

Twitter: @rvasa

Blog: http://rvasa.blogspot.com

Lecture 06

Menus and Lists

1

http://rvasa.blogspot.com/http://rvasa.blogspot.com/

7/28/2019 L06 Menus Frames Lists 1pp

2/36

R. Vasa, 2011

Lecture Overview

Working with Menus

Using Frame Layout

Adapters and Working with Simple Lists

2

7/28/2019 L06 Menus Frames Lists 1pp

3/36

R. Vasa, 2011

Menus

Android offers a Menu button, iOS does not

Menus can be customised per activity

3

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)

7/28/2019 L06 Menus Frames Lists 1pp

4/36

R. Vasa, 2011

Creating a Menu

4

Name App (from Lecture 5)

Menus are defined as a resource

7/28/2019 L06 Menus Frames Lists 1pp

5/36

R. Vasa, 2011

Menus are Resources

5

Convention is to place it in

menu folder

7/28/2019 L06 Menus Frames Lists 1pp

6/36

R. Vasa, 2011

Wiring up a Menu to Show

6

Call back method that we have to write

Resource Identifier

7/28/2019 L06 Menus Frames Lists 1pp

7/36R. Vasa, 2011

Handling Menu Click

7

Call back method that we have to write

7/28/2019 L06 Menus Frames Lists 1pp

8/36R. Vasa, 2011

Toasting a Message

There is often a need to show a message for

a short period and then fade on mobiledevices

Android offers this via the Toast utility

8

7/28/2019 L06 Menus Frames Lists 1pp

9/36R. Vasa, 2011

Toasting a Message

9

On Click

Message displayedfor a second

7/28/2019 L06 Menus Frames Lists 1pp

10/36R. Vasa, 2011

Creating a Toast

10

7/28/2019 L06 Menus Frames Lists 1pp

11/36R. Vasa, 2011

Lecture Roadmap - Where are we?

Working with Menus

Using Frame Layout

Adapters and Working with Simple Lists

11

7/28/2019 L06 Menus Frames Lists 1pp

12/36R. Vasa, 2011

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 TabPanes in Android

12

7/28/2019 L06 Menus Frames Lists 1pp

13/36R. Vasa, 2011

Simple Frame Layout (Light Bulb)

13

Button is placed on top of Image View

On / Off Images are also placed on top of each other

7/28/2019 L06 Menus Frames Lists 1pp

14/36R. Vasa, 2011

Frame Layout - Code

14

2 Image Views and 1 Button in the same layout

7/28/2019 L06 Menus Frames Lists 1pp

15/36R. Vasa, 2011

Frame Layout - Code

15

7/28/2019 L06 Menus Frames Lists 1pp

16/36R. Vasa, 2011

Light Bulb Logic

16

We flip the visibility of the images

7/28/2019 L06 Menus Frames Lists 1pp

17/36R. Vasa, 2011

Lecture Roadmap - Where are we?

Working with Menus

Using Frame Layout

Adapters and Working with Simple Lists

17

7/28/2019 L06 Menus Frames Lists 1pp

18/36R. Vasa, 2011

A Simple List App.

18

Displays Latitude and Longitude of a location

7/28/2019 L06 Menus Frames Lists 1pp

19/36R. Vasa, 2011

Constituents of a List based screen

19

ListView

Text Views

7/28/2019 L06 Menus Frames Lists 1pp

20/36

R. Vasa, 2011

Lists get data via an Adapter

20

ListView

Data Source

Adapter

7/28/2019 L06 Menus Frames Lists 1pp

21/36

R. Vasa, 2011

Adapter Formats Data for Display

21

ListView

Data Source

Adapter

7/28/2019 L06 Menus Frames Lists 1pp

22/36

R. Vasa, 2011

List Views are very flexible

22

We specify the layout for

each line item of a list

Layout can be provided as a

resource file (XML)

7/28/2019 L06 Menus Frames Lists 1pp

23/36

R. Vasa, 2011

Adapter Feeds data to List View

23

ListView

Data Source

Adapter

7/28/2019 L06 Menus Frames Lists 1pp

24/36

R. Vasa, 2011

Adapter Offers Separation of Concerns

24

ListView

DataSource

Adapter

7/28/2019 L06 Menus Frames Lists 1pp

25/36

R. Vasa, 2011

Simple List App.

25

ListView

Data Source

Adapter

Domain Model:

HashMap (Cities, Location)

(Cities names)

(Simple Item Layout)

7/28/2019 L06 Menus Frames Lists 1pp

26/36

R. Vasa, 2011

Domain Model

26

Ideally, you read an external resource

7/28/2019 L06 Menus Frames Lists 1pp

27/36

R. Vasa, 2011

Wiring up Data - Adapter - ListView

27

Activity extends ListActivity

We are using an Array Adapter (others are available)

7/28/2019 L06 Menus Frames Lists 1pp

28/36

R. Vasa, 2011

Wiring up Data - Adapter - ListView

28

We are using SDK provided layout style

(we can also write our own)

7/28/2019 L06 Menus Frames Lists 1pp

29/36

R. Vasa, 2011

Wiring up Data - Adapter - ListView

29

We are setting the data source to use

7/28/2019 L06 Menus Frames Lists 1pp

30/36

R. Vasa, 2011

Wiring up Data - Adapter - ListView

30

Tell the List View to display from adapter

7/28/2019 L06 Menus Frames Lists 1pp

31/36

R. Vasa, 2011

Wiring up Data - Adapter - ListView

31

Only one ListView can receive data

via the default setListAdapter

7/28/2019 L06 Menus Frames Lists 1pp

32/36

R. Vasa, 2011

Activity Layout

32

ListView that will receive data

provided via setListAdapter

7/28/2019 L06 Menus Frames Lists 1pp

33/36

R. Vasa, 2011

Activity Layout

33

ListView that will receive data

provided via setListAdapter

7/28/2019 L06 Menus Frames Lists 1pp

34/36

R. Vasa, 2011

Handling List Click Event

34

7/28/2019 L06 Menus Frames Lists 1pp

35/36

R. Vasa, 2011

But, what about complex lists?

35

We will cover it later

(if you are curious, look at examples online)

Key concepts are the same

7/28/2019 L06 Menus Frames Lists 1pp

36/36

Lecture Summary

Working with Menus

Using Frame Layout

Adapters and Working with Simple Lists