1

Android UI Dialog
Android UI Dialog
Sang Shin
Sang Shin
Michle Garoche
Michle Garoche
www.javapassion.com
www.javapassion.com

Learn with Passion!

Learn with Passion!
2
Disclaimer
Portions of this presentation are modifications
based on work created and shared by the
Android Open Source Project
> http://code.googe.com/poicies.htm
!hey are used according to terms described in
the "reati#e "ommons 2.$ Attribution %icense
> http://creati#ecommons.org/icenses/by/2.$/
&
Topics
'hat is a (iaog)
Aert(iaog
Progress(iaog
"reating a custom (iaog
*
What is a Dialog?
A diaog is usuay a sma window that appears
in front of the current Acti#ity.
> !he underying Acti#ity oses focus and the diaog
accepts a user interaction.
(iaogs are normay used for notifications and
short acti#ities that directy reate to the
appication in progress.
$
Types of Dialog
Aert(iaog
Progress(iaog
(atePicker(iaog
!imePicker(iaog
+
AlertDialog
AlertDialog
,
What is AlertDialog?
An AlertDialog is an e-tension of the Dialog
cass.
.t is capabe of constructing most diaog user
interfaces and is the suggested diaog type.
/ou shoud use it for diaogs that use any of the
foowing features
> A tite
> A te-t message
> One0 two0 or three buttons
> A ist of seectabe items 1with optiona checkbo-es
or radio buttons2
3
How to Create AlertDialog?
4et a 5uider with AlertDialog.Builder(Context)
and then use the cass6s pubic methods to
define a of the Aert(iaog properties.
After you6re done with the 5uider0 retrie#e the
Aert(iaog object with create12
7
Adding Buttons to AlertDialog
Aert(iaog.5uider buider 8 new Aert(iaog.5uider1this29
buider.set:essage1;Are you sure you want to e-it);2
.set"anceabe1fase2
.setPositi#e5utton1;/es;0 new (iaog.nterface.On"ick%istener12 <
pubic #oid on"ick1(iaog.nterface diaog0 int id2 <
:yActi#ity.this.finish129
=
=2
.set>egati#e5utton1;>o;0 new (iaog.nterface.On"ick%istener12 <
pubic #oid on"ick1(iaog.nterface diaog0 int id2 <
diaog.cance129
=
=29
Aert(iaog aert 8 buider.create129
1?
Adding a list to AlertDialog
fina "harSe@uenceAB items 8 <;Ced;0 ;4reen;0 ;5ue;=9
Aert(iaog.5uider buider 8 new Aert(iaog.5uider1this29
buider.set!ite1;Pick a coor;29
buider.set.tems1items0 new (iaog.nterface.On"ick%istener12 <
pubic #oid on"ick1(iaog.nterface diaog0 int item2 <
!oast.make!e-t1getAppication"onte-t120 itemsAitemB0
!oast.%D>4!EFSEOC!2.show129
=
=29
Aert(iaog aert 8 buider.create129
11
Adding checko!es and radio uttons
fina "harSe@uenceAB items 8 <;Ced;0 ;4reen;0 ;5ue;=9
Aert(iaog.5uider buider 8 new Aert(iaog.5uider1this29
buider.set!ite1;Pick a coor;29
buider.setSinge"hoice.tems1items0 G10 new
(iaog.nterface.On"ick%istener12 <
pubic #oid on"ick1(iaog.nterface diaog0 int item2 <
!oast.make!e-t1getAppication"onte-t120 itemsAitemB0
!oast.%D>4!EFSEOC!2.show129
=
=29
Aert(iaog aert 8 buider.create129
12
"rogressDialog
"rogressDialog
1&
What is "rogressDialog?
A Progress(iaog is an e-tension of the
Aert(iaog cass that can dispay a progress
animation in the form of
> a spinning whee0 for a task with progress that6s
undefined0 or
> a progress bar0 for a task that has a defined
progression.
!he diaog can aso pro#ide buttons0 such as
one to cance a downoad.
1*
Creating a "rogress Bar?
Progress(iaog progress(iaog9
progress(iaog 8 new Progress(iaog1m"onte-t29
progress(iaog.setProgressStye1Progress(iaog.S!/%DFEOC.HO>!A%29
progress(iaog.set:essage1;%oading...;29
progress(iaog.set"anceabe1fase29
1$
Creating a Custom
Creating a Custom
Dialog
Dialog
1+
#teps for Creating a Custom Dialog
Step I1 G "reate an J:% ayout
Step I2 G Set the abo#e ayout as the diaog6s
content #iew and define the content for the
#iew eements
Step I& G Show the diaog
Suppose we want to create a "ustom diaog as
shown beow

1,
#tep $%& Create '() )ayout
K%inear%ayout
-mns:android8;http://schemas.android.com/apk/res/android;
android:id8;LMid/ayoutFroot;
android:orientation8;horiNonta;
android:ayoutFwidth8;fiFparent;
android:ayoutFheight8;fiFparent;
android:padding8;1?dp;
O
K.magePiew android:id8;LMid/image;
android:ayoutFwidth8;wrapFcontent;
android:ayoutFheight8;fiFparent;
android:ayoutFmarginCight8;1?dp;
/O
K!e-tPiew android:id8;LMid/te-t;
android:ayoutFwidth8;wrapFcontent;
android:ayoutFheight8;fiFparent;
android:te-t"oor8;IQQQ;
/O
K/%inear%ayoutO
13
#tep $*& Create Dialog
"onte-t m"onte-t 8 getAppication"onte-t129
(iaog diaog 8 new (iaog1m"onte-t29
diaog.set"ontentPiew1C.ayout.customFdiaog29
diaog.set!ite1;"ustom (iaog;29
!e-tPiew te-t 8 1!e-tPiew2 diaog.findPiew5y.d1C.id.te-t29
te-t.set!e-t1;Eeo0 this is a custom diaogR;29
.magePiew image 8 1.magePiew2 diaog.findPiew5y.d1C.id.image29
image.set.mageCesource1C.drawabe.android29
17


Thank you+
Thank you+
Check JavaPassion.com Coecamps!
Check JavaPassion.com Coecamps!
http!""www.javapassion.com"coecamps
http!""www.javapassion.com"coecamps

Learn with Passion!

Learn with Passion!
#$