Android chapter11 dialogboxes

10/4/2011
1
Ad id
11
A
n
d
ro
id

DialogBoxes
AlertDialog &ToastWidgets
VictorMatos
ClevelandStateUniversity
Notesarebasedon:
AndroidDevelopers
/>11.Android–UI–TheDialogBox
TheDialogBox
Androidprovidestwoprimitiveformsof
dialogboxes:
1. AlertDialog boxes,and
2. Toastcontrols
22
10/4/2011
2
11.Android–UI–TheDialogBox
TheAlertDialog
TheAlertDialog isanalmost modal screen
that
(1) presentsabriefmessagetotheuser
typicallyshownasasmallfloating

windowthatpartiallyobscuresthe
underlyingview,and
(2) collectsasimpleanswer(usuallyby
333
clickinganoptionbutton).
Note:
Afullymodal viewremainsonthescreenwaitingforuser’sinput.Therestof
theapplicationisonhold.Ithastobedismissedbyanexplicituser’saction.
11.Android–UI–TheDialogBox
TheAlertDialog
Warning!!!
AnAlertDialo
g
isNOT at
yp
icalin
p
utBox
(
asin.NET
)
g
yp
p
( )
Why?
AnAlertDialog boxismodalasitneedsuserinterventionto
beterminated
44
However

itdoesnotstopthemainthread(codefollowingthecallto
showtheDialogAlert boxisexecutedwithoutwaitingforthe
user’sinput)
10/4/2011
3
11.Android–UI–TheDialogBox
TheAlertDialog
Dissectingan
AlertDialog Box:
Icon
Title
Negative
Button
Message
55
Positive
Button
Neutral
Button
11.Android–UI–TheDialogBox
TheAlertDialog
Example:AsimpleDialogBox
<LinearLayout
android:id="@+id/LinearLayout01"
android:layout width
="
fill parent
"
android:layout_width
fill_parent

android:layout_height="fill_parent"
xmlns:android="
android:orientation="horizontal">
<Button
android:text="GO"
android:id="@+id/btnGo"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<EditText
d idhit
"likth btt "
66
an
d
ro
id
:
hi
n
t
=
"
c
li
c
k

th

e
b
u
tt
on
"

android:id="@+id/txtMsg"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</EditText>
</LinearLayout>
10/4/2011
4
11.Android–UI–TheDialogBox
TheAlertDialog
Example: Asimpledialogbox
package cis493.selectionwidgets;
it
did Atiit
i
mpor
t
an
d
ro
id
.app.
A
c

ti
v
it
y
;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
public class AndDemoUI1 extends Activity {
77
Button btnGo;
EditText txtMsg;
String msg;
11.Android–UI–TheDialogBox
TheAlertDialog
Example: Asimpledialogbox
@Override
public void onCreate(Bundle savedInstanceState) {
super
.onCreate
(
savedInstanceState
);
super
.onCreate
(

savedInstanceState
);
setContentView(R.layout.main);
txtMsg = (EditText)findViewById(R.id.txtMsg);
btnGo = (Button) findViewById(R.id.btnGo);
btnGo.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
AlertDialog dialBox = createDialogBox();
dialBox.show();
// WARNING: (in general )
// after showing a dialog you should have NO more code. Let the buttons of
88
// the dialog box handle the rest of the logic. For instance, in this
// example a modal dialog box is displayed (once shown you can not do
// anything to the parent until the child is closed) however the code in
// the parent continues to execute after the show() method is
// called.
txtMsg.setText("I am here! ");
}
});
}//onCreate
10/4/2011
5
11.Android–UI–TheDialogBox
TheAlertDialog
Example: Asimpledialogbox
private AlertDialog createDialogBox(){
AlertDialo
g

m
yQ
uittin
g
Dialo
g
Box
=

g
yQ g g
new AlertDialog.Builder(this)
//set message, title, and icon
.setTitle("Terminator")
.setMessage("Are you sure that you want to quit?")
.setIcon(R.drawable.ic_menu_end_conversation)
//set three option buttons
.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {
//whatever should be done when answering "YES" goes here
"YES "
It
tSti
(
hi hB tt
)
99
msg =
"YES

"
+

I
n
t
eger.
t
o
St
r
i
ng
(
whi
c
hB
u
tt
on
)
;
txtMsg.setText(msg);
}
})//setPositiveButton
11.Android–UI–TheDialogBox
TheAlertDialog
Example: Asimpledialogbox
.setNeutralButton("Cancel",new DialogInterface.OnClickListener() {
p

ublic void onClick
(
D
ialo
g
Interface
d
ialo
g
,
i
nt
w
hichButton
)
{
p
g
g
//whatever should be done when answering "CANCEL" goes here
msg = "CANCEL " + Integer.toString(whichButton);
txtMsg.setText(msg);
}//OnClick
})//setNeutralButton
.setNegativeButton("NO", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {
//whatever should be done when answering "NO" goes here
msg = "NO " + Integer.toString(whichButton);
txtMsg.setText(msg);
}

})
//
setNegativeButton
1010
})
//
setNegativeButton
.create();
.return myQuittingDialogBox;
}// createDialogBox
}// class
10/4/2011
6
11.Android–UI–TheDialogBox
TheAlertDialog
Example: AsimpleAlertDialog box
Thistextisset
right after
right

after

showingthe
dialogbox
1111
11.Android–UI–TheDialogBox
TheToastView
AToast isatransientview
containingaquicklittlemessage
fortheuser.

Theyappearasafloatingview
overtheapplication.
Toastsneverreceivefocus!
1212
10/4/2011
7
11.Android–UI–TheDialogBox
TheToastView
Example: AsimpleToast
Toast.makeText ( context, message, duration ).show();
Context:Areferencetotheview’senvironment(whatisaroundme…)
Message:Thethingyouwanttosay
Duration:SHORT(0)orLONG(1)exposure
1313
11.Android–UI–TheDialogBox
TheToastView
Example: AsimpleToast
package cis493.dialogboxes;
it
d id A ti it
i
mpor
t
an
d
ro
id
.app.
A
c

ti
v
it
y
;
import android.os.Bundle;
import android.widget.Toast;
public class ToastDemo1 extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView
(
R.layout.
main
);
1414
setContentView
(
R.layout.
main
);
Toast.makeText(
getApplicationContext(),
"Saludos amigos \n Hasta la vista",
Toast.LENGTH_LONG).show();
}
}
10/4/2011

8
11.Android–UI–TheDialogBox
TheToastView
Asanaside
Context:
OnAndroidaContextismostlyusedtoloadandaccessresources.
AllwidgetsreceiveaContextparameterintheirconstructor.
InaregularAndroidapplication,youusuallyhavetwokindsofContext,
Activity andApplication.Thefirstoneistypicallypassedtoclasses
andmethodsthatneedaContext.
1515
Viewshaveareferencetotheentireactivityandthereforetoanythingyour
activityisholdingonto;usuallytheentireViewhierarchyandallitsresources.
11.Android–UI–TheDialogBox
TheToastView
CustomizingaToastView
B
y
defaultToastviewsaredis
p
la
y
edatthecenter‐bott omofthe
y py
screen.
HowevertheusermaychangetheplacementofaToastviewby
usingeitherofthefollowingmethods:
void setGravity (int gravity, int xOffset, int yOffset)
Set the location at which the notification should appear on the screen.
1616

Set

the

location

at

which

the

notification

should

appear

on

the

screen.
void setMargin (float horizontalMargin, float verticalMargin)
Setthemarginsoftheview.
10/4/2011
9
11.Android–UI–TheDialogBox
TheToastView
CustomizingaToastView

Thefollowin
g
methodusesoffsetvaluesbasedonthe
p
ixel
g p
resolutionoftheactualdevice.Forinstance,theG1phonescreen
contains360x480pixels.
void setGravity (int gravity, int xOffset, int yOffset)
Gravity: Overallplacement.Typicalvaluesinclude:Gravity.CENTER,Gravity.TOP,
Gravity.BOTTOM,…
1717
xOffset: AssumeGravity.CENTER placementonaG1phone.The
xOffset rangeis‐160,…,0,…160(left,center,right)
yOffset:TherangeonaG1is:‐240,…,0,…240(top,center, bottom)
11.Android–UI–TheDialogBox
TheToastView
CustomizingtheToastView
AsecondmethodtoplaceaToastissetMargin.Thescreenisconsideredtohave
acenterpointwherehorizontalandverticalcenterlinesmeet.Thereis50%of
thescreentoeachsideofthatcenterpoint(top,botton,left,right).Marginsare
expressedasavaluebetween:‐50,…,0,…,50.
void setMargin (float horizontalMargin, float verticalMargin)
1818
Note:
Thepairofmargins(‐50,‐50)representtheupper‐leftcornerofthescreen,
(0,0)isthecenter,and(50,50)thelower‐rightcorner.
10/4/2011
10
11.Android–UI–TheDialogBox

TheToastView
Example: ChangingtheplacementofaToastview.
1919
UsingthesetGravity(…) methodwithGravity.CENTER,andxandyoffsetsof(resp.):
0,0(center)
‐160,‐240 (top‐left)
160,240 (right‐bottom)
11.Android–UI–TheDialogBox
TheToastView
Example: ChangingtheplacementofaToastview.
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
android:id="@+id/myTableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ff0000ff"
android:orientation="vertical"
android:stretchColumns="1,2"
xmlns:android=" />>
android:inputType="numberSigned"
>
</EditText>
</TableRow>
<TableRow
android:id="@+id/myRow2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ff0000ff"
android:padding
=

"10px
"
>
<TableRow
android:id="@+id/myRow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:id="@+id/myCaption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ff009999"
android:text="Testing Toast - Gravity.CENTER 320x480 pixels"
android:textSize="20sp"
android:gravity="center"
android:layout_span="2"
>
</TextView>
</TableRow>
<TableRow
android:id="@+id/myRow1"
android:layout
_
width
=
"fill
_
parent"

android:padding
=
10px
android:orientation="horizontal"
>
<TextView
android:id="@+id/yLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Y offset: "
android:textSize="18sp"
>
</TextView>
<EditText
android:id="@+id/yBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="18sp"
android:inputType="numberSigned"
>
</EditText>
</TableRow>
<
T
ableRow
2020
_
_
android:layout_height="wrap_content"

android:background="#ff0000ff"
android:padding="10px"
android:orientation="horizontal"
>
<TextView
android:id="@+id/xLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" X offset: "
android:textSize="18sp"
>
</TextView>
<EditText
android:id="@+id/xBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="18sp"
android:id="@+id/myRow3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#ff0000ff"
android:padding="10px"
android:orientation="horizontal"
>
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Show Toast "

android:layout_span="2"
>
</Button>
</TableRow>
</TableLayout>
10/4/2011
11
11.Android–UI–TheDialogBox
TheToastView
Example: ChangingtheplacementofaToastview.
package cis493.dialogboxes;
import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class ToastDemo1 extends Activity {
EditText xBox;
EditText
yBox
;
2121
EditText
yBox
;
Button btn1;
@Override

public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main2);
xBox = (EditText)findViewById(R.id.xBox);
yBox = (EditText)findViewById(R.id.yBox);
11.Android–UI–TheDialogBox
TheToastView
Example: ChangingtheplacementofaToastview.
btn1 = (Button)findViewById(R.id.btn1);
btn1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
try {
Toast myToast = Toast.makeText(
getApplicationContext(),
"Saludos amigos \n Hasta la vista",
Toast.LENGTH_LONG);
myToast.setGravity(Gravity.CENTER,
Integer.valueOf(xBox.getText().toString()),
Integer.valueOf(yBox.getText().toString()) );
myToast.show();
2222
} catch (NumberFormatException e) {
Toast.makeText(getApplicationContext(),
e.getMessage(),
Toast.LENGTH_LONG).show();
}
}// onClick
}); // listener
}// onCreate

}// class
10/4/2011
12
11.Android–UI–TheDialogBox
TheToastView
Example:ShowingFancyToastviews.
Toastscouldbemodifiedtodis
p
la
y
acustomcombinationof
py
color/shape/text/background.
Youneedtofollowthenextsteps:
1. DefinetheXMLlayoutofthenewcustomview
2. MakesurethereisaTex tView named:text
3
Additionally you could attach an
android: background
to the
TextView
2323
3
.
Additionally

you

could


attach

an

android:

background
to

the

TextView
.
4. Thebackgroundcouldbeafigure(suchasa.png file)oranXMLdefined
shape(seenextexample).
Exampletakenfrom:
/>11.Android–UI–TheDialogBox
TheToastView
Example:ShowingFancyToastviews.
Let’sbeginwiththeapplication’smain layout.
<?xml version="1.0" encoding
=
"
ut
f
-
8
"
?
>

<LinearLayout
xmlns:android=" />android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#777"
>
<TextView
android:layout_width="fill_parent"
android:la
y
out hei
g
h
t
=
"
wra
p
content"
2424
y_g
p_
android:text='"Testing Custom TOAST"'/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btnShowToast"
android:text=" Show Custom - Normal Toast ">
</Button>
</LinearLayout>

10/4/2011
13
11.Android–UI–TheDialogBox
TheToastView
Example:ShowingFancyToastviews.
Nowwecreateourcustom Toastlayout(called:
m
y
toast la
y
out.xm
l
.ItmustcontainaTextView called‘tex
t
’
)
y
__
y
)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=" />android:id="@+id/my_toast_layout_root"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
>
<TextView
android:id
=

"@+id/text"
RequiredTex tV iew
2525
android:id
=
"@+id/text"

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:background="@drawable/my_border"
>
</TextView>
</LinearLayout>
Optionalbackground
11.Android–UI–TheDialogBox
TheToastView
Example:ShowingFancyToastviews.
Finallywetakecareoftheoptionalbackgroundelement
(
m
y
border.xm
l
)
.Inthisex am
p
lewedefinea<sha
p
e>

(
butitcould
(
y
_
) p p (
beany.png image).ThisXML(orimage)issavedinthefolder:
/res/drawable
<?xml version="1.0" encoding="UTF-8" ?>
<shape
xmlns:android=" />android:shape="rectangle">
<
stroke
android:width
=
"2dp
"
android:color
=
"#ffffff00
"
/>
2626
<
stroke

android:width
2dp

android:color

#ffffff00

/>
<solid android:color="#ff990000" />
<padding android:left="10dp" android:top="4dp"
android:right="10dp" android:bottom="4dp" />
<corners android:radius="15dp" />
</shape>
10/4/2011
14
11.Android–UI–TheDialogBox
TheToastView
Example:ShowingFancyToastviews.
Testingtheapplication
2727
AToastdisplayedwith
ourcustomlayout
AToastdisplayedusing
standardformatting
11.Android–UI–TheDialogBox
TheToastView
Example:ShowingFancyToastviews.
package cis493.dialogboxes;
import android.app.Activity
;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
2828
public class ToastDemo2 extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
10/4/2011
15
11.Android–UI–TheDialogBox
TheToastView
Example:ShowingFancyToastviews.
Button btnShowToast = (Button) findViewById(R.id.btnShowToast);
btnShowToast.setOnClickListener(new OnClickListener() {
@Override
p blic
oid
onClick
(Vie ) {
p
u
blic
v
oid
onClick
(Vie
w v

)

{
//custom made TOAST
LayoutInflater inflater = getLayoutInflater();
View layout = inflater.inflate(
R.layout.my_toast_layout,
(ViewGroup) findViewById(R.id.my_toast_layout_root));
TextView text = (TextView) layout.findViewById(R.id.text);
Toast toast = new Toast(getApplicationContext());
text.setText("Hola mundo \nI'm a fancy Toast");
toast.setGravity(Gravity.CENTER, 0, 0);
toast.setDuration(Toast.LENGTH_SHORT);
2929
toast.setView(layout);
toast.show();
// normal TOAST
Toast.makeText(getApplicationContext(),
"Hola mundo \nnow I am quite normal",
Toast.LENGTH_SHORT).show();
}
});
}
}
11.Android–UI–TheDialogBox
TheToastView
Example:ShowingFancyToastviews.
Asanaside:
InflatingaView
YoumaywantoccasionallytomodifythewayAndroidrendersaparticularview

(perhapsadifferentcolor,style,orshape).
OncetheHierarchyViewhasbeendisplayed,youcantakeanyterminalnodeand
extendit byinflatingacustom‘viewsub‐tree’.Also,byusinglayoutinflationwe
maydrawanewHierarchyontopoftheexistingscreen.
Inourexample,ourcustomizedrenditionofaToast box(includingacolorful
bk d)i dfi di XML fil Diti th i f th t Tti
3030
b
ac
k
groun
d)

i
s
d
e
fi
ne
d

i
nan
XML

fil
e.
D
ep
i

c
ti
ng
th
e
i
mageo
f

th
ecus
t
om
T
oas
t

i
s
accomplishedbyinflatingtheXMLlayoutspec.
10/4/2011
16
11.Android–UI–TheDialogBox
TheToastView
Example:ShowingFancyToastviews.
Asanaside:
InflatingaView
Syntaxt
public View inflate (int resource, ViewGroup root)
Inflateanewviewhierarchyfromthespecifiedxmlresource.

Parameters
resourceIDforanXMLlayoutresourcetoload,root:optionalviewtobetheparentofthe
generatedhierarchy.
Returns
TherootViewoftheinflatedhierarchy.Ifrootwassupplied,thisistherootView;otherwise
itisthe
rootoftheinflatedXMLfile.
3131
LayoutInflater inflater = getLayoutInflater();
View layout = inflater.inflate(
R.layout.my_toast_layout,
(ViewGroup) findViewById(R.id.my_toast_layout_root));
TextView text = (TextView) layout.findViewById(R.id.text);
11.Android–UI–TheDialogBox
DialogBoxes
323232
10/4/2011
17
11.Android–UI–TheDialogBox
DialogBoxes
AppendixA.Density‐independentpixel(dp ordip)
AvirtualpixelunitthatyoushouldusewhendefiningUIlayout,toexpresslayout
dimensionsorpositioninadensity‐independentway.
Thedensity‐independentpixelisequivalenttoonephysicalpixelona160dpiscreen,
whichisthebaselinedensityassumedbythesystemfora"medium"densityscreen.
Atruntime,thesystemtransparentlyhandlesanyscalingofthedp units,asnecessary,
basedontheactualdensityofthescreeninuse.Theconversionofdp unitstoscreen
ili il
d
* (d i / 160)

333333
p
i
xe
l
s
i
ss
i
mp
l
e: px =
d
p
*

(d
p
i

/

160)
.
Forexample,ona240dpiscreen,1dp equals1.5physicalpixels.Youshouldalwaysuse
dp unitswhendefiningyourapplication'sUI,toensureproperdisplayofyourUIon
screenswithdifferentdensities.