User Interface Design - FAU Android

goatishspyΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

117 εμφανίσεις

Module 6
. User Interface Design


1.

Android Views, Layouts
,

Menus

and

Dialogs

a)

Views



Definition:

o

In
an Android application, the user interface is built using View and ViewGroup
objects. There are many types of views and view groups, each of which is a
descenda
nt of the View class.

o

View objects are the basic units of user interface expression on the Android
platform. The View class serves as the base for subclasses called "widgets,"
which offer fully implemented UI objects, like text fields and buttons. The
View
Group class serves as the base for subclasses called "layouts," which offer
different kinds of layout architecture, like linear, tabular and relative.

o

Relationship between Views and Activity




An
activity

can contain one or more views.



An activity
h
as to h
ave at least one view if
we

want to have a user
interface.

o

A View object:



is a data structure whose properties store the layout parameters and
content for a specific rectangular area of the screen.



handles its own measurement, layout, drawing, focus change
, scrolling,
and key/gesture interactions for the rectangular area of the screen in which
it resides.



is also a point of interaction for the user and the receiver of the interaction
events.



View Hierarchy

o

On the Android platform, you define an Activity's U
I using a hierarchy of View
and ViewGroup nodes, as shown in the diagram below.


Figure
6.1

View Hierarchy Example
.

o

A hierarchy tree can be built up using Android’s set of predefined widgets and
layouts, or with custom Views that you create yourself.

o

In o
rder to attach the view hierarchy tree to the screen for rendering, your Activity
must call the
setContentView()

method and pass a reference to the root node
object.

o

The root node of the hierarchy requests that its child nodes draw themselves


in
turn, ea
ch view group node is responsible for calling upon each of its own child
views to draw themselves.


o

Let’s look at an example of a Sudoku application

[3]

where a view is used:

package org.example.sudoku;


import android.app.Activity;

import android.os.Bundl
e;


public class Sudoku extends Activity {


/** Called when the activity is first created. */


@Override


public void onCreate(Bundle savedInstanceState) {


super.onCreate(savedInstanceState);


setContentView(R.layout.main);


}

}



The onCreate() method of this activity is called automatically by Android
to initialize the activity. As you can see there is a call to
setContentView()

which fills in the contents of the activity’s screen.



R.lauout.main

is a resource identifier that refer
s to the
main.xml

file
in the res/layout directory. This
main.xml

declares the user interface in
XML.



The
R

class is manag
ed automatically by the Android
.

b)

Layout
s




The most common way to define your layout and express the view hierarchy is with
an XML layo
ut file.



Each element in
an
XML

Layout

is a View
(or a subclass of a View, such as a
Button)
or ViewGroup

object (or descendent thereof).
View objects are leaves in the
tree, ViewGroup objects are branches in the tree (see the View Hierarchy figure
above).



The name of an XML element is respective to the Java class that it represents. So a
<TextView>

element creates a
TextView

in your UI, and a
<LinearLayout>

element
creates a
LinearLayout

view group. When you load a layout resource, the Android
system initia
lizes these run
-
time objects, corresponding to the elements in your
layout.

Let’s look at the following example

which defines a simple vertical layout
with a text view and a button
:

<?xml version="1.0" encoding="utf
-
8"?>

<LinearLayout
xmlns:android="http:/
/schemas.android.com/apk/res/android"


android:layout_width="fill_parent"


android:layout_height="fill_parent"


android:orientation="vertical" >


<TextView android:id="@+id/text"


android:layout_width
="wrap_content"


android:layout_height="wrap_content"


android:text="Hello, I am a TextView" />


<Button android:id="@+id/button"


android:layout_width="wrap_content"


android:layout_height="wrap_content"


android:text="Hello, I am a Button" />

</LinearLayout>

o

Notice that the
LinearLayout

element contains both the
TextView

and the
Button. You can nest another
LinearLayout

(or other type of view group)
inside here, to lengthen the view hierarchy a
nd create a more complex layout.



A layout is a container for one or more child objects and a behavior to position them
on the screen within the rectangle of the parent object. Here is a list of the most
common layouts provided by Android:

o

FrameLayout

: Arr
anges its children so they all start at the top left of the
screen. This is used for tabbed views and image switchers.

o

LinearLayout
: Arranges its children in a single column or row. This is the
most common layout you will use.

o

RelativeLayout
: Arranges its
children in relation to each other or to the
parent. This is often used in forms.

o

TableLayout
: Arranges its children in rows and columns, similar to an
HTML table.



Common parameters to all layouts:

o

xmlns:android=

http://schemas.android.com/apk/res/android




Defines the XML namespace for Android. You should define this once, in
the first XML tag in the file.

o

android
:layout_width=”fill_parent”, android:layout_height=”fill_parent”



Takes up the entire width and height of the parent (in this case, the
window). Po
ssible values are
fill_parent

and
wrap_content
.



Sudoku
Example:

o

Let’s look at an example of the Sudoku application where the user interface is
defined in main.xml

<
LinearLayout


xmlns:android
=
"http://schemas.android.com/apk/res/android"


android:orient
ation
=
"vertical"


android:layout_width
=
"fill_parent"


android:layout_height
=
"fill_parent"
>


<
TextView


android:layout_width
=
"fill_parent"


android:layout_height
=
"wrap_content"


android:text
=
"@string/main_title"

/>


<
Button


andr
oid:layout_width
=
"fill_parent"


android:layout_height
=
"wrap_content"


android:text
=
"@string/continue_label"

/>


<
Button


android:layout_width
=
"fill_parent"


android:layout_height
=
"wrap_content"


android:text
=
"@string/new_game_lab
el"

/>


<
Button


android:layout_width
=
"fill_parent"


android:layout_height
=
"wrap_content"


android:text
=
"@string/about_label"

/>


<
Button


android:layout_width
=
"fill_parent"


android:layout_height
=
"wrap_content"


android:t
ext
=
"@string/exit_label"

/>

</
LinearLayout
>

o

Running the Sudoku application with this xml file we get the following screen
shot:


Figure 6
.
2

Sudoku Application Main Screen

o

The foll
o
wing code represents the
Sudoku
main
.xml

file which defines the
user interf
ace for our Sudoku application.

<
LinearLayout


xmlns:android
=
"http://schemas.android.com/apk/res/android"


android:background
=
"@color/background"


android:layout_height
=
"fill_parent"


android:layout_width
=
"fill_parent"


android:padding
=
"30dip"



android:orientation
=
"horizontal"
>


<
LinearLayout


android:orientation
=
"vertical"


android:layout_height
=
"wrap_content"


android:layout_width
=
"fill_parent"


android:layout_gravity
=
"center"
>


<
TextView


android:text
=
"@stri
ng/main_title"


android:layout_height
=
"wrap_content"


android:layout_width
=
"wrap_content"


android:layout_gravity
=
"center"


android:layout_marginBottom
=
"25dip"


android:textSize
=
"24.5sp"

/>


<
Button


and
roid:id
=
"@+id/continue_button"


android:layout_width
=
"fill_parent"


android:layout_height
=
"wrap_content"


android:text
=
"@string/continue_label"

/>


<
Button


android:id
=
"@+id/new_button"


android:layout_width
=
"fi
ll_parent"


android:layout_height
=
"wrap_content"


android:text
=
"@string/new_game_label"

/>


<
Button


android:id
=
"@+id/about_button"


android:layout_width
=
"fill_parent"


android:layout_height
=
"wrap_content"



android:text
=
"@string/about_label"

/>


<
Button


android:id
=
"@+id/exit_button"


android:layout_width
=
"fill_parent"


android:layout_height
=
"wrap_content"


android:text
=
"@string/exit_label"

/>


</
LinearLayout
>

</
Line
arLayout
>

o

As we can see the UI defined here contains a
LinearLayout

inside another
LinearLayout
. The first
<LinearLayout>

element defines the application
settings like background color through
android:background

attribute, the
hight and the width of the sc
reen and so on.

o

The inner
LinearLayout

defines the layout for the buttons that will
be
contained here
. The attribute
android:orientation

indicates the orientation
of the elements in the screen, and we can see that the height, width and gravity
are

defined
here. This
LinearLayout

contains a
TextView
, used as a label for
the Game, showing the text: “Android Sudoku”

as a title for the screen. Than
we see four button elements, one for Continue, one for New Game, another
one for About and finally one for Exit.

o

I
nside the <LinearLayout> tag there exists a child widget:


<
TextView


android:text
=
"@string/main_title"


android:layout_height
=
"wrap_content"


android:layout_width
=
"wrap_content"


android:layout_gravity
=
"center"



android:layout_marginBottom
=
"25dip"


android:textSize
=
"24.5sp"

/>

which defines a simple text label. Notice that instead of hard coding the
English text we are using
@string/main_title

syntax to refer to st
rings
in the
res/values/string
s
.
xml

file
.

All the text (string literals) that
appears in your application needs to be specified in your resource files.
This file looks like this:

<
resources
>


<
string

name
=
"app_name"
>
Sudoku
</
string
>


<
string

name
=
"main_title"
>
Android Sudoku
</
string
>


<
strin
g

name
=
"continue_label"
>
Continue
</
string
>


<
string

name
=
"new_game_label"
>
New Game
</
string
>


<
string

name
=
"about_label"
>
About
</
string
>


<
string

name
=
"exit_label"
>
Exit
</
string
>

</
resources
>


As you can see the
@string/main_title

value is Android Sudoku
.

o

Now if we run the Sudoku application (version 2

of the Sudoku code
-

Sudokuv2
) we will get something like this:


Figure 6
.
3

Sudoku Application



The
onClick

method is implemented by our activity

(Sudoku)

and automatically
called each time one of the four

buttons is pressed. First step is to determine which of
the buttons was pressed and based on that, act accordingly.


public

void

onClick(View v) {


switch

(v.getId()) {


case

R.id.
continue_button
:


startGame(Game.
DIFFICULTY_CONTINUE
);



break
;


// ...




case

R.id.
about_button
:


Intent i =
new

Intent(
this
, About.
class
);


startActivity(i);


break
;


// More buttons go here (if any) ...


case

R.id.
new_button
:


openNewGameD
ialog();


break
;


case

R.id.
exit_button
:


finish();


break
;




}


}




For this to appear in the main screen of the applic
ation we need to add the view
created in the xml file

in the Sudoku class.

In the
below

onCr
eate

method

behaviour
is added to the application. C
ode was added to call
findViewById()

to look up an
Android view given its resource ID and
setOnClickListener()

to tell Android
which objects to tickle when the user touches or clicks the view.

For the cli
ck listener
to work we need to implement
OnClickListener

in the Sudoku Activity

by adding
implement OnClickListener
.


/**

Called

when

the

activity

is

first

created.

*/


@Override


public

void

onCreate(Bundle savedInstanceState) {


super
.onCreate(s
avedInstanceState);


setContentView(R.layout.
main
);



// Set up click listeners for all the buttons


View continueButton =
this
.findViewById(R.id.
continue_button
);


continueButton.setOnClickListener(
this
);


View newButton =
this
.fi
ndViewById(R.id.
new_button
);


newButton.setOnClickListener(
this
);


View aboutButton =
this
.findViewById(R.id.
about_button
);


aboutButton.setOnClickListener(
this
);


View exitButton =
this
.findViewById(R.id.
exit_button
);


exitButton.
setOnClickListener(
this
);


}

o

Remember that constants like R.id.about_button are created by the Eclipse
plug
-
in in R.java when it sees
@+id/about_button

in
res/layout/main.xml
.



Let’s look at another xml file for the About Activity. This file looks like th
is:


<
ScrollView


xmlns:android
=
"http://schemas.android.com/apk/res/android"


android:layout_width
=
"fill_parent"


android:layout_height
=
"fill_parent"


android:padding
=
"10dip"
>


<
TextView


android:id
=
"@+id/about_content"


android:layout_
width
=
"wrap_content"


android:layout_height
=
"wrap_content"


android:text
=
"@string/about_text"

/>

</
ScrollView
>

This file describes the screen About which contains a simple text given in
@strings/about_text
. This screen is obtained if we navigate
to About button in the
Sudoku application, and it looks like this:


Figure 6
.
4

About Screen in Sudoku Application


o

For the above screen to appear we need to link it to the About Activity. This is
done in the About class:

import

android.app.Activity;

impor
t

android.os.Bundle;


public

class

About
extends

Activity {


@Override


protected

void

onCreate(Bundle savedInstanceState) {


super
.onCreate(savedInstanceState);


setContentView(R.layout.
about
);


}

}

The link is done by calling setContentVi
ew
(R.layout.about)

which will
look for the
about.xml

file in the layout subdirectory. Remember that
onCreate() is automatically called by the Android platform to initialize the
About Activity.


o

Keep in mind that every activity needs to be declared in
Andro
idManifest.xml. This file contains the following:


<
manifest

xmlns:android
=
"http://schemas.android.com/apk/res/android"


package
=
"org.example.sudoku"


android:versionCode
=
"1"


android:versionName
=
"1.0.0"
>


<
application

android:icon
=
"@draw
able/icon"


android:label
=
"@string/app_name"
>


<
activity

android:name
=
".Sudoku"


android:label
=
"@string/app_name"
>


<
intent
-
filter
>


<
action

android:name
=
"android.intent.action.MAIN"

/>



<
category

android:name
=
"android.intent.category.LAUNCHER"

/>


</
intent
-
filter
>


</
activity
>




<
activity

android:name
=
".About"


android:label
=
"@string/about_title"


</
activity
>



<!
--

More activities c
an go here
--
>


</
application
>

</
manifest
>

o

As we can see the above file contains a reference to the icon of the application
which is located in the resource directory, specifically
drawable/icon
.
Furthermore
it contains the application lab
e
l

as
@string/
app_name
, and
contains the activities defined in the application, in our case
Sudoku
,
About
,
Settings

and
Game
.



If we want to apply a Theme we will need to add the following line:
android:theme
=
"@android:style/Theme.Dialog"

to the

activity element for Abou
t,
thus obtaining:

<
activity

android:name
=
".About"


android:label
=
"@string/about_title"


android:theme
=
"@android:style/Theme.Dialog"
>


</
activity
>



Inclu
ding this change to the Manifest file and running the application ag
ain, the
following screen is obtained for the About screen. As you can see, now the About
information is displayed as a Dialog which appears on top of the main Sudoku screen.



Figure 6
.
5

Themed About Screen of Sudoku



c)

Menu
s



Menus are an important part o
f any application. They provide familiar interfaces that
reveal application functions and settings. Android offers an easy programming
interface for developers to provide standardized application menus for various
situations.



Android offers three fundament
al types of application menus:

o

Options Menu



is the primary set of menu items for an Activity. It is revealed
by pressing the device MENU key.
Within the Options Menu are two groups
of menu items:



Icon Menu



is
the collection of items initially visible a
t the bottom of the
screen at the press of the MENU key.



It supports a maximum of six menu items.



These are the only menu items that support icons and the only menu
items that
do not

support checkboxes or radio buttons.



Expanded Menu



is
a vertical list

of items exposed by the "More" menu
item from the Icon Menu.



It exists only when the Icon Menu becomes over
-
loaded and is
comprised of the sixth Option Menu item and the rest.

o

Context Menu



is a floating list of menu items that may appear when you
perfo
rm a long
-
press on a View (such as a list item).

o

Submenu



is a floating list of menu items that is revealed by an item in the
Options Menu or a Context Menu.



A Submenu item cannot support nested Submenus.



Options Menu

o

The Options Menu is opened by pressi
ng the device MENU key.

o

If more than six items are added to the Options Menu, then those that can't fit
in the Icon Menu are revealed in the Expanded Menu, via the "More" menu
item. The Expanded Menu is automatically added when there are more than
six item
s.

o

Should include basic application functions and any necessary navigation items
(e.g., to a home screen or application settings). You can also
add Submenus

for organizing topics and including extra menu functionality.

o

When this menu is opened for the firs
t time, the Android system will call the
Activity onCreateOptionsMenu()

callback method.

Before looking into how to
override this method to fit our purposes, let’s look at the xml file

in
res/menu/menu.xml

for the menu of the Sudoku application.

<
menu

xmln
s:android
=
"http://schemas.android.com/apk/res/android"
>


<
item

android:id
=
"@+id/settings"


android:title
=
"@string/settings_label"


android:alphabeticShortcut
=
"@string/settings_shortcut"

/>

</
menu
>

Where
settings_shortcut is defined in the strin
gs.xml file as:


<string name=”settings_shortcut”>s</string>


The
title of the menu is specified in settings_label in strings.xml file showing
“Settings…”.

Figure 6.6

represents the illustration of the menu in the Sudoku
application.


Figure 6
.
6

Sudoku’s Menu


o

In a menu XML layout, there are three valid elements:
<menu>
,
<group>

and
<item>
. The
item

and
group

elements must be children of a
menu
, but
item

elements may also be the children of a
group
, and another
menu

element may
be the child of
an
item

(to create a Submenu). Of course, the root node of any
file must be a
menu

element.

o

Now let’s look at how the menu is invoked in our application.

We need to
override the Sudoku.onCreateOptionsMenu() method, as follows:

@Override


public

boolean

o
nCreateOptionsMenu(Menu menu) {


super
.onCreateOptionsMenu(menu);


MenuInflater inflater = getMenuInflater();


inflater.inflate(R.menu.
menu
, menu);


return

true
;


}

getMe
nuInflater() returns an instance of MenuInflater that we use to
read the
menu definition from XML and turns it into a real view.

When the user selects any menu item, onOptionsItemSelected() will be called.
Here is the definition for that method:

@Override


public

boolean

onOptionsItemSelected(MenuItem item) {


s
witch

(item.getItemId()) {


case

R.id.
settings
:


startActivity(
new

Intent(
this
, Settings.
class
));


return

true
;


// More items go here (if any) ...


}


return

false
;


}

o

The same menu can be obtained by creating it dire
ctly in the code using the
following code:

public

boolean

onCreateOptionsMenu(Menu menu) {


menu.add(0,
0
, 0,
R.string.
settings_label
);


return

true
;


}

The
Settings screen obtained by pressing the button Settings from th
e options menu
is the

shown in Figure 6.7
.

The two options provided refer to music and hints. The
first option is playing music in the background, while the second one shows hits
during the play.

Depending on whether the music is turned on or off, the Music
class will play mus
ic in the background or not. Hints are used when drawing the
board, in PuzzleView class, presented in more detail in the following module.


Figure 6.7

Sudoku Settings Screen



Context Menu

o

The Android context menu is similar, in concept, to the menu reveale
d with a
"right
-
click" on a PC. When a view is registered to a context menu,
performing a "long
-
press" (press and hold for about two seconds) on the
object will reveal a floating menu that provides functions relating to that item.

o

can be registered to any
View object, however, they are most often used for
items in a
ListView
, which helpfully indicates the presence of the context
menu by transforming the background color of the
ListView

item when
pressed. (The items in the phone's contact list offer an examp
le of this
feature.)

o

Similar to the options menu, to create a context menu, you must override the
Activity’s context menu callback methods:
onCreateContextMenu()
and
onContextItemSelected()
.



Submenus

o

A sub menu can be added within any menu, except another
sub menu. These
are very useful when your application has a lot of functions that may be
organized in topics, like the items in a PC application's menu bar (File, Edit,
View, etc.).

o

A sub menu is created by adding it to an existing Menu with
addSubMenu()
.
This returns a

SubMenu

object (an extension of
Menu
). You can then add
additional items to this menu, with the normal routine, using the
add()

methods. For example:

public

boolean

onCreateOptionsMenu(Menu menu) {



boolean

result =
super
.onCreateOptionsM
enu(menu);




SubMenu fileMenu = menu.addSubMenu("File");



SubMenu editMenu = menu.addSubMenu("Edit");



fileMenu.add("new");



fileMenu.add("open");



fileMenu.add("save");



editMenu.add("undo");



editMenu.add("redo");




return

result;



}



Menu Features

o

Menu Groups




When adding new items to a menu, you can optionally include each
item in a group. A menu group is a collection of menu items that can
share certain traits, like whether they are visible, enabled, or
checkable.



A group is de
fined by an integer (or a resource id, in XML). A menu
item is added to the group when it is added to the menu, using one of
the
add()

methods that accepts a
groupId

as an argument, such as
add(int, int, int, int)
.



You can show or hide the entire group
wit
h
setGroupVisible()
; enable or
disable the group with
setGroupEnabled()
; and set whether
the items can be checkable with
setGroupCheckable()
.

o

Checkable menu items



Any menu item can be used as an
interface for turning options on and off.
This can be indicat
ed with a checkbox
for stand
-
alone options, or radio buttons
for groups of mutually exlusive options
(see the screenshot
to the right
).



To make a single item checkable, use the
setCheckable()

method, like so:

menu.add(0, VIBRATE_SETTING_ID, 0, "Vibrate")

.
setCheckable(true);

This will display a checkbox with the menu item (unless it's in the Icon
Menu).



To make a group of mutually exclusive radio button items, simply
assign the same group ID to each menu item and call
setGroupCheckable()
. In this case, you
don't need to call
setCheckable()

on each menu items, because the group as a whole is
set checkable. Here's an example of two mutually exclusive options in
a Submenu:

SubMenu subMenu = menu.addSubMenu("Color");

subMenu.add(COLOR_MENU_GROUP, COLOR_RED_ID, 0
, "Red");

subMenu.add(COLOR_MENU_GROUP, COLOR_BLUE_ID, 0, "Blue");

subMenu.setGroupCheckable(COLOR_MENU_GROUP, true, true);

In the
setGroupCheckable()

method, the first argument is the group ID
that we want to set checkable. The second argument is whether
we want
the group items to be checkable. The last one is whether we want each
item to be exclusively checkable (if we set this
false
, then all the items
will be checkboxes instead of radio buttons). When the group is set to be
exclusive (radio buttons), ea
ch time a new item is selected, all other are
automatically de
-
selected.

o

Shortcut keys



Quick access shortcut keys using letters and/or numbers can be added
to menu items with
setAlphabeticShortcut(char)

(to set char
shortcut),
setNumericShortcut(int)

(to s
et numeric shortcut), or
setShortcut(char,int)

(to set both). Case is
not

sensitive.

For
example:

menu.add(0, MENU_QUIT, 0, "Quit").setAlphabeticShortcut('q');



Now, when the menu is open (or while holding the MENU key),
pressing the "q" key will select th
is item.



In XML the same result can be achieved using the following syntax:


android:alphabeticShortcut
=
"@string/settings_shortcut"


like in the definition of the menu Settings presented previously and listed
below.


<
menu

xmlns:android
=
"http://schema
s.android.com/apk/res/android"
>


<
item

android:id
=
"@+id/settings"


android:title
=
"@string/settings_label"


android:alphabeticShortcut
=
"@string/settings_shortcut"

/>

</
menu
>

d)

Dialog
s



A dialog is usually a small window that appears in front of the

current Activity.



The underlying Activity loses focus and the dialog accepts all user interaction.



Dialogs are normally used for notifications and short activities that directly relate to
the application in progress.



The Android API supports the following

types of
Dialog

objects:

o

AlertDialog



a

dialog that can manage zero, one, two, or three buttons, and/or
a list of selectable items that can include checkboxes or radio buttons. The
AlertDialog is capable of constructing most dialog user interfaces and is

the
suggested dialog type.

o

ProgressDialog



a dialog that displays a progress wheel or progress bar.
Because it's an extension of the AlertDialog, it also supports buttons.

o

DatePickerDialog



a dialog that allows the user to select a date.

o

TimePickerDialo
g



a dialog that allows the user to select a time.



A dialog is always created and displayed as a part of an
Activity
. You should
normally create dialogs from within your Activity's
onCreateDialog(int)

callback
method. When you use this callback, the Andro
id system automatically manages the
state of each dialog and hooks them to the Activity, effectively making it the "owner"
of each dialog. As such, each dialog inherits certain properties from the Activity.



When you want to show a dialog, call
showDialog(i
nt)

and pass it an integer that
uniquely identifies the dialog that you want to display.



When a dialog is requested for the first time, Android calls
onCreateDialog(int)

from
your Activity, which is where you should instantiate the
Dialog
. This callback me
thod
is passed the same ID that you passed to
showDialog(int)
. After you create the
Dialog, return the object at the end of the method.



Now let’s look at our Sudoku application to see how an AlertDialog is created. When
the option New Game is chosen in the

menu of Sudoku, we want to pop up a dialog
box asking the user to select between three difficulty levels. First we need to add a
few more strings in
res/values/strings.xml
:


<
string

name
=
"new_game_title"
>
Difficulty
</
string
>


<
string

name
=
"easy_label"
>
Easy
</
string
>


<
string

name
=
"medium_label"
>
Medium
</
string
>


<
string

name
=
"hard_label"
>
Hard
</
string
>

Now we need to create the list of difficulties as an array resource in
res/values/arrays.xml
:


<
resources
>


<
array

name
=
"difficulty"
>


<
item
>
@str
ing/easy_label
</
item
>


<
item
>
@string/medium_label
</
item
>


<
item
>
@string/hard_label
</
item
>


</
array
>


</
resources
>

The code to create the new AlertDialog is located in openNewGameDialog() method
called when the user presses on the bu
tton corre
sponding for New Game is listed
below.

Next Figure
illustrates the screen
displaying

this alert dialog.


After the user chooses a difficulty level, the
onClick

method
of
DialogOnClickListener class
is being called that will actually call
the

last method,
s
tartGame
.

class

DialogOnClickListener
implements

DialogInterface.OnClickListener{



public

void

onClick(DialogInterface dialoginterface,


int

i) {


startGame(i);


}


}


/**

Ask

the

user

what

difficulty

level

they

wan
t

*/


private

void

openNewGameDialog() {



DialogOnClickListener listener =
new

DialogOnClickListener();



AlertDialog.Builder alertDiag =
new

AlertDialog.Builder(
this
);



alertDiag.setTitle(R.string.
new_game_title
);



alertDiag.setItems(R.array.
difficulty
,listener);



alertDiag.show();


}



/**

Start

a

new

game

with

the

given

difficulty

level

*/


private

void

startGame(
int

i) {


Log.
d
(
TAG
,
"clicked on "

+ i);


// Start game here...




}

The setItems() method takes two para
meters: the resource ID of the item list
, in this case an
array named difficulty
defined in

res/values/arrays.xml
,

and a listener that will be called
when one of the items is selected.

The method startGame(int i) will contain the main functionality of the

game and will be
presented in the next Module.



Figure 6.8

Difficulty Alert Dialog Screen


References:

[1]

XML Online Tutorial,
http://www.w3schools.com/xml/default.asp

[2]

Android Online Tutorial,
http://developer.android.com/guide/index.html

[3]

Ed Burnette, Hello, Android: Introducing Google’s Mobile Development Platform.