Android User Interface

quaintmayoMobile - Wireless

Dec 10, 2013 (3 years and 8 months ago)

91 views

Android
User Interface
CS 301
Peter Kemper
Reference:
Murphy’s Busy Coder’s Guide to Android Development, 5.2 p 89-123
http://developer.android.com/design/get-started/ui-overview.html

http://developer.android.com/guide/topics/ui/index.html
User Interface

covers all aspects of communication with user

traditional:

Input: keyboard, mouse/touchpad

Output: monitor, speakers

recently added:

Input: touchscreen (navigation, soft keyboard)
camera and microphone only for data input

currently added:

Input: motion and voice for control, eye tracking

Output: vibrations
Any ideas about the future?

A brain - computer
interface ?

Example from
spectrum.ieee.org:

Monkeys Use Brain
Interface to Move
and Feel Virtual
Objects
from:
http://spectrum.ieee.org/automaton/robotics/medical-robots/monkeys-use-bidirectional-
brain-machine-interface-to-feel-virtual-objects
Any ideas about the future?

A brain - computer
interface ?

Example from
spectrum.ieee.org:

BrainDriver: A Mind
Controlled Car
from:
http://spectrum.ieee.org/automaton/robotics/robotics-software/braindriver-a-mind-
controlled-car
Any ideas about the future?

A phone - car
interface ?

Example from
spectrum.ieee.org:

Driving a Car With
an iPhone
from:
http://spectrum.ieee.org/automaton/robotics/robotics-software/driving-a-car-with-an-
iphone
video:
http://youtu.be/_x5IziyOcAg
So what are our options?

Input:

audio: speaking, voice recognition

tactile: typing (keyboard,screen), movements on screen

movements: moving device, tilting, rotation

Output:

visual: graphics and text on monitor display

audio: playing tunes, sounds/beeps, speaking

feeling: vibrations

We will focus on graphics here ... the main stream so far
What are our options for what purpose?

Applications: play audio, video; display text/graphics ;
control applications (edit text, forms, make selections)

Issues 1)
navigation
and 2)
selections
to control applications

Show options for selections

Make selections easy

1 out of N: radio buttons

M out of N: check boxes

Pull down menus, spinner ...

Challenge: easy to use for a non-specialist end-consumer
User Interface Challenges

Monitor has limited space

for output:

common tricks to balance this: scrolling, zoom in/out,
tree type structures with refinement (directories),
temporarily enlarging views to ease selection
User Interface Challenges

Monitor has limited space

for output:

common tricks to balance this: scrolling, zoom in/out,
tree type structures with refinement (directories),
temporarily enlarging views to ease selection

for input as touch screen:

finger size constraints size of buttons,

stylus pens for selection better but not always at hand

gesture/symbol recognition must be learned by user

Issues with phones: readability/contrast, very small,
UI Task: Navigation

Action Bar

Tabs

Up vs Back

Navigation Drawer

Notifications
Source:
http://developer.android.com/design/get-started/ui-overview.html
Means for Navigation:
Action Bar

Action Bar:

Dedicated piece of real estate at the top of each screen
that is generally persistent throughout the app.

Makes important actions prominent and accessible in a
predictable way (such as New or Search).

Supports consistent navigation and view switching within
apps.

Reduces clutter by providing an action overflow for rarely
used actions.

Provides a dedicated space for giving your app an identity.
Action Bar
1.
App Icon

Up caret ““ for navigation within screen hierarchy
2.
View control

for switching views (or simple title)
3.
Action buttons

Most important actions (FIT: Frequent, Important,Typical)
4.
Action overflow

all other actions that don’t fit or are rarely used
Source:
http://developer.android.com/design/patterns/actionbar.html
Action Bar: Layout Options

Action Bar can be extended:
Split Action Bar
1.
Main action bar

Up & Icon
2.
Top bar

use tabs /spinner to switch views
3.
Bottom bar

for actions ( and action overflow)
Note: Use common Action Bar Icons for common tasks!
See:
http://developer.android.com/training/basics/actionbar/setting-up.html
Up vs Back

Back
returns to
previously
visited screen

Up
navigates
upward in app
screen hierarchy

Example: Book
title and movie
information
Source:
http://developer.android.com/design/get-started/ui-overview.html
Navigation Drawer

To show a large number of navigation targets

activated by selecting the icon or swiping from left

If less than 4 targets  use tabs instead

To support cross-navigation from lower levels
Source:
http://developer.android.com/design/get-started/ui-overview.html
UI Task: Navigation

Action Bar

Tabs

Up vs Back

Navigation
Drawer

Notifications

direct

indirect
Source:
http://developer.android.com/design/get-started/ui-overview.html
Means for Navigation:
UI Task: Navigation

Action Bar

Tabs

Up vs Back

Navigation
Drawer

Notifications

direct

indirect
Source:
http://developer.android.com/design/get-started/ui-overview.html
Means for Navigation:
UI Basics for Content

Display

Layouts

Frame Layout, Linear Layout, Table Layout,
Relative Layout, Absolute Layout

Widgets

Textview, Button, ImageView, ImageButton, EditText,
EditView, CheckBox, RadioButton, ...

to see them all:
!"#$"#%%!
$&
&'

()*+,-*

./0

/12+

0)32+45621
(

7235-82*

9-13

,4

:-*;231
<,+

5

*235-82*

8-13

6,)1=83>
?33@>""*2A28,@2+'5)*+,-*'6,B"+242+2)62"5)*+,-*"C-*;23"@56D5;2

1=BB5+E'?3B8
(F19-13G-2C
(F19-13G-2C'95E,=3H5+5B1
(F1,8=3295E,=3
(F1,8=3295E,=3'95E,=3H5+5B1
(F1I22DJ5+
(F1I@-))2+
(*5@32+G-2CKL

2M32)*1

(*5@32+N
(*5@32+O,)32M3P2)=0)4,
(8@?5F230)*2M2+
()58,;O8,6D
(++5E(*5@32+KLN
(=3,O,B@8232L2M3G-2C
J512(*5@32+
7-;-358O8,6D
Q*-3L2M3
QM@5)*5F829-13G-2C
QM@5)*5F829-13O,)32M3P2)=0)4,
<-832+
<-832+'<-832+R21=831
<+5B295E,=3
<+5B295E,=3'95E,=3H5+5B1
S5882+E
S5882+E'95E,=3H5+5B1
S+-*G-2C
T25*2+G-2C9-13(*5@32+
T,+-U,)358I6+,88G-2C
H,@=@:-)*,C
H+,;+211J5+
R5*-,J=33,)
R5*-,S+,=@
R5*-,S+,=@'95E,=3H5+5B1
R53-);J5+
R2853-A295E,=3
R2853-A295E,=3'95E,=3H5+5B1
R2B,32G-2C1
R21,=+62O=+1,+(*5@32+
R21,=+62O=+1,+L+22(*5@32+
I6+,882+
I6+,88G-2C
L5F8295E,=3'95E,=3H5+5B1
L5F82R,C
L5F82R,C'95E,=3H5+5B1
L5F:-*;23
L2M3IC-36?2+
L2M3G-2C
L2M3G-2C'I5A2*I3532
L-B2H-6D2+
L,513
L,;;82J=33,)
LC,9-)29-13032B
G-*2,G-2C
G-2C()-B53,+
#V
#V
J512QM@5)*5F829-13(*5@32+
J=33,)
O?26DJ,M
O?26D2*L2M3G-2C
O?+,),B232+
O,B@,=)*J=33,)
O=+1,+(*5@32+
O=+1,+L+22(*5@32+
7532H-6D2+
7-582+<-832+
0B5;2J=33,)
0B5;2IC-36?2+
0B5;2G-2C
9-)25+95E,=3
9-)25+95E,=3'95E,=3H5+5B1
9-13G-2C
9-13G-2C'<-M2*G-2C0)4,
P2*-5O,)3+,882+
P=83-(=3,O,B@8232L2M3G-2C
O,BB5L,D2)-U2+
I22DJ5+
I-B@82(*5@32+
I-B@82O=+1,+(*5@32+
I-B@82O=+1,+L+22(*5@32+
I-B@82QM@5)*5F829-13(*5@32+
I8-*-);7+5C2+
I@-))2+
L5FT,13
L5FT,13'L5FI@26
L5F8295E,=3
G-2C<8-@@2+
G-2CIC-36?2+
W,,BJ=33,)
W,,BO,)3+,81
&'

()*+,-*

./0

/12+

0)32+45621
!"#

$%&

'()

)*#+,-%.
X)2

;,,*

+251,)>

!
"#
"
!
$ %#
&
!
'

()*

+,-'.
"
,
#

"
/

!
0+,1

.',
$
,
%#
'

,1$

2"1-0"-"3'4

5
/012
P,13

2A2+E3?-);

C2

*,

=1-);

YP9

85E,=3

4-821

65)

F2

56?-2A2*

3?+,=;?

Z5A5

6,*2'

T,C2A2+

-3

8,,D1

!"#$%&#'("
3,

D22@

3?2

/0

1@261

-)

5

12@5+532*

32M3

4-82[

+53?2+

3?5)

2BF2**2*

-)

6,*2'
#\
#\
YP9

51

5

S/0

*24-)-3-,)

4,+B53

-1

F26,B-);

B,+2

6,BB,)@8562'

P-6+,1,43]1

)*+"&$,'("

-..(,/#+,%&

0#!12.

3#&42#4"
'3()
[

(*,F2]1

<82M[

5)*

P,U-885]1

5$"!

6&+"!7#/"

3#&42#4"

'$)
35D2

5

1-B-85+

5@@+,56?

3,

3?53

,4

()*+,-*>

@=3

85E,=3

*235-81

-)

5)

YP9

4-82

5)*

@=3

@+,;+5BB-);

-)3288-;2)62

-)

1,=+62

4-821'
The View Class
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
$
&'()

*
+,-(./-

0 123(

4,) 3 ( 5'6 3 2
1 2/,7

89:

:';.<)2
=/6).(

9').2
>?3@3?',-

A)')3

1,/@3(2/);
B.)32

'(3

C'23-

.,D

EF
G
> - H
I/-
)
+ -/-
J?)
EF
3

G
<2;

>
.
-
3(
H
2

I
<
/-
3

)
.

+
,
-
(.
/-

J
3@3
?
.KL3,
)
C;

9'(M

:N

9<(KF;
>.K;(/7F)

O

#%%P

#%%!

>.LL.,2Q'(3R

::>N
4AGBD

!SP

%

!P$TSP%

%

!
U
+,-(./-

J3@3?.K3(2

F))KD""-3@3?.K3(N',-(./-N6.L"/,-3VNF)L?
*N

+,-(./-

0 14

123(

4,)3(5'632
EF3

=/3W

>?'22

EF3

!"#$%&'((
(3K(323,)2

)F3

C'2/6

C</?-/,7

C?.6M

5.(

<23(

/,)3(5'63

6.L
K
.,3,)2N

K

+

!"#$
.66<K/32

'

(36)',7<?'(

'(3'

.,

)F3

26(33,

',-

/2

(32K.,2/C?3

5.(

!"#$%&'
',-

()(&*

+#&!,%&'
N


=/3W

/2

)F3

C'23

6?'22

5.(

!"#$%&'
R

WF/6F

'(3

<23-

).

6(3')3

/,)3('6)/@3

14

6.LK.,3,)2

XC<)).,2R

)3V)

5/3?-2R

3)6NYN

EF
!")
C?
/
)F
C
?
5
( &
F/F
#
#

EF
3

!"
#$
)
*+,-
2<
C
6
?
'22

/
2

)F
3

C
'23

6
?
'22

5
.(

(
)*+,
&
'
R

W
F/
6
F

'(3

/,@/2/C?3

6.,)'/,3(2

)F')

F.?-

.)F3(

=/3W2

X.(

.)F3(

=/3WI(.<K2Y

',-

-35/,3

)F3/(

?';.<)

K(.K3()/32N

Using View
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
#
&'

()*+,-*

./0

/12+

0)32+45621
/1-)7

8-291
!""

#$

%&'

()'*+

),

-

*),.#*

-/'

-//-,0'.

),

-

+),0"'

%/''1

:,;

65)

5**

<-291

2-3=2+

4+,>

6,*2

,+

?@

1A26-4@-)7

5

3+22

,4

<-291

-)

,)2

,+

>,+2

BCD

E5@,;3

4-E21'

F)62

@,;

=5<2

6+2532*

5

3+22

,4

<-291G

3=2+2

5+2

3@A-65EE@

5

429

3@A21

,4

6,>>,)

,A2+53-,)1

@,;

>5@

9-1=

3,

A2+4,+>H

!"#$%

&'(&$'%)$*+
4,+

2I5>AE2

1233-)7

3=2

32I3

,4

5

!"#$%&"'
'

J+,A2+3-21

3=53

5+2

K),9)

53

?;-E*

3->2

65)

?2

123

-)

3=2

BCD

E5@,;3

4-E21'
,
#$%
-(./*+
L=2
4+5>29,+K
9-EE
=5)*E2*
>,<-)7
4,6;1
-)
+21A,)12
3,
;12+
M
M
,
"
#$%

-(./*+
L=2

4+5>29,+K

9-EE

=5)*E2*

>,<-)7

4,6;1

-)

+21A,)12

3,

;12+

-)A;3'

L,

4,+62

4,6;1

3,

5

1A26-4-6

<-29G

65EE

(")*"+$,-.*+/01
0"#$%

/&

1)*%$2$'*+
8-291

5EE,9

6E-2)31

3,

123

E-132)2+1

3=53

9-EE

?2

),3-4-2*

9=2)

1,>23=-)7

-)32+213-)7

=5AA2)1

3,

3=2

<-29'

N,+

2I5>AE2G

5

O;33,)

2IA,121

5

E-132)2+

3,

),3-4@

6E-2)31

9=2)

3=2

?;33,)

-1

6E-6K2*'
3"#$%

4)*)5)1)%6+
:,;

65)

=-*2

,+

1=,9

<-291

;1-)7

+"$%&+&2&3&$4/&5$0
'
&'

()*+,-*

./0

/12+

0)32+45621
(

?+-24

15>AE2

,4

/0

6,>A,)2)31
786(/%*
&
&
7)2$8'

786(/%
(

D-)25+D5@,;3 -1

5

P+,;A8-29 3=53

9-EE

E5@

6=-E*

8-29

2E2>2)31

<2+3-65EE@

,+

=,+-Q,)35EE@'
9$18%)4$

786(/%
(

R2E53-<2D5@,;3 -1

5

8-29P+,;A
3=53

5EE,91

@,;

3,

E5@,;3

6=-E*

2E2>2)31

-)

A,1-3-,)1

+2E53-<2

3,

3=2

A5+2)3

,+

1-?E-)71

2E2>2)31'
:851$

786(/%
(

L5?E2D5@,;3 -1

5

8-29P+,;A 3=53

9-EE

E5@

6=-E*

8-29

2E2>2)31

-)3,

+,91

5)*

6,E;>)1'
Using View
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
#
&'

()*+,-*

./0

/12+

0)32+45621
/1-)7

8-291
!""

#$

%&'

()'*+

),

-

*),.#*

-/'

-//-,0'.

),

-

+),0"'

%/''1

:,;

65)

5**

<-291

2-3=2+

4+,>

6,*2

,+

?@

1A26-4@-)7

5

3+22

,4

<-291

-)

,)2

,+

>,+2

BCD

E5@,;3

4-E21'

F)62

@,;

=5<2

6+2532*

5

3+22

,4

<-291G

3=2+2

5+2

3@A-65EE@

5

429

3@A21

,4

6,>>,)

,A2+53-,)1

@,;

>5@

9-1=

3,

A2+4,+>H

!"#$%

&'(&$'%)$*+
4,+

2I5>AE2

1233-)7

3=2

32I3

,4

5

!"#$%&"'
'

J+,A2+3-21

3=53

5+2

K),9)

53

?;-E*

3->2

65)

?2

123

-)

3=2

BCD

E5@,;3

4-E21'
,
#$%
-(./*+
L=2
4+5>29,+K
9-EE
=5)*E2*
>,<-)7
4,6;1
-)
+21A,)12
3,
;12+
M
M
,
"
#$%

-(./*+
L=2

4+5>29,+K

9-EE

=5)*E2*

>,<-)7

4,6;1

-)

+21A,)12

3,

;12+

-)A;3'

L,

4,+62

4,6;1

3,

5

1A26-4-6

<-29G

65EE

(")*"+$,-.*+/01
0"#$%

/&

1)*%$2$'*+
8-291

5EE,9

6E-2)31

3,

123

E-132)2+1

3=53

9-EE

?2

),3-4-2*

9=2)

1,>23=-)7

-)32+213-)7

=5AA2)1

3,

3=2

<-29'

N,+

2I5>AE2G

5

O;33,)

2IA,121

5

E-132)2+

3,

),3-4@

6E-2)31

9=2)

3=2

?;33,)

-1

6E-6K2*'
3"#$%

4)*)5)1)%6+
:,;

65)

=-*2

,+

1=,9

<-291

;1-)7

+"$%&+&2&3&$4/&5$0
'
&'

()*+,-*

./0

/12+

0)32+45621
(

?+-24

15>AE2

,4

/0

6,>A,)2)31
786(/%*
&
&
7)2$8'

786(/%
(

D-)25+D5@,;3 -1

5

P+,;A8-29 3=53

9-EE

E5@

6=-E*

8-29

2E2>2)31

<2+3-65EE@

,+

=,+-Q,)35EE@'
9$18%)4$

786(/%
(

R2E53-<2D5@,;3 -1

5

8-29P+,;A
3=53

5EE,91

@,;

3,

E5@,;3

6=-E*

2E2>2)31

-)

A,1-3-,)1

+2E53-<2

3,

3=2

A5+2)3

,+

1-?E-)71

2E2>2)31'
:851$

786(/%
(

L5?E2D5@,;3 -1

5

8-29P+,;A 3=53

9-EE

E5@

6=-E*

8-29

2E2>2)31

-)3,

+,91

5)*

6,E;>)1'
Aside: int visibility
One of
VISIBLE
,
INVISIBLE
, or
GONE
.
Samples: Layouts
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
#
&'

()*+,-*

./0

/12+

0)32+45621
/1-)7

8-291
!""

#$

%&'

()'*+

),

-

*),.#*

-/'

-//-,0'.

),

-

+),0"'

%/''1

:,;

65)

5**

<-291

2-3=2+

4+,>

6,*2

,+

?@

1A26-4@-)7

5

3+22

,4

<-291

-)

,)2

,+

>,+2

BCD

E5@,;3

4-E21'

F)62

@,;

=5<2

6+2532*

5

3+22

,4

<-291G

3=2+2

5+2

3@A-65EE@

5

429

3@A21

,4

6,>>,)

,A2+53-,)1

@,;

>5@

9-1=

3,

A2+4,+>H

!"#$%

&'(&$'%)$*+
4,+

2I5>AE2

1233-)7

3=2

32I3

,4

5

!"#$%&"'
'

J+,A2+3-21

3=53

5+2

K),9)

53

?;-E*

3->2

65)

?2

123

-)

3=2

BCD

E5@,;3

4-E21'
,
#$%
-(./*+
L=2
4+5>29,+K
9-EE
=5)*E2*
>,<-)7
4,6;1
-)
+21A,)12
3,
;12+
M
M
,
"
#$%

-(./*+
L=2

4+5>29,+K

9-EE

=5)*E2*

>,<-)7

4,6;1

-)

+21A,)12

3,

;12+

-)A;3'

L,

4,+62

4,6;1

3,

5

1A26-4-6

<-29G

65EE

(")*"+$,-.*+/01
0"#$%

/&

1)*%$2$'*+
8-291

5EE,9

6E-2)31

3,

123

E-132)2+1

3=53

9-EE

?2

),3-4-2*

9=2)

1,>23=-)7

-)32+213-)7

=5AA2)1

3,

3=2

<-29'

N,+

2I5>AE2G

5

O;33,)

2IA,121

5

E-132)2+

3,

),3-4@

6E-2)31

9=2)

3=2

?;33,)

-1

6E-6K2*'
3"#$%

4)*)5)1)%6+
:,;

65)

=-*2

,+

1=,9

<-291

;1-)7

+"$%&+&2&3&$4/&5$0
'
&'

()*+,-*

./0

/12+

0)32+45621
(

?+-24

15>AE2

,4

/0

6,>A,)2)31
786(/%*
&
&
7)2$8'

786(/%
(

D-)25+D5@,;3 -1

5

P+,;A8-29 3=53

9-EE

E5@

6=-E*

8-29

2E2>2)31

<2+3-65EE@

,+

=,+-Q,)35EE@'
9$18%)4$

786(/%
(

R2E53-<2D5@,;3 -1

5

8-29P+,;A
3=53

5EE,91

@,;

3,

E5@,;3

6=-E*

2E2>2)31

-)

A,1-3-,)1

+2E53-<2

3,

3=2

A5+2)3

,+

1-?E-)71

2E2>2)31'
:851$

786(/%
(

L5?E2D5@,;3 -1

5

8-29P+,;A 3=53

9-EE

E5@

6=-E*

8-29

2E2>2)31

-)3,

+,91

5)*

6,E;>)1'
Samples: Widgets
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
&
'(

)*+,-.+

/01

023,

1*43,56732
)

8,.35

269:;3

-5

01

7-9:-*3*42
!"##$%&'($)
*(+,$-.
!"##$%&'($)
/"0*(+,$-
12(33$%
<
<
4"-$5(67$%
)

!"#$%&'($
.2

6

=.+>34

4?64

6;;-=2

4?3

@23,

4-

23;374

6

9-*4?A

+6B

6*+

B36,(
89%:

;93-%9#.
1*7;@+32

6

C6,.34B

-5

4B:.76;

5-,9

=.+>342A

;.D3E

&)"*$

+,##-./0

#$1#

2&$34/0

'5$'(+-1$/
6*+

6"4&-

+,##-./
(
'(

)*+,-.+

/01

023,

1*43,56732
)

8,.35

269:;3

-5

01

7-9:-*3*42
*$0'($)
<"2'($)
F
F
=>-9;9:2#$-$/$?-'($)
14

.2

6

C3,2.-*

-5

4?3

74&#8$1#
=.+>34

4?64

=.;;

:,-C.+3

6@4-

7-9:;343

2@>>324.-*2

62

4?3

@23,

4B:32(

G?3

2@>>324.-*2

6,3

3H4,6743+

5,-9

6

7-;;374.-*

-5

24,.*>2(
@(.-'($)
)

9&/#:&$;
.2

6

I.3=

4?64

2?-=2

.4392

.*

6

C3,4.76;;B

27,-;;.*>

;.24(

G?3

.4392

6,3

67J@.,3+

5,-9

6

9&/#<4"=#$6
(
Samples: UI Components
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
&
'(

)*+,-.+

/01

023,

1*43,56732
)

8,.35

269:;3

-5

01

7-9:-*3*42
!"##$%&'($)
*(+,$-.
!"##$%&'($)
/"0*(+,$-
12(33$%
<
<
4"-$5(67$%
)

!"#$%&'($
.2

6

=.+>34

4?64

6;;-=2

4?3

@23,

4-

23;374

6

9-*4?A

+6B

6*+

B36,(
89%:

;93-%9#.
1*7;@+32

6

C6,.34B

-5

4B:.76;

5-,9

=.+>342A

;.D3E

&)"*$

+,##-./0

#$1#

2&$34/0

'5$'(+-1$/
6*+

6"4&-

+,##-./
(
'(

)*+,-.+

/01

023,

1*43,56732
)

8,.35

269:;3

-5

01

7-9:-*3*42
*$0'($)
<"2'($)
F
F
=>-9;9:2#$-$/$?-'($)
14

.2

6

C3,2.-*

-5

4?3

74&#8$1#
=.+>34

4?64

=.;;

:,-C.+3

6@4-

7-9:;343

2@>>324.-*2

62

4?3

@23,

4B:32(

G?3

2@>>324.-*2

6,3

3H4,6743+

5,-9

6

7-;;374.-*

-5

24,.*>2(
@(.-'($)
)

9&/#:&$;
.2

6

I.3=

4?64

2?-=2

.4392

.*

6

C3,4.76;;B

27,-;;.*>

;.24(

G?3

.4392

6,3

67J@.,3+

5,-9

6

9&/#<4"=#$6
(
UI Tree-Type Hierarchy

XML formatted UI description implies a tree-type hierarchy

HierarchyViewer tool displays it:
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
&
'(

)*+,-.+

/01

023,

1*43,56732
)*

3869:;3

!"#$%
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
Button
xmlns:android
=
"
http://schemas android com/apk/res/android
"
xmlns:android
http://schemas
.
android
.
com/apk/res/android
android:id
=
"@+id/myButton"
android:text
=
""
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
/>
<=3

,396.*.*>

644,.?@432

6,3

:,-:3,4.32

-5

4=.2

A@44-*

.*246*73B

!"#$%&#'()*(
.*+.76432

4=3

.*.4.6;

4384

4-

?3

+.2:;6C3+

-*

4=3

?@44-*

5673

D.*

4=.2

7623E

$$
$$
6*

39:4C

24,.*>F

!"#$%&#'+!,%-(./&#(0
6*+

!"#$%&#'+!,%-(.0)&10(
43;;

)*+,-.+

4-

=6G3

4=3

?@44-*H2

I.+4=

6*+

=3.>=4

5.;;

4=3

J:6,3*4K

7-*46.*3,E

.*

4=.2

7623

4=3

3*4.,3

27,33*(
'(

)*+,-.+

/01

023,

1*43,56732
01

L.3,6,7=C
$#
$#
$( <=3

&'()*)!+,-'(.()
+.2:;6C2

6;;

4=3

01

3;393*42

-*

4=3

27,33*(

#( 14

.*7;@+32

4=3

4-:

76:4.-*

62

/(0$-'(.
=3;+

.*

.42

-I*

1)*2(3*,"4$
E

62

I3;;

62

-@,

A@44-*

.*

.42

M,693N6C-@(

O( A-4=

6,3

:6,4

-5

6

=.>=3,

3'#(*)3*,"4$
I=.7=

,3*+3,2

6;;

3;393*42

-5

4=3

5+"#(6'#7".-'(.
(
Android Layouts
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
&
'(

)*+,-.+

/01

023,

1*43,56732
)*+,-.+

869-:42
$(;<3

=-24

7-==-*

>69

4-

+35.*3

9-:,

?69-:4

6*+

3@A,322

4<3

B.3>

<.3,6,7<9
.2
>.4<
6*
CD8
?69-:4
5.?3
<.3,6,7<9

.2

>.4<

6*

CD8

?69-:4

5.?3
(

#( CD8

-553,2

6

<:=6*

,36+6E?3

24,:74:,3

5-,

4<3

?69-:4F

=:7<

?.G3

H;D8(
I( J67<

3?3=3*4

.*

CD8

.2

3.4<3,

6

!"#$
-,

!"#$%&'()
-EK374

$I
$I
'(

)*+,-.+

/01

023,

1*43,56732
)*+,-.+

869-:42
!"#$%&'"()

*+,

-$$%".&*"/(0#

1",2
;<3

)*+,-.+

01

L,6=3>-,G

A6.*42

4<3

27,33*

E9

>6?G.*M

4<3

N.3>

4,33

E9

62G.*M

367<

7-=A-*3*4

4-

+,6>

.423?5

.*

6

)&#

'&*#&

+&,-#&.,/

>69
0
1*

-4<3,

>-,+2F

367<

7-=A-*3*4

+,6>2

.423?5

6*+

4<3*

62G2

367<

-5

.42

7<.?+,3*

4-

+-

4<3

26=3(
O<3*
4<3
><-?3
4,33
<62
E33*
,3*+3,3+
4<3
2=6??3,
*3243+
7-=A-*3*42
$'
$'
O<3*

4<3

><-?3

4,33

<62

E33*

,3*+3,3+
F

4<3

2=6??3,
F

*3243+

7-=A-*3*42

4<64

6,3

4<3

?36B32

-5

4<3

4,33

/6*+

4<64

>3,3F

4<3,35-,3F

A6.*43+

?643,

/
6AA36,

4-

E3

+,6>*

-*

4-A

-5

4<3

7-=A-*3*42

4<64

6,3

*36,3,

4-

4<3

,--4

6*+

4<64

>3,3

A6.*43+

36,?.3,(
1##2

34*&'"*

5 3))/"6,+"'4

7#-#/')8#4+9

:;

<0

<'=#&.

#+

,/0

>?<#"//;

@(:0

ABBC9

D1EF

CGH

B

ICJ

IAKLG

B
see:
http://developer.android.com/training/basics/firstapp/building-ui.html
for tutorial steps
Android Layouts
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
&
'(

)*+,-.+

/01

023,

1*43,56732
)*+,-.+

869-:42
$(;<3

=-24

7-==-*

>69

4-

+35.*3

9-:,

?69-:4

6*+

3@A,322

4<3

B.3>

<.3,6,7<9
.2
>.4<
6*
CD8
?69-:4
5.?3
<.3,6,7<9

.2

>.4<

6*

CD8

?69-:4

5.?3
(

#( CD8

-553,2

6

<:=6*

,36+6E?3

24,:74:,3

5-,

4<3

?69-:4F

=:7<

?.G3

H;D8(
I( J67<

3?3=3*4

.*

CD8

.2

3.4<3,

6

!"#$
-,

!"#$%&'()
-EK374

$I
$I
'(

)*+,-.+

/01

023,

1*43,56732
)*+,-.+

869-:42
!"#$%&'"()

*+,

-$$%".&*"/(0#

1",2
;<3

)*+,-.+

01

L,6=3>-,G

A6.*42

4<3

27,33*

E9

>6?G.*M

4<3

N.3>

4,33

E9

62G.*M

367<

7-=A-*3*4

4-

+,6>

.423?5

.*

6

)&#

'&*#&

+&,-#&.,/

>69
0
1*

-4<3,

>-,+2F

367<

7-=A-*3*4

+,6>2

.423?5

6*+

4<3*

62G2

367<

-5

.42

7<.?+,3*

4-

+-

4<3

26=3(
O<3*
4<3
><-?3
4,33
<62
E33*
,3*+3,3+
4<3
2=6??3,
*3243+
7-=A-*3*42
$'
$'
O<3*

4<3

><-?3

4,33

<62

E33*

,3*+3,3+
F

4<3

2=6??3,
F

*3243+

7-=A-*3*42

4<64

6,3

4<3

?36B32

-5

4<3

4,33

/6*+

4<64

>3,3F

4<3,35-,3F

A6.*43+

?643,

/
6AA36,

4-

E3

+,6>*

-*

4-A

-5

4<3

7-=A-*3*42

4<64

6,3

*36,3,

4-

4<3

,--4

6*+

4<64

>3,3

A6.*43+

36,?.3,(
1##2

34*&'"*

5 3))/"6,+"'4

7#-#/')8#4+9

:;

<0

<'=#&.

#+

,/0

>?<#"//;

@(:0

ABBC9

D1EF

CGH

B

ICJ

IAKLG

B
Common Layouts
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
!
&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
<=2+2

5+2

4->2

?51-6

3:@21

,4

95:,;31A

!
"#
$ % &#
'(%
*
)( % &
!
*+,-.

"#
/-+*.

$
-
%
+
&#
0-.

'
+
(%
-.

5)
*

)(
12
%
3
&
-4
54

!*+,-"+623&
B+58295:,;3 -1

3=2

1-8@C213

3:@2

,4

C5:,;3

,?D263'

03E1

?51-65CC:

5

!"#$%

&'#()

*$

+*,-

&(-))$
3=53

:,;

65)

C532+

4-CC

F-3=

5

1-)GC2

,?D263

H4,+

2 I 5 8@ C 2 J

5

@-63;+2

3=53

:,;ECC

1F5@

-)

5)*

,;3'

$K
$K
(CC

6=-C*

2C282)31

,4

3=2

B+58295:,;3 5+2

'.$$)/

0*

01)

0*'

")20

(*-$)-

*2

01)

&(-))$
L

:,;

65)),3

1@26-4:

5

*-442+2)3

C,653-,)

4,+

5

6=-C*

>-2F'

M;?12N;2)3

6=-C*

>-2F1

F-CC

1-8@C:

?2

*+5F)

,>2+

@+2>-,;1

,)21J

@5+3-5CC:

,+

3,35CC:

,?16;+-)G

3=28

O;)C211

3=2

)2F2+

,?D263

-1

3+5)1@5+2)3P'

&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
74

"#/-+*"+623&
"#/-+*"+623&
5C-G)1

5CC

6=-C*+2)

-)

5

1-)GC2

*-+263-,)

H
3)-0.(#""+
,+

1*-.4*$0#""+
*2@2)*-)G

,)

3=2

5)*+,-*A,+-2)353-,)
533+-?;32'

(CC

6=-C*+2)

5+2

1356Q2*

,)2

5432+

3=2

,3=2+J

1,

5

3)-0.(#"
C-13

F-CC

,)C:

=5>2

,)2

6=-C*

@2+

+,FJ

),

85332+

=,F

F-*2

3=2:

5+2J

5)*

5

1*-.4*$0#"
C-13

F-CC

,)C:

?2

,)2

+,F

=-G=

O3=2

=2-G=3

,4

3=2

35CC213

6=-C*J

@C;1

@5**-)GP'

$R
$R
(

9-)25+95:,;3 +21@2631

5#-6.$
1

?23F22)

6=-C*+2)

5)*

3=2

6-#3.0+
O+-G=3J

62)32+J

,+

C243

5C-G)82)3P

,4

256=

6=-C*'

Common Layouts
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
!
&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
<=2+2

5+2

4->2

?51-6

3:@21

,4

95:,;31A

!
"#
$ % &#
'(%
*
)( % &
!
*+,-.

"#
/-+*.

$
-
%
+
&#
0-.

'
+
(%
-.

5)
*

)(
12
%
3
&
-4
54

!*+,-"+623&
B+58295:,;3 -1

3=2

1-8@C213

3:@2

,4

C5:,;3

,?D263'

03E1

?51-65CC:

5

!"#$%

&'#()

*$

+*,-

&(-))$
3=53

:,;

65)

C532+

4-CC

F-3=

5

1-)GC2

,?D263

H4,+

2 I 5 8@ C 2 J

5

@-63;+2

3=53

:,;ECC

1F5@

-)

5)*

,;3'

$K
$K
(CC

6=-C*

2C282)31

,4

3=2

B+58295:,;3 5+2

'.$$)/

0*

01)

0*'

")20

(*-$)-

*2

01)

&(-))$
L

:,;

65)),3

1@26-4:

5

*-442+2)3

C,653-,)

4,+

5

6=-C*

>-2F'

M;?12N;2)3

6=-C*

>-2F1

F-CC

1-8@C:

?2

*+5F)

,>2+

@+2>-,;1

,)21J

@5+3-5CC:

,+

3,35CC:

,?16;+-)G

3=28

O;)C211

3=2

)2F2+

,?D263

-1

3+5)1@5+2)3P'

&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
74

"#/-+*"+623&
"#/-+*"+623&
5C-G)1

5CC

6=-C*+2)

-)

5

1-)GC2

*-+263-,)

H
3)-0.(#""+
,+

1*-.4*$0#""+
*2@2)*-)G

,)

3=2

5)*+,-*A,+-2)353-,)
533+-?;32'

(CC

6=-C*+2)

5+2

1356Q2*

,)2

5432+

3=2

,3=2+J

1,

5

3)-0.(#"
C-13

F-CC

,)C:

=5>2

,)2

6=-C*

@2+

+,FJ

),

85332+

=,F

F-*2

3=2:

5+2J

5)*

5

1*-.4*$0#"
C-13

F-CC

,)C:

?2

,)2

+,F

=-G=

O3=2

=2-G=3

,4

3=2

35CC213

6=-C*J

@C;1

@5**-)GP'

$R
$R
(

9-)25+95:,;3 +21@2631

5#-6.$
1

?23F22)

6=-C*+2)

5)*

3=2

6-#3.0+
O+-G=3J

62)32+J

,+

C243

5C-G)82)3P

,4

256=

6=-C*'

Common Layouts
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
$%
&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
!"

#$%&'(#')*+,
<,;
85:
533+-=;32
5
!"#$%&
3,
6>-?*+2)
,4
5
9-)25+95:,;3
<,;

85:

533+-=;32

5

!"#$%&
3,

6>-?*+2)

,4

5

9-)25+95:,;3
'

@2-A>3

A-B21

5)

C-8D,+35)62C

B5?;2

3,

5

B-2EF

5)*

5??,E1

-3

3,

2GD5)*

3,

4-??

5):

+285-)-)A

1D562

-)

3>2

D5+2)3

B-2E'

-.'/01&2
H>2

4,??,E-)A

3E,

4,+81

+2D+212)3

5

9-)25+95:,;3
E-3>

5

123

,4

2?282)31I

5

=;33,)F

1,82

?5=2?1

5)*

32G3

=,G21'

H>2

32G3

=,G21

>5B2

3>2-+

E-*3>

123

3,

'#(()*+,"-&
J

,3>2+

2?282)31

5+2

123

3,

!,+*)./-&"-&
'

H>2

A+5B-3:F

=:

*245;?3F

-1

?243'

$!
$!
H>2

*-442+2)62

=23E22)

3>2

3E,

B2+1-,)1

,4

3>2

4,+8

-1

3>53

3>2

4,+8

,)

3>2

?243

>51

E2-A>3

B5?;21

;)123

K
3
=:

*245;?3LF

E>-?2

3>2

4,+8

,)

3>2

+-A>3

>51

3>2

6,882)31

32G3

=,G

E2-A>3

123

3,

4
'

04

3>2

M582

32G3=,G

>5*

5?1,

=22)

123

3,

$F

3>2

M582

5)*

7,882)31

32G3

=,G21

E,;?*

=2

3>2

1582

>2-A>3'
&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
5"

6'71&#')*+,
$
H5=?295:,;3
D,1-3-,)1
-31
6>-?*+2)
-)3,
+,E1
5)*
6,?;8)1
$
'
H5=?295:,;3
D,1-3-,)1

-31

6>-?*+2)

-)3,

+,E1
5)*

6,?;8)1
'

#'H5=?295:,;3 6,)35-)2+1

*,

),3

*-1D?5:

=,+*2+

?-)21

4,+

3>2-+

+,E1F

6,?;8)1F

,+

62??1'

N'H>2

35=?2

E-??

>5B2

+0

1+-2

./(31-0

+0

&%"

,/!

!#&%

&%"

1/0&

."((0
'

&'(

35=?2

65)

?25B2

62??1

28D3:F

=;3

."((0

.+--/&

0*+-

./(31-0
F

51

3>2:

65)

-)

OHP9'
45 6+7("8/!
,=Q2631

5+2

3>2

6>-?*

B-2E1

,4

5

H5=?295:,;3 K256>

H5=?2R,E*24-)21

5

1-)A?2

+,E

-)

3>2

35=?2L'

#%
#%
S'T56>

+,E

>51

U2+,

,+

8,+2

62??1F

256>

,4

E>-6>

-1

*24-)2*

=:

5):

V-)*

,4

,3>2+

W-2E'

X,F

3>2

62??1

,4

5

+,E

85:

=2

6,8D,12*

,4

5

B5+-23:

,4

W-2E

,=Q2631F

?-V2

085A2W-2E,+

H2G3W-2E,=Q2631'

Y'(

62??

85:

5?1,

=2

5

W-2EZ+,;D,=Q263

K4,+

2G58D?2F

:,;

65)

)213

5),3>2+

H5=?295:,;3 51

5

62??L'
Common Layouts: Table Layouts
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
$%
&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
!"

#$%&'(#')*+,
<,;
85:
533+-=;32
5
!"#$%&
3,
6>-?*+2)
,4
5
9-)25+95:,;3
<,;

85:

533+-=;32

5

!"#$%&
3,

6>-?*+2)

,4

5

9-)25+95:,;3
'

@2-A>3

A-B21

5)

C-8D,+35)62C

B5?;2

3,

5

B-2EF

5)*

5??,E1

-3

3,

2GD5)*

3,

4-??

5):

+285-)-)A

1D562

-)

3>2

D5+2)3

B-2E'

-.'/01&2
H>2

4,??,E-)A

3E,

4,+81

+2D+212)3

5

9-)25+95:,;3
E-3>

5

123

,4

2?282)31I

5

=;33,)F

1,82

?5=2?1

5)*

32G3

=,G21'

H>2

32G3

=,G21

>5B2

3>2-+

E-*3>

123

3,

'#(()*+,"-&
J

,3>2+

2?282)31

5+2

123

3,

!,+*)./-&"-&
'

H>2

A+5B-3:F

=:

*245;?3F

-1

?243'

$!
$!
H>2

*-442+2)62

=23E22)

3>2

3E,

B2+1-,)1

,4

3>2

4,+8

-1

3>53

3>2

4,+8

,)

3>2

?243

>51

E2-A>3

B5?;21

;)123

K
3
=:

*245;?3LF

E>-?2

3>2

4,+8

,)

3>2

+-A>3

>51

3>2

6,882)31

32G3

=,G

E2-A>3

123

3,

4
'

04

3>2

M582

32G3=,G

>5*

5?1,

=22)

123

3,

$F

3>2

M582

5)*

7,882)31

32G3

=,G21

E,;?*

=2

3>2

1582

>2-A>3'
&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
5"

6'71&#')*+,
$
H5=?295:,;3
D,1-3-,)1
-31
6>-?*+2)
-)3,
+,E1
5)*
6,?;8)1
$
'
H5=?295:,;3
D,1-3-,)1

-31

6>-?*+2)

-)3,

+,E1
5)*

6,?;8)1
'

#'H5=?295:,;3 6,)35-)2+1

*,

),3

*-1D?5:

=,+*2+

?-)21

4,+

3>2-+

+,E1F

6,?;8)1F

,+

62??1'

N'H>2

35=?2

E-??

>5B2

+0

1+-2

./(31-0

+0

&%"

,/!

!#&%

&%"

1/0&

."((0
'

&'(

35=?2

65)

?25B2

62??1

28D3:F

=;3

."((0

.+--/&

0*+-

./(31-0
F

51

3>2:

65)

-)

OHP9'
45 6+7("8/!
,=Q2631

5+2

3>2

6>-?*

B-2E1

,4

5

H5=?295:,;3 K256>

H5=?2R,E*24-)21

5

1-)A?2

+,E

-)

3>2

35=?2L'

#%
#%
S'T56>

+,E

>51

U2+,

,+

8,+2

62??1F

256>

,4

E>-6>

-1

*24-)2*

=:

5):

V-)*

,4

,3>2+

W-2E'

X,F

3>2

62??1

,4

5

+,E

85:

=2

6,8D,12*

,4

5

B5+-23:

,4

W-2E

,=Q2631F

?-V2

085A2W-2E,+

H2G3W-2E,=Q2631'

Y'(

62??

85:

5?1,

=2

5

W-2EZ+,;D,=Q263

K4,+

2G58D?2F

:,;

65)

)213

5),3>2+

H5=?295:,;3 51

5

62??L'
Common Layouts: Table Layouts
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
$$
&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
<=>8?

@2+1-,)AB$'%B

2)6,*-)CAB;34

DB=E

<F5G?295:,;3
>8?)1H5)*+,-*ABI33JH""16I2851'
5)*+,-*'6,8"5JK"+21"5)*+,-*B
* -*?-* I
B
4-??
B
!"#$%&"'()* +,"-.$%
FI2

4,??,L-)C

158J?2

?5:,;3

I51

3L,
+,L1
5)*
3L,
62??1
-)
256I
5)
*
+,
-*
H
?
5:,;3ML
-*
3
I
A
B
4-??
MJ5+2)3
B

5)*+,-*H?5:,;3MI2-CI3AB4-??MJ5+2)3B

5)*+,-*H13+236I7,?;8)1AB$BE

<F5G?2N,LE

<F2>3O-2L 5)*+,-*H32>3ABPJ2)QB

5)*+,-*HJ5**-)CABR*-JB

"E

<F2>3O-2L 5)*+,-*H32>3AB73+?

PB

5)*+,-*HC+5@-3:AB+-CI3B

5)*+,-*HJ5**-)CABR*-JB

"E

<"
F5G?2N,L
E
3L,

+,L1

5)*

3L,

62??1

-)

256I
'

FI2

566,8J5):-)C

16+22)1I,3

1I,L1

3I2

+21;?3S

L-3I

62??

G,+*2+1

*-1J?5:2*

51

*,332*

?-)21

T
!""#"

$%&

'()*!+

#$$#,-
U'

#$
#$
<"
F5G?2N,L
E

<F5G?2N,LE

<F2>3O-2L 5)*+,-*H32>3ABV5@2

(1QB

5)*+,-*HJ5**-)CABR*-JB

"E

<F2>3O-2L 5)*+,-*H32>3AB73+?

VI-43

VB

5)*+,-*HC+5@-3:AB+-CI3B

5)*+,-*HJ5**-)CABR*-JB

"E

<"F5G?2N,LE

<"F5G?295:,;3E

&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
/0

1%$"*23%&"'()*
$
N2?53-@295:,;3
?231
6I-?*
@-2L1
1J26-4:
3I2-+
.%)(-(%/
&#+!-('#
-%
-0#
.!&#/-
$
'
N2?53-@295:,;3
?231

6I-?*

@-2L1

1J26-4:

3I2-+

.%)(-(%/

&#+!-('#

-%

-0#

.!&#/-

'(#1

%&

-%

#!,0

%-0#&
T1J26-4-2*

G:

0WU'

#'X,;

65)

5?-C)

3L,

2?282)31

G:

&(20-

3%&"#&
S

,+

85K2

,)2

3#+%1
5),3I2+S

,#/-#&#"
-)

3I2

16+22)S

,#/-#&#"

+#$-
S

5)*

1,

,)'

R'Y?282)31

5+2

&#/"#&#"

(/

-0#

%&"#&

2('#/
S

1,

-4

3I2

4-+13

2?282)3

-1

62)32+2*

-)

3I2

16+22)S

,3I2+

2?282)31

5?-C)-)C

3I2812?@21

3,

3I53

2?282)3

L-??

G2

##
##
5?-C)2*

+2?53-@2

3,

16+22)

62)32+'

&'(?1,S

G265;12

,4

3I-1

,+*2+-)CS

-4

;1-)C

Z[9

3,

1J26-4:

3I-1

?5:,;3S

3I2

2?282)3

3I53

:,;

L-??

+242+2)62

T-)

,+*2+

3,

J,1-3-,)

,3I2+

@-2L

,G\2631U

8;13

G2

?-132*

-)

3I2

Z[9

4-?2

G24,+2

:,;

+242+

3,

-3

4+,8

3I2

,3I2+

@-2L1

@-5

-31

+242+2)62

0W'

Common Layouts: Relative Layouts
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
$$
&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
<=>8?

@2+1-,)AB$'%B

2)6,*-)CAB;34

DB=E

<F5G?295:,;3
>8?)1H5)*+,-*ABI33JH""16I2851'
5)*+,-*'6,8"5JK"+21"5)*+,-*B
* -*?-* I
B
4-??
B
!"#$%&"'()* +,"-.$%
FI2

4,??,L-)C

158J?2

?5:,;3

I51

3L,
+,L1
5)*
3L,
62??1
-)
256I
5)
*
+,
-*
H
?
5:,;3ML
-*
3
I
A
B
4-??
MJ5+2)3
B

5)*+,-*H?5:,;3MI2-CI3AB4-??MJ5+2)3B

5)*+,-*H13+236I7,?;8)1AB$BE

<F5G?2N,LE

<F2>3O-2L 5)*+,-*H32>3ABPJ2)QB

5)*+,-*HJ5**-)CABR*-JB

"E

<F2>3O-2L 5)*+,-*H32>3AB73+?

PB

5)*+,-*HC+5@-3:AB+-CI3B

5)*+,-*HJ5**-)CABR*-JB

"E

<"
F5G?2N,L
E
3L,

+,L1

5)*

3L,

62??1

-)

256I
'

FI2

566,8J5):-)C

16+22)1I,3

1I,L1

3I2

+21;?3S

L-3I

62??

G,+*2+1

*-1J?5:2*

51

*,332*

?-)21

T
!""#"

$%&

'()*!+

#$$#,-
U'

#$
#$
<"
F5G?2N,L
E

<F5G?2N,LE

<F2>3O-2L 5)*+,-*H32>3ABV5@2

(1QB

5)*+,-*HJ5**-)CABR*-JB

"E

<F2>3O-2L 5)*+,-*H32>3AB73+?

VI-43

VB

5)*+,-*HC+5@-3:AB+-CI3B

5)*+,-*HJ5**-)CABR*-JB

"E

<"F5G?2N,LE

<"F5G?295:,;3E

&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
/0

1%$"*23%&"'()*
$
N2?53-@295:,;3
?231
6I-?*
@-2L1
1J26-4:
3I2-+
.%)(-(%/
&#+!-('#
-%
-0#
.!&#/-
$
'
N2?53-@295:,;3
?231

6I-?*

@-2L1

1J26-4:

3I2-+

.%)(-(%/

&#+!-('#

-%

-0#

.!&#/-

'(#1

%&

-%

#!,0

%-0#&
T1J26-4-2*

G:

0WU'

#'X,;

65)

5?-C)

3L,

2?282)31

G:

&(20-

3%&"#&
S

,+

85K2

,)2

3#+%1
5),3I2+S

,#/-#&#"
-)

3I2

16+22)S

,#/-#&#"

+#$-
S

5)*

1,

,)'

R'Y?282)31

5+2

&#/"#&#"

(/

-0#

%&"#&

2('#/
S

1,

-4

3I2

4-+13

2?282)3

-1

62)32+2*

-)

3I2

16+22)S

,3I2+

2?282)31

5?-C)-)C

3I2812?@21

3,

3I53

2?282)3

L-??

G2

##
##
5?-C)2*

+2?53-@2

3,

16+22)

62)32+'

&'(?1,S

G265;12

,4

3I-1

,+*2+-)CS

-4

;1-)C

Z[9

3,

1J26-4:

3I-1

?5:,;3S

3I2

2?282)3

3I53

:,;

L-??

+242+2)62

T-)

,+*2+

3,

J,1-3-,)

,3I2+

@-2L

,G\2631U

8;13

G2

?-132*

-)

3I2

Z[9

4-?2

G24,+2

:,;

+242+

3,

-3

4+,8

3I2

,3I2+

@-2L1

@-5

-31

+242+2)62

0W'

Common Layouts: Relative Layouts
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
$#
&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
!"

#$%&'()$*&+,-'
<
=>2
*24-)2*
?2@53-A295:,;3
B5+58232+1
5+2
C
5)*+,-*D@5:,;3
E
D
<
'
=>2

*24-)2*

?2@53-A295:,;3
B5+58232+1

5+2

C
5)*+,-*D@5:,;3
F'''
E

D


G-*3>H

>2-I>3H


J2@,GH

5J,A2

5@-I)=,BH

5@-I)K5+2)3=,BH


5@-I)L,33,8H

5@-I)K5+2)3L,33,8

3,9243M4H

3,?-I>3M4

B5**-)I

NL,33,8O9243O?-I>3O=,BPH

5)*

Q,+

2R58B@2H

511-I)-)I

3>2

B5+58232+

&./0,(/1%&+,-'2',*$3'435678(/9:+2;-'',.<
3,

5

=2R3S-2GG,;@*

B@562

3>2

=2R3S-2G 3,

3>2

@243

,4

3>2

S-2G

G-3>

3>2

0T

!"#$%&&'(
#U
#U

85+I-)

NL,33,8O9243O?-I>3O=,BP'

&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
VWR8@

A2+1-,)XY$'%Y

2)6,*-)IXY;34

ZYW[
V?2@53-A295:,;3 R8@)1D5)*+,-*XY>33BD""16>2851'5)*+,-*'6,8"5B\"+21"5)*+,-*
5)*+,-*D@5:,;3FG-*3>XY4-@@FB5+2)3Y

5)*+,-*D@5:,;3F>2-I>3XYG+5BF6,)32)3Y
5)*+,-*DJ56\I+,;)*
Y
]
*+5G5J@2
"J@;2
Y
#$%&'()$*&+,-'
=>&:?%$
5)*+,-*DJ56\I+,;)*
X
]
*+5G5J@2
"J@;2
5)*+,-*DB5**-)IXY$%BRY

[
V=2R3S-2G 5)*+,-*D-*XY]^-*"@5J2@Y

5)*+,-*D@5:,;3FG-*3>XY4-@@FB5+2)3Y

5)*+,-*D@5:,;3F>2-I>3XYG+5BF6,)32)3Y

5)*+,-*D32R3XY=:B2

>2+2DY

"[
V_*-3=2R3 5)*+,-*D-*XY]^-*"2)3+:Y

5)*+,-*D@5:,;3FG-*3>XY4-@@FB5+2)3Y

5)*+,-*D@5:,;3F>2-I>3XYG+5BF6,)32)3Y

#$%&'()$*&+,-'
=>&:?%$
=>2

2R58B@2

J2@,G

1>,G1

5)

`a9

4-@2

5)*

3>2

+21;@3-)I

16+22)

-)

3>2

/0'

b,32

3>53

3>2

533+-J;321

3>53

+242+

3,

+2@53-A2

2@282)31

C2'I'H

)*"'%&#&'+,-&
E

+242+

3,

3>2

0T

;1-)I

3>2

1:)35R

,4

5

+2@53-A2

+21,;+62

C
./01/0
E'

#&
#&
5)*+,-*DJ56\I+,;)*XY]5)*+,-*D*+5G5J@2
"
2*-3J,RFJ56\I+,;)*Y
&./0,(/1%&+,-'2;$%,@5<7(/9%&;$%<

"[
2'(&/(%,

(,3&

4*5,
Common Layouts: Relative Layouts
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
$#
&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
!"

#$%&'()$*&+,-'
<
=>2
*24-)2*
?2@53-A295:,;3
B5+58232+1
5+2
C
5)*+,-*D@5:,;3
E
D
<
'
=>2

*24-)2*

?2@53-A295:,;3
B5+58232+1

5+2

C
5)*+,-*D@5:,;3
F'''
E

D


G-*3>H

>2-I>3H


J2@,GH

5J,A2

5@-I)=,BH

5@-I)K5+2)3=,BH


5@-I)L,33,8H

5@-I)K5+2)3L,33,8

3,9243M4H

3,?-I>3M4

B5**-)I

NL,33,8O9243O?-I>3O=,BPH

5)*

Q,+

2R58B@2H

511-I)-)I

3>2

B5+58232+

&./0,(/1%&+,-'2',*$3'435678(/9:+2;-'',.<
3,

5

=2R3S-2GG,;@*

B@562

3>2

=2R3S-2G 3,

3>2

@243

,4

3>2

S-2G

G-3>

3>2

0T

!"#$%&&'(
#U
#U

85+I-)

NL,33,8O9243O?-I>3O=,BP'

&'

()*+,-*

./0

/12+

0)32+45621
7,88,)

95:,;31
VWR8@

A2+1-,)XY$'%Y

2)6,*-)IXY;34

ZYW[
V?2@53-A295:,;3 R8@)1D5)*+,-*XY>33BD""16>2851'5)*+,-*'6,8"5B\"+21"5)*+,-*
5)*+,-*D@5:,;3FG-*3>XY4-@@FB5+2)3Y

5)*+,-*D@5:,;3F>2-I>3XYG+5BF6,)32)3Y
5)*+,-*DJ56\I+,;)*
Y
]
*+5G5J@2
"J@;2
Y
#$%&'()$*&+,-'
=>&:?%$
5)*+,-*DJ56\I+,;)*
X
]
*+5G5J@2
"J@;2
5)*+,-*DB5**-)IXY$%BRY

[
V=2R3S-2G 5)*+,-*D-*XY]^-*"@5J2@Y

5)*+,-*D@5:,;3FG-*3>XY4-@@FB5+2)3Y

5)*+,-*D@5:,;3F>2-I>3XYG+5BF6,)32)3Y

5)*+,-*D32R3XY=:B2

>2+2DY

"[
V_*-3=2R3 5)*+,-*D-*XY]^-*"2)3+:Y

5)*+,-*D@5:,;3FG-*3>XY4-@@FB5+2)3Y

5)*+,-*D@5:,;3F>2-I>3XYG+5BF6,)32)3Y

#$%&'()$*&+,-'
=>&:?%$
=>2

2R58B@2

J2@,G

1>,G1

5)

`a9

4-@2

5)*

3>2

+21;@3-)I

16+22)

-)

3>2

/0'

b,32

3>53

3>2

533+-J;321

3>53

+242+

3,

+2@53-A2

2@282)31

C2'I'H

)*"'%&#&'+,-&
E

+242+

3,

3>2

0T

;1-)I

3>2

1:)35R

,4

5

+2@53-A2

+21,;+62

C
./01/0
E'

#&
#&
5)*+,-*DJ56\I+,;)*XY]5)*+,-*D*+5G5J@2
"
2*-3J,RFJ56\I+,;)*Y
&./0,(/1%&+,-'2;$%,@5<7(/9%&;$%<

"[
2'(&/(%,

(,3&

4*5,

Common Layouts: Relative Layouts
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
$&
'(

)*+,-.+

/01

023,

1*43,56732
8-99-*

:6;-<42
=><44-*

6*+,-.+?.+@ABC.+"-DA

6*+,-.+?E6;-<4FG.+4H@AG,6IF7-*43*4A

6*+,-.+?E6;-<4FH3.JH4@AG,6IF7-*43*4A

!"#$%&#'(!)%*+,-(%.
/
0
1&#2-"+$)
0
3-(!+&4-5!)%*+
67!89(-
!"#$%&#'(!)%*+
:
,-(%.
/1&#2-"+$)
!"#$%&#'(!)%*+:!(&;"<!$-"+3&;=+/0+$*-0
6*+,-.+?E6;-<4F96,J.*:354@A$%IKA
6*+,-.+?43K4@ALMA

"N
=><44-*

6*+,-.+?E6;-<4FG.+4H@AG,6IF7-*43*4A

6*+,-.+?E6;-<4FH3.JH4@AG,6IF7-*43*4A
!"#$%&#'(!)%*+:+%5->+?>/01&#2%@0
!"#$%&#'(!)%*+:!(&;"A%9/01&#2%@0
6*+,-.+?43K4@A86*73EA

"N
3-(!+&4-5!)%*+
67!89(-
!"#$%
#O
#O
="P3E64.Q3:6;-<4N
'(

)*+,-.+

/01

023,

1*43,56732
8-99-*

:6;-<42
BC

D,E%(*+-5!)%*+
)

E6;-<4

4H64

E342

;-<

2I37.5;

3K674

E-764.-*2

R
72)

F%%$#&"!+-E
S

-5

.42

7H.E+,3*(

)T2-E<43
E6;-<42
6,3
E322
5E3K.TE3
6*+
H6,+3,
4-
96.*46.*
4H6*
-4H3,
4;I32
-5
)T2-E<43

E6;-<42

6,3

E322

5E3K.TE3

6*+

H6,+3,

4-

96.*46.*

4H6*

-4H3,

4;I32

-5

E6;-<42

G.4H-<4

6T2-E<43

I-2.4.-*.*J(

=UK9E

Q3,2.-*@A$(%A

3*7-+.*J@A<45

VAUN
=)T2-E<43:6;-<4
6*+,-.+?.+@ABC.+"9;)T2-E<43:6;-<4A
6*+,-.+?E6;-<4FG.+4H@A5.EEFI6,3*4A
6*+,-.+?E6;-<4FH3.JH4@A5.EEFI6,3*4A
K9E*2?6*+,-.+@AH44I?""27H3962(6*+,-.+(7-9"6ID",32"6*+,-.+A

N
=><44-*
#W
#W
6*+,-.+?.+@ABC.+"9;><44-*A
6*+,-.+?E6;-<4FG.+4H@AG,6IF7-*43*4A
6*+,-.+?E6;-<4FH3.JH4@AG,6IF7-*43*4A
6*+,-.+?43K4@A><44-*A
!"#$%&#'(!)%*+:7/GHIJ970
!"#$%&#'(!)%*+:)/GKI970
N
="><44-*N
=")T2-E<43:6;-<4N

Absolute Layout

Absolute Layout: lets you specify exact locations (x/y
coordinates) of its children.

Not flexible and hard to maintain.

See Murphy’s note on the Absolute Positioning Anti-Pattern
Overview

Layouts

Frame Layout, Linear Layout, Table Layout, Relative
Layout, Absolute Layout

Widgets

Textview, Button, ImageView, ImageButton, EditText,
EditView, CheckBox, RadioButton, ...

Connection between XML description and Java code:

android:idid/myID findViewById(R.id.myID)

Attach e.g. onClickListener to a Button

for more than 80 widgets see:
!"#$"#%%!
$&
&'

()*+,-*

./0

/12+

0)32+45621
(

7235-82*

9-13

,4

:-*;231
<,+

5

*235-82*

8-13

6,)1=83>
?33@>""*2A28,@2+'5)*+,-*'6,B"+242+2)62"5)*+,-*"C-*;23"@56D5;2

1=BB5+E'?3B8
(F19-13G-2C
(F19-13G-2C'95E,=3H5+5B1
(F1,8=3295E,=3
(F1,8=3295E,=3'95E,=3H5+5B1
(F1I22DJ5+
(F1I@-))2+
(*5@32+G-2CKL

2M32)*1

(*5@32+N
(*5@32+O,)32M3P2)=0)4,
(8@?5F230)*2M2+
()58,;O8,6D
(++5E(*5@32+KLN
(=3,O,B@8232L2M3G-2C
J512(*5@32+
7-;-358O8,6D
Q*-3L2M3
QM@5)*5F829-13G-2C
QM@5)*5F829-13O,)32M3P2)=0)4,
<-832+
<-832+'<-832+R21=831
<+5B295E,=3
<+5B295E,=3'95E,=3H5+5B1
S5882+E
S5882+E'95E,=3H5+5B1
S+-*G-2C
T25*2+G-2C9-13(*5@32+
T,+-U,)358I6+,88G-2C
H,@=@:-)*,C
H+,;+211J5+
R5*-,J=33,)
R5*-,S+,=@
R5*-,S+,=@'95E,=3H5+5B1
R53-);J5+
R2853-A295E,=3
R2853-A295E,=3'95E,=3H5+5B1
R2B,32G-2C1
R21,=+62O=+1,+(*5@32+
R21,=+62O=+1,+L+22(*5@32+
I6+,882+
I6+,88G-2C
L5F8295E,=3'95E,=3H5+5B1
L5F82R,C
L5F82R,C'95E,=3H5+5B1
L5F:-*;23
L2M3IC-36?2+
L2M3G-2C
L2M3G-2C'I5A2*I3532
L-B2H-6D2+
L,513
L,;;82J=33,)
LC,9-)29-13032B
G-*2,G-2C
G-2C()-B53,+
#V
#V
J512QM@5)*5F829-13(*5@32+
J=33,)
O?26DJ,M
O?26D2*L2M3G-2C
O?+,),B232+
O,B@,=)*J=33,)
O=+1,+(*5@32+
O=+1,+L+22(*5@32+
7532H-6D2+
7-582+<-832+
0B5;2J=33,)
0B5;2IC-36?2+
0B5;2G-2C
9-)25+95E,=3
9-)25+95E,=3'95E,=3H5+5B1
9-13G-2C
9-13G-2C'<-M2*G-2C0)4,
P2*-5O,)3+,882+
P=83-(=3,O,B@8232L2M3G-2C
O,BB5L,D2)-U2+
I22DJ5+
I-B@82(*5@32+
I-B@82O=+1,+(*5@32+
I-B@82O=+1,+L+22(*5@32+
I-B@82QM@5)*5F829-13(*5@32+
I8-*-);7+5C2+
I@-))2+
L5FT,13
L5FT,13'L5FI@26
L5F8295E,=3
G-2C<8-@@2+
G-2CIC-36?2+
W,,BJ=33,)
W,,BO,)3+,81
&'

()*+,-*

./0

/12+

0)32+45621
!"#

$%&

'()

)*#+,-%.
X)2

;,,*

+251,)>

!
"#
"
!
$ %#
&
!
'

()*

+,-'.
"
,
#

"
/

!
0+,1

.',
$
,
%#
'

,1$

2"1-0"-"3'4

5
/012
P,13

2A2+E3?-);

C2

*,

=1-);

YP9

85E,=3

4-821

65)

F2

56?-2A2*

3?+,=;?

Z5A5

6,*2'

T,C2A2+

-3

8,,D1

!"#$%&#'("
3,

D22@

3?2

/0

1@261

-)

5

12@5+532*

32M3

4-82[

+53?2+

3?5)

2BF2**2*

-)

6,*2'
#\
#\
YP9

51

5

S/0

*24-)-3-,)

4,+B53

-1

F26,B-);

B,+2

6,BB,)@8562'

P-6+,1,43]1

)*+"&$,'("

-..(,/#+,%&

0#!12.

3#&42#4"
'3()
[

(*,F2]1

<82M[

5)*

P,U-885]1

5$"!

6&+"!7#/"

3#&42#4"

'$)
35D2

5

1-B-85+

5@@+,56?

3,

3?53

,4

()*+,-*>

@=3

85E,=3

*235-81

-)

5)

YP9

4-82

5)*

@=3

@+,;+5BB-);

-)3288-;2)62

-)

1,=+62

4-821'
Widgets

TextView: simple label with text, cannot be edited,
used for e.g. captions

Button: subclass of textview, onClickListener for interaction

Images:
!"#$"#%%!
#%
&'

()*+,-*

./0

/12+

0)32+45621
!"#$%

&$'()*#+

,-"()#

,-"().$)/
5)*

,-"()!0**12
5+2

37,

()*+,-*

7-*8231

3953

5::,7

2;<2**-)8

,4

-;5821

-)

=,>+

5??:-653-,)1'

@,39

5+2

!"#$%

&#'%(

)!($%*'

5)5:,8>21

3,

+%,*-!%)
5)*

./**01
A

+21?263-B2:='

C569

7-*823

35D21

5)

"2'31$'+#3%
,+

"2'31$'+4"%5(3102'
533+-<>32

E-)

5)

FGH

:5=,>3I

3,

1?26-4=

7953

?-63>+2

3,

>12'


J-63>+21

5+2

>1>5::=

+242+2)62

5

(2#)#&3%
+21,>+62'

K,>
65)
5:1,
123
392
-;582
6,)32)3
<512*
,)
5
/+-
4+,;
5
6,)32)3
L!
L!

K,>

65)

5:1,

123

392

-;582

6,)32)3

<512*

,)

5

/+-

4+,;

5

6,)32)3

?+,B-*2+

B-5

1230;582/M0EI'

,-"()!0**12
A

-1

5

1><6:511

,4

0;582N-27'

03

5**1

392

135)*5+*

./**01
<295B-,+

4,+

+21?,)*-)8

3,

43!45
2B2)31'

&'

()*+,-*

./0

/12+

0)32+45621
!"#$%

&$'()*#+

,-"()#
...
O0;582@>33,)
5)*+,-*P-*Q
678!(9":;"#$%.*1<6
'$'4 5'
!"
#$%
&
#'% %%
!
"2
'
31
$'
+
4
"%
5
(3102
'
6
!"
#
()*)
$%
+
&
#
+
'
),
%
-.*)
%%
/)/+
(
!
5)*+,-*P:5=,>3R7-*39Q
6<=>?,6
5)*+,-*P:5=,>3R92-893Q
6<@<?,6
5)*+,-*P:5=,>3RSQ
6<A?,6
5)*+,-*P:5=,>3R=Q
6<=?,6
T
O"0;582@>33,)T
O0;582N-27
5)*+,-*P-*
Q
6
78!(9":;"#$%-!%)<6
&%
&%
5)*+,-*P-*
Q
78!(9":;"#$%-!%)<
"2'31$'+4"%5(3102'6
!"#()*)$%+&01.%),213+(.)2#(40#!
5)*+,-*P:5=,>3R7-*39Q
6<AB?,6
5)*+,-*P:5=,>3R92-893Q
6CA?,6
5)*+,-*P:5=,>3RSQ
6<DA?,6
5)*+,-*P:5=,>3R=Q
6@=?,6
T
O"0;582N-27T
from: V. Matos, CIS 493, Cleveland State University
Widgets: Images
from: V. Matos, CIS 493, Cleveland State University
!"#$"#%%!
#%
&'

()*+,-*

./0

/12+

0)32+45621
!"#$%

&$'()*#+

,-"()#

,-"().$)/
5)*

,-"()!0**12
5+2

37,

()*+,-*

7-*8231

3953

5::,7

2;<2**-)8

,4

-;5821

-)

=,>+

5??:-653-,)1'

@,39

5+2

!"#$%

&#'%(

)!($%*'

5)5:,8>21

3,

+%,*-!%)
5)*

./**01
A

+21?263-B2:='

C569

7-*823

35D21

5)

"2'31$'+#3%
,+

"2'31$'+4"%5(3102'
533+-<>32

E-)

5)

FGH

:5=,>3I

3,

1?26-4=

7953

?-63>+2

3,

>12'


J-63>+21

5+2

>1>5::=

+242+2)62

5

(2#)#&3%
+21,>+62'

K,>
65)
5:1,
123
392
-;582
6,)32)3
<512*
,)
5
/+-
4+,;
5
6,)32)3
L!
L!

K,>

65)

5:1,

123

392

-;582

6,)32)3

<512*

,)

5

/+-

4+,;

5

6,)32)3

?+,B-*2+

B-5

1230;582/M0EI'

,-"()!0**12
A

-1

5

1><6:511

,4

0;582N-27'

03

5**1

392

135)*5+*

./**01
<295B-,+

4,+

+21?,)*-)8

3,

43!45
2B2)31'

&'

()*+,-*

./0

/12+

0)32+45621
!"#$%

&$'()*#+

,-"()#
...
O0;582@>33,)
5)*+,-*P-*Q
678!(9":;"#$%.*1<6
'$'4 5'
!"
#$%
&
#'% %%
!
"2
'
31
$'
+
4
"%
5
(3102
'
6
!"
#
()*)
$%
+
&
#
+
'
),
%
-.*)
%%
/)/+
(
!
5)*+,-*P:5=,>3R7-*39Q
6<=>?,6
5)*+,-*P:5=,>3R92-893Q
6<@<?,6
5)*+,-*P:5=,>3RSQ
6<A?,6
5)*+,-*P:5=,>3R=Q
6<=?,6
T
O"0;582@>33,)T
O0;582N-27
5)*+,-*P-*
Q
6
78!(9":;"#$%-!%)<6
&%
&%
5)*+,-*P-*
Q
78!(9":;"#$%-!%)<
"2'31$'+4"%5(3102'6
!"#()*)$%+&01.%),213+(.)2#(40#!
5)*+,-*P:5=,>3R7-*39Q
6<AB?,6
5)*+,-*P:5=,>3R92-893Q
6CA?,6
5)*+,-*P:5=,>3RSQ
6<DA?,6
5)*+,-*P:5=,>3R=Q
6@=?,6
T
O"0;582N-27T

Widgets: EditText
from: V. Matos, CIS 493, Cleveland State University

!"#$"#%%!
#$
&'

()*+,-*

./0

/12+

0)32+45621
!"#$%

&$'()*#+

,'$*-).*

782

,'$*-).*
9,+

!"#!$%#
:

*
4
;-
*
<23

-1

5)

2=32)1-,)

,
4

&"#!'(")
3853

5>>,;1

?@*5321'


782

6,)3+,>

6,)4-<?+21

-312>4

3,

A2

"*(!+,-".

0B@,+35)3

C5D5

B238,*1

5+2E

&$
&$
!#!$%#./"!&"#
!
01/%2"'+-3"45

5)*

!#!$%#.6"!&"#!05.!%7!8(9605
&'

()*+,-*

./0

/12+

0)32+45621
!"#$%

&$'()*#+

,'$*-).*
0)

5**-3-,)

3,

382

135)*5+*

72=3F-2;@+,@2+3-21

G*-372=3 851

B5)H

,382+1

4 3
8
4
25
3
?+21

1?6
8

51E

I

"/'01$'+"2*1-).*
J

93+?2"45>12:

@+,D-*21

5?3,B53-6

1@2>>-)<

511-135)62
I
"/'01$'+%"3$*"4$5)
J

9
)%8*/:/"9!"9;"/
:

5?3,B53-6

65@-35>-K53-,)
I

"/'01$'+'$($*#
J

3,

6,)4-<?+2

382

4-2>*

3,

5662@3

,)>H

62+35-)

*-<-31
I

"/'01$'+#$/(4)6$/)
J

-1

382

4-2>*

4,+

1-)<>2

>-)2

"

B?>3-@>2

>-)2

-)@?3
I

"/'01$'+3"##710'
J

9
!83":<+-/"
:

6,)3+,>1

4-2>*L1

D-1-A->-3H
I

"/'01$'+/28)0$%
J

9
(9!"6"8=

*";(2+-=

/(69"*
:

6,)3+,>1

)?B2+-6

4,+B53
I

"/'01$'+391/)/28:)0
J

93+?2"45>12:

M,+B533-)<

@8,)2

)?BA2+1
&#
&#
Widgets: EditText
from: V. Matos, CIS 493, Cleveland State University

!"#$"#%%!
#$
&'

()*+,-*

./0

/12+

0)32+45621
!"#$%

&$'()*#+

,'$*-).*

782

,'$*-).*
9,+

!"#!$%#
:

*
4
;-
*
<23

-1

5)

2=32)1-,)

,
4

&"#!'(")
3853

5>>,;1

?@*5321'


782

6,)3+,>

6,)4-<?+21

-312>4

3,

A2

"*(!+,-".

0B@,+35)3

C5D5

B238,*1

5+2E

&$
&$
!#!$%#./"!&"#
!
01/%2"'+-3"45

5)*

!#!$%#.6"!&"#!05.!%7!8(9605
&'

()*+,-*

./0

/12+

0)32+45621
!"#$%

&$'()*#+

,'$*-).*
0)

5**-3-,)

3,

382

135)*5+*

72=3F-2;@+,@2+3-21

G*-372=3 851

B5)H

,382+1

4 3
8
4
25
3
?+21

1?6
8

51E

I

"/'01$'+"2*1-).*
J

93+?2"45>12:

@+,D-*21

5?3,B53-6

1@2>>-)<

511-135)62
I
"/'01$'+%"3$*"4$5)
J

9
)%8*/:/"9!"9;"/
:

5?3,B53-6

65@-35>-K53-,)
I

"/'01$'+'$($*#
J

3,

6,)4-<?+2

382

4-2>*

3,

5662@3

,)>H

62+35-)

*-<-31
I

"/'01$'+#$/(4)6$/)
J

-1

382

4-2>*

4,+

1-)<>2

>-)2

"

B?>3-@>2

>-)2

-)@?3
I

"/'01$'+3"##710'
J

9
!83":<+-/"
:

6,)3+,>1

4-2>*L1

D-1-A->-3H
I

"/'01$'+/28)0$%
J

9
(9!"6"8=

*";(2+-=

/(69"*
:

6,)3+,>1

)?B2+-6

4,+B53
I

"/'01$'+391/)/28:)0
J

93+?2"45>12:

M,+B533-)<

@8,)2

)?BA2+1
&#
&#
Widgets: EditText
from: V. Matos, CIS 493, Cleveland State University

!"#$"#%%!
##
&'

()*+,-*

./0

/12+

0)32+45621
!"#$%

&$'()*#+

,'$*-$).#
,/"012)
...
<EditText
android:id=
"@+id/txtUserName"
android:layout_width=
"fill_parent"
android:layout_height=
"wrap_content"
android:textSize=
"18sp"
android:autoText=
"true"
/772+

6512

8,+*1
9)32+

:32;<

8-==

>2

6,++2632*

3,?

:@;2<
&A
&A
android:capitalize
=
"
words"
android:hint="First Last Name"
android:layout_x=
"0px"
android:layout_y=
"42px"
>
</EditText>
...
BCDD213-,)

ED+2FG
&'

()*+,-*

./0

/12+

0)32+45621
!"#$%

&$'()*#+

,/"012)

3
0)

3;-1

=-33=2

2H5I7=2

82

8-==

C12

5)

45#627*)8"967*
;,=*-)D

5

=5>2=E
:)/-$).
G
5
32H3J,H
E
,'$*:)/*
G
5)*
5
!7**6;
=5>2=E

:)/-$).
G
K

5

32H3J,H
E
,'$*:)/*
G
K

5)*

5

!7**6;
'

L2

8-==

C12

3;2

M-28

51

5

1,+3

,4

1-I7=-4-2*

=,D-)

16+22)'
N-)3
O57-35=1

P

B233-)D

32H3
&&
&&
172==-)D
(

>+-24

I2115D2

>,H

Selection Widgets
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
#
!
'()*+,)

-./.01,+(

2,)3.14
5,01+*

671+4
8/.9./7()

-171.

:(,9.*4,1;
<+1.4

7*.

=74.)

+(>

?@
A
8 ) B
C,)
1
'),)
D/1
?@
.

A
E4;

8
+
)
.*
B
4

C
E
,)
.

1
+

'
(
)
*+
,)

D
.9.
/
+FG.(
1
=;

67*H

IJ

6E*F@;
8+F;*,3@1

K

%&&L

%&&!

8+GG+(427*.M

II8J
N-A<>

!OL

&

!L#$OL&

&

!
P
'()*+,)

D.9./+F.*4

@11F>"").9./+F.*J7()*+,)J0+G",().QJ@1G/
$J

'()*+,)

R:N

R -./.01,+(

2,)3.14
-./.01,+(

2,)3.14

S7),+AE11+(4 7()

8@.0HAE11+(4 7*.

4E,17=/.

T+*

4./.01,(3

T*+G

7

!"#$$
4.1

+T

+F1,+(4J

2@.(

1@.

F
++/

+T

0@+,0.4

,4

/7*
3
.*

+1@.*

U,)
3
.14

7*.

G+*.

F
3
3
7FF*+F*,71.M

1@+4.

,(0/E).

0/744,0

:N

0+(1*+/4

4E0@

74>
$%!&'()*!+

,("'('()*!+

-.(/

-(01

$%!&!+

/%,&2.*

3#$$*.%*!
M

.10J


'()*+,)

+TT.*4

7

T*7G.U+*H

+T

-#&#

#-#/&*.!
1@71

F*+9,).

7

0+GG+(

,(1.*T70.

1+

4./.01,+(

/,414

*7(3,(3

T*+G

4171,0

7**7;4

1+

)717=74.

0+(1.(14J

%
%

4*$*,&%(1

5%*0!

R U,)3.14

T+*

F*.4.(1,(3

/,414

+T

0@+,0.4

R 7*.

@7().)

7(

7)7F1.*

1+

4EFF/;

1@.

701E7/

0@+,0.4J
Selection Widgets
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
%
$'

()*+,-*

./0

.123245-,)

6-*7258
123245-,)

6-*7258
9-8:3;<-)7"123245-)7

=:5-,)8
9(>(
?;@

*;5;A,+B;552*

C

D,E)*
F
F
9(>(

(9(G>H?
*;5;
9285-);5-,)

3;<,E5

I,3*-)7

;

!"#$%"&'
$'

()*+,-*

./0

.123245-,)

6-*7258
/8-)7

(++;<(*;:52+
>J2

2;8-285

;*;:52+

5,

E82

-8

())*+(,*-$&)
.;33

<,E

)22*

5,

*,

-8

@+;:

,)2

,K

5J282

;+,E)*

;

L;M;

;++;<

,+

N;M;'E5-3'O-85 -)85;)42P

;)*

<,E

J;M2

;

KE33<

KE)45-,)-)7

;*;:52+Q
String[] items={"this", "is", "a","really", "silly", "list"};
new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,
items);
>J2

!""#$!%#&'("
4,)85+E45,+

5;R28

5J+22

:;+;B252+8Q
#
J
)
S - 33
."
-33
D
- -
- T
U
U
#
'>
J
2

)
*+'(,'
5,

E82

S
5<:
-
4;
33
<

$
."
#
@
-33

D
2

<,E+

;45
-
M
-
5<

-
)85;)42
T
%'>J2

+28,E+42

09

,K

;

-.(/
5,

E82

S8E4J

;8

5J2

DE-35

-)

8<852B

+28,E+42

android.R.layout.simple_list_item_1
;8

8J,@)

;D,M2T
F'>J2

;45E;3

S8,E+42T

;++;<

,+

3-85

,K

!"#$%
5,

8J,@
Using an ArrayAdapter
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
%
$'

()*+,-*

./0

.123245-,)

6-*7258
123245-,)

6-*7258
9-8:3;<-)7"123245-)7

=:5-,)8
9(>(
?;@

*;5;A,+B;552*

C

D,E)*
F
F
9(>(

(9(G>H?
*;5;
9285-);5-,)

3;<,E5

I,3*-)7

;

!"#$%"&'
$'

()*+,-*

./0

.123245-,)

6-*7258
/8-)7

(++;<(*;:52+
>J2

2;8-285

;*;:52+

5,

E82

-8

())*+(,*-$&)
.;33

<,E

)22*

5,

*,

-8

@+;:

,)2

,K

5J282

;+,E)*

;

L;M;

;++;<

,+

N;M;'E5-3'O-85 -)85;)42P

;)*

<,E

J;M2

;

KE33<

KE)45-,)-)7

;*;:52+Q
String[] items={"this", "is", "a","really", "silly", "list"};
new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,
items);
>J2

!""#$!%#&'("
4,)85+E45,+

5;R28

5J+22

:;+;B252+8Q
#
J
)
S - 33
."
-33
D
- -
- T
U
U
#
'>
J
2

)
*+'(,'
5,

E82

S
5<:
-
4;
33
<

$
."
#
@
-33

D
2

<,E+

;45
-
M
-
5<

-
)85;)42
T
%'>J2

+28,E+42

09

,K

;

-.(/
5,

E82

S8E4J

;8

5J2

DE-35

-)

8<852B

+28,E+42

android.R.layout.simple_list_item_1
;8

8J,@)

;D,M2T
F'>J2

;45E;3

S8,E+42T

;++;<

,+

3-85

,K

!"#$%
5,

8J,@
Using an ArrayAdapter
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
'
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*

+,$%&'

&,+-

:#

-;

<=
1*963>+

-;

!"#$%$#&
?3

?.44

@93

>

'$(#!"#$%$#&
?A.5A

.9

>*

)*+,-.+

54>99

3B
C
A>9.D.*
8

6A3

@93

-;

E.96F.3?9(
C 8
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
LinearLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
android:orientation
=
"vertical"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
>
<
TextView
android:id
=
"
@+id/selection"
android:layout_width
=
"fill_parent"
android:la
y
out hei
g
ht
=
"
w
ra
p
content
"

G
G
y _ g
p_
android:background
=
"#ff0000cc"
android:textStyle
=
"bold"
/>
<
ListView
android:id
=
"
@
android:id
/list"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
android:drawSelectorOnTop
=
"false"
/>
</
LinearLayout
>
09.*8

>*

)*+,-.+H9

C,3+3;.*3+

4>I-@6
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

(

)

*

+,$%&'

&,+-

:%

-;

<=
package
cis493.selectionwidgets;
import
android.app.ListActivity
;
import
android.app.ListActivity
;
import
android.os.Bundle;
import
android.view.View;
import
android.widget.ArrayAdapter;
import
android.widget.ListView;
import
android.widget.TextView;
public class
AndDemoUI1
extends
ListActivity {
TextView
selection
;
String[]
items
= {
"this"
,
"is"
,
"a"
,
"really"
,
"really2"
,
"really3"
,
"really4"
,
"ll 5"
"ill"
"li t"
}
J>6>

9-@,53
$
$
"
rea
ll
y
5"
,

"
s
ill
y
"
,

"li
s
t"
}
;
Using an ArrayAdapter
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
'
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*

+,$%&'

&,+-

:#

-;

<=
1*963>+

-;

!"#$%$#&
?3

?.44

@93

>

'$(#!"#$%$#&
?A.5A

.9

>*

)*+,-.+

54>99

3B
C
A>9.D.*
8

6A3

@93

-;

E.96F.3?9(
C 8
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
LinearLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
android:orientation
=
"vertical"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
>
<
TextView
android:id
=
"
@+id/selection"
android:layout_width
=
"fill_parent"
android:la
y
out hei
g
ht
=
"
w
ra
p
content
"

G
G
y _ g
p_
android:background
=
"#ff0000cc"
android:textStyle
=
"bold"
/>
<
ListView
android:id
=
"
@
android:id
/list"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
android:drawSelectorOnTop
=
"false"
/>
</
LinearLayout
>
09.*8

>*

)*+,-.+H9

C,3+3;.*3+

4>I-@6
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

(

)

*

+,$%&'

&,+-

:%

-;

<=
package
cis493.selectionwidgets;
import
android.app.ListActivity
;
import
android.app.ListActivity
;
import
android.os.Bundle;
import
android.view.View;
import
android.widget.ArrayAdapter;
import
android.widget.ListView;
import
android.widget.TextView;
public class
AndDemoUI1
extends
ListActivity {
TextView
selection
;
String[]
items
= {
"this"
,
"is"
,
"a"
,
"really"
,
"really2"
,
"really3"
,
"really4"
,
"ll 5"
"ill"
"li t"
}
J>6>

9-@,53
$
$
"
rea
ll
y
5"
,

"
s
ill
y
"
,

"li
s
t"
}
;
Using an ArrayAdapter
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
'
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*

+,$%&'

&,+-

:;

-<

'=
@Override
public void
onCreate(Bundle savedInstanceState) {
super
.onCreate
(
savedInstanceState
);
super
.onCreate
(
savedInstanceState
);
setContentView(R.layout.
main
);
setListAdapter(
new
ArrayAdapter<String>(
this
,
android.R.layout.
simple_list_item_1
,
items
));
selection
=(TextView)findViewById(R.id.
selection
);
}
@Override
protected void
onListItemClick(ListView l, View v,
int
position
long
id) {
234356.-*

4.963*3,
>.96

?+?@63,
A
A
int
position
,
long
id)

{
super
.onListItemClick(l, v, position, id);
String text =
" position:"
+ position +
" "
+
items
[position];
selection
.setText(text);
}
}
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*

+,$%&'

&,+-

:'

-<

'=
234356.-*
933*
7B3*
C-D
54.5E
B3,3
234356.-*

933*

FC

6B3

4.963*3,
G
G
7B3*

C-D

54.5E

B3,3
F?5E8,-D*+

<4?9B39

-,?*83
Using an ArrayAdapter
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
'
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*

+,$%&'

&,+-

:;

-<

'=
@Override
public void
onCreate(Bundle savedInstanceState) {
super
.onCreate
(
savedInstanceState
);
super
.onCreate
(
savedInstanceState
);
setContentView(R.layout.
main
);
setListAdapter(
new
ArrayAdapter<String>(
this
,
android.R.layout.
simple_list_item_1
,
items
));
selection
=(TextView)findViewById(R.id.
selection
);
}
@Override
protected void
onListItemClick(ListView l, View v,
int
position
long
id) {
234356.-*

4.963*3,
>.96

?+?@63,
A
A
int
position
,
long
id)

{
super
.onListItemClick(l, v, position, id);
String text =
" position:"
+ position +
" "
+
items
[position];
selection
.setText(text);
}
}
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*

+,$%&'

&,+-

:'

-<

'=
234356.-*
933*
7B3*
C-D
54.5E
B3,3
234356.-*

933*

FC

6B3

4.963*3,
G
G
7B3*

C-D

54.5E

B3,3
F?5E8,-D*+

<4?9B39

-,?*83
Using an ArrayAdapter
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
'
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'()*+#

*+

,-'./0$12
:;.9

3<=>
?
43

@939

=

*@>A3,

-B

?
,3+3B.*3+

)*+,-.+

5->
?
-*3*69(

?
?
?
#( 1*

6;3

CDE

4=F-@6

G3

@93

=

!"#$%"&'
G.+836

5=443+

android:id/list
%( E=63,

.*

6;3

9366.*8

-B

6;3

),,=F)+=?63,G3

>=H3

=

,3B3,3*53

6-

android.R.layout.
simple_list_item_1
.
!
!
:;-93

-AI3569

=,3

?=,6

-B

6;3

2JK

=*+

5=*

A3

B-@*+

.*

6;3

B-4+3,L

C:\Android\platforms\android-1.5\data\res\layout
()&&

!""#$%&'

!

*+,

-+,&

+.

$/"#

"##0&1
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!(3$%

4./*%('+(

56'/($%#
:;3,3

=,3

9->3

-6;3,

=+=?63,9

.*

)*+,-.+

6;=6

F-@

G.44

4.H34F

@93

78%#*%56'/($%
5-*M3,69

=

20,#+,
N

6F?.5=44F

B,->

=

5-*63*6

?,-M.+3,N

.*6-

9->36;.*8

6;=6

5=*

A3

+.9?4=F3+

.*

=

934356.-*

M.3G

9)./0$56'/($%
5-*M3,69

+=6=

B-@*+

.*

CDE

,39-@,539
#&
#&

5:()&)(;56'/($%
=*+

5:()&)(;4:*+56'/($%
?,-M.+3

F-@

G.6;

6;3

*=>39

-,

.5-*9

-B

=56.M.6.39

6;=6

5=*

A3

.*M-H3+

@?-*

=

?=,6.5@4=,

.*63*6


Other Adapters
from: V. Matos, CIS 493, Cleveland State University


!"#$"%&&!
'
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'()*+#

*+

,-'./0$12
:;.9

3<=>
?
43

@939

=

*@>A3,

-B

?
,3+3B.*3+

)*+,-.+

5->
?
-*3*69(

?
?
?
#( 1*

6;3

CDE

4=F-@6

G3

@93

=

!"#$%"&'
G.+836

5=443+

android:id/list
%( E=63,

.*

6;3

9366.*8

-B

6;3

),,=F)+=?63,G3

>=H3

=

,3B3,3*53

6-

android.R.layout.
simple_list_item_1
.
!
!
:;-93

-AI3569

=,3

?=,6

-B

6;3

2JK

=*+

5=*

A3

B-@*+

.*

6;3

B-4+3,L

C:\Android\platforms\android-1.5\data\res\layout
()&&

!""#$%&'

!

*+,

-+,&

+.

$/"#

"##0&1
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!(3$%

4./*%('+(

56'/($%#
:;3,3

=,3

9->3

-6;3,

=+=?63,9

.*

)*+,-.+

6;=6

F-@

G.44

4.H34F

@93

78%#*%56'/($%
5-*M3,69

=

20,#+,
N

6F?.5=44F

B,->

=

5-*63*6

?,-M.+3,N

.*6-

9->36;.*8

6;=6

5=*

A3

+.9?4=F3+

.*

=

934356.-*

M.3G

9)./0$56'/($%
5-*M3,69

+=6=

B-@*+

.*

CDE

,39-@,539
#&
#&

5:()&)(;56'/($%
=*+

5:()&)(;4:*+56'/($%
?,-M.+3

F-@

G.6;

6;3

*=>39

-,

.5-*9

-B

=56.M.6.39

6;=6

5=*

A3

.*M-H3+

@?-*

=

?=,6.5@4=,

.*63*6
from the dark side

... what if you hit “return” ?
Selection Widgets: Spin Control
from: V. Matos, CIS 493, Cleveland State University


!"#$"%&&!
$
$'

()*+,-*

./0

.123245-,)

6-*7258
123245-,)

6-*7258
!"#$

%&$'(&)

0)

()*+,-*9

5:2

!"#$$*(
-8

5:2

2;<-=>32)5

,?

5:2

*+,@

*,A)

823245,+
823245,+
'


1@-))2+8

:>=2

5:2

8>B2

?<)45-,)>3-5C

,?

>

D-85E-2AF<5

5>G2

3288

8@>42'

(8

A-5:

D-85E-2A9

C,<

@+,=-*2

5:2

>*>@52+

?,+

*>5>

>)*

4:-3*

=-2A8

=->

!"#$%&
'
#"(
)*
>)*

:,,G

-)

>

3-852)2+

,F
H
245

?,+

##
##
'
)*
H
823245-,)8

A-5:

!"#+,-#"./"0"1#"%23!#","(
IJ
'

/82

5:2

!"#4(5'456,73"68"!59(1")*
B25:,*

5,

8<@@3C

5:2

+28,<+42

0K

,?

5:2

=-2A

5,

<82'
$'

()*+,-*

./0

.123245-,)

6-*7258
123245-,)

6-*7258
+,-.")*

/0

12#$3

'4*

!"#$$*(
1232452*

=>3<2
L3-4G

:2+2
#%
#%
123245

5:-8

,@5-,)
Selection Widgets: Spin Control
from: V. Matos, CIS 493, Cleveland State University


!"#$"%&&!
$
$'

()*+,-*

./0

.123245-,)

6-*7258
123245-,)

6-*7258
!"#$

%&$'(&)

0)

()*+,-*9

5:2

!"#$$*(
-8

5:2

2;<-=>32)5

,?

5:2

*+,@

*,A)

823245,+
823245,+
'


1@-))2+8

:>=2

5:2

8>B2

?<)45-,)>3-5C

,?

>

D-85E-2AF<5

5>G2

3288

8@>42'

(8

A-5:

D-85E-2A9

C,<

@+,=-*2

5:2

>*>@52+

?,+

*>5>

>)*

4:-3*

=-2A8

=->

!"#$%&
'
#"(
)*
>)*

:,,G

-)

>

3-852)2+

,F
H
245

?,+

##
##
'
)*
H
823245-,)8

A-5:

!"#+,-#"./"0"1#"%23!#","(
IJ
'

/82

5:2

!"#4(5'456,73"68"!59(1")*
B25:,*

5,

8<@@3C

5:2

+28,<+42

0K

,?

5:2

=-2A

5,

<82'
$'

()*+,-*

./0

.123245-,)

6-*7258
123245-,)

6-*7258
+,-.")*

/0

12#$3

'4*

!"#$$*(
1232452*

=>3<2
L3-4G

:2+2
#%
#%
123245

5:-8

,@5-,)
Selection Widgets: Spin Control
from: V. Matos, CIS 493, Cleveland State University


!"#$"%&&!
'
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*+,-.

/0'

1%,--'2
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
LinearLayout
d id id
"@ id/
i
"
an
d
ro
id
:
id
=
"@
+
id/
myL
i
nearLayout
"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
android:orientation
=
"vertical"
xmlns:android
=
"http://schemas.android.com/apk/res/android"
>
<
TextView
android:id
=
"@+id/selection"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:background
=
"#ff0033cc"
android:textSize
=
"14pt"
android:textSt
y
le
=
"bold
"
#:
#:
y
>
</
TextView
>
<
Spinner
android:id
=
"@+id/spinner"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
>
</
Spinner
>
</
LinearLayout
>
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*+,-.

/0'

1%,--'2
package
cis493.selectionwidgets;
i t
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.view.View;
import
android.widget.AdapterView;
import
android.widget.ArrayAdapter;
import
android.widget.Spinner;
import
android.widget.TextView;
public class
AndDemoUI1
extends
Activity
implements
AdapterView.OnItemSelectedListener {
TextView
selection
;
String[]
items
= {
"this"
,
"is"
,
"a"
,
"reall
y
"
,

"
reall
y
2"
,

"
reall
y
3"
,
#;
#;
y
,
y
,
y
,
"really4"
,
"really5"
,
"silly"
,
"list"
};
Selection Widgets: Spin Control
from: V. Matos, CIS 493, Cleveland State University


!"#$"%&&!
'
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*+,-.

/0'

1%,--'2
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
LinearLayout
d id id
"@ id/
i
"
an
d
ro
id
:
id
=
"@
+
id/
myL
i
nearLayout
"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
android:orientation
=
"vertical"
xmlns:android
=
"http://schemas.android.com/apk/res/android"
>
<
TextView
android:id
=
"@+id/selection"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:background
=
"#ff0033cc"
android:textSize
=
"14pt"
android:textSt
y
le
=
"bold
"
#:
#:
y
>
</
TextView
>
<
Spinner
android:id
=
"@+id/spinner"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
>
</
Spinner
>
</
LinearLayout
>
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*+,-.

/0'

1%,--'2
package
cis493.selectionwidgets;
i t
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.view.View;
import
android.widget.AdapterView;
import
android.widget.ArrayAdapter;
import
android.widget.Spinner;
import
android.widget.TextView;
public class
AndDemoUI1
extends
Activity
implements
AdapterView.OnItemSelectedListener {
TextView
selection
;
String[]
items
= {
"this"
,
"is"
,
"a"
,
"reall
y
"
,

"
reall
y
2"
,

"
reall
y
3"
,
#;
#;
y
,
y
,
y
,
"really4"
,
"really5"
,
"silly"
,
"list"
};
Selection Widgets: Spin Control
from: V. Matos, CIS 493, Cleveland State University


!"#$"%&&!
'
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*+,-.

/0'

1%,--'2
@Override
public void
onCreate(Bundle icicle) {
su
p
er
.onCreate
(
icicle
)
;
p
( )
setContentView(R.layout.
main
);
selection
= (TextView) findViewById(R.id.
selection
);
Spinner spin = (Spinner) findViewById(R.id.
spinner
);
spin.setOnItemSelectedListener(
this
);
ArrayAdapter<String> aa =
new
ArrayAdapter<String>(
this
,
android.R.layout.
simple_spinner_item
,
items
);
aa.setDropDownViewResource(
android.R.layout.
simple_spinner_dropdown_item
);
spin setAdapter
(
aa
)
#:
#:
spin
.
setAdapter
(
aa
)
;
}
public void
onItemSelected(
AdapterView<?> parent, View v,
int
position,
long
id) {
selection
.setText(
items
[position]);
}
public void
onNothingSelected(AdapterView<?> parent) {
selection
.setText(
""
);
}
}
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
32,45,'6

)
32,45,'6
8
.;39

<
-=

>

6?-

+.@3*9.-*>4

8
,.+

-A

.63@9

6-

5B--93

8
<
8
A,-@(


C-=

B>;3

@-+3,>63

5-*6,-4

-;3,

6B3

*=@D3,

>*+

9.E3

-A

6B3

5-4=@*9F

6B3

*=@D3,

-A

,-?9

.9

+<*>@.5>44<

+363,@.*3+

D>93+

-*

6B3

*=@D3,

-A

.63@9

G,-;.+3+

D<

6B3

9=GG4.3+

>+>G63,(

#$
#$
Selection Widgets: AutoCompleteTextView
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
##
$'

()*+,-*

./0

.123245-,)

6-*7258
123245-,)

6-*7258
!"#$%&'

()

*+,-.,'/
@Override
p
ublic voi
d
onCreate
(
Bundle icicle
)

{
p
( ) {
super
.onCreate(icicle);
setContentView(R.layout.
main
);
selection
= (TextView) findViewById(R.id.
selection
);
GridView g = (GridView) findViewById(R.id.
grid
);
ArrayAdapter<String> aa =
new
ArrayAdapter<String>(
this
,
android.R.layout.
simple_list_item_1
,
items
);
g.setAdapter(aa);
g.setOnItemSelectedListener(
this
);
}
%#
%#
}
public void
onItemSelected(
AdapterView<?> parent, View v,
int
position,
long
id) {
selection
.setText(
items
[position]);
}
public void
onNothingSelected(AdapterView<?> parent) {
selection
.setText(
""
);
}
}
$'

()*+,-*

./0

.123245-,)

6-*7258
123245-,)

6-*7258
012343$%&'2'5'"2.,'/

6-59

#123

63$%&'2,37
:

;8

592

<82+

5=>28:

592

52?5

-8

5+2;52*

;8

;

>+2@-?

@-352+:

4,A>;+-)7
592
2)52+2*
52?5
;8
;
>+2@-?
;7;-)85
;
3-85
,@
4;)*-*;528
4,A>;+-)7

592

2)52+2*

52?5

;8

;

>+2@-?

;7;-)85

;

3-85

,@

4;)*-*;528
'


B;54928

;+2

89,C)

-)

;

!"#"$%&'(

#&!%
59;5:

3-D2

C-59

1>-))2+:

@,3*8

*,C)

@+,A

592

@-23*'


E92

<82+

4;)

2-592+

5=>2

,<5

;

(")

"(%*+

F2'7':

8,A259-)7

),5

-)

592

3-85G

,+

$,''!"

-(

"(%*+

.*'/

%,"

#&!%

5,

H2

592

I;3<2

,@

592

@-23*'
%%
%%

(<5,J,A>3252E2?5K-2C8<H43;8828

L*-5E2?5:

8,

=,<

4;)

4,)@-7<+2

;33

592

85;)*;+*

3,,D

;)*

@223

;8>2458:

8<49

;8

@,)5

@;42

;)*

4,3,+'

(<5,J,A>3252E2?5K-2C9;8

;

!"#$%&#'(%)*+,-&%"./$,0/%+#
>+,>2+5=:

5,

-)*-4;52

592

A-)-A<A

)<AH2+

,@

49;+;452+8

;

<82+

A<85

2)52+

H2@,+2

592

3-85

@-352+-)7

H27-)8'
Selection Widgets: AutoCompleteTextView
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
#%
$'

()*+,-*

./0

.123245-,)

6-*7258
123245-,)

6-*7258
!"#$%$&'()#)*)+#,-).
123245

59-8
%:
%:
$'

()*+,-*

./0

.123245-,)

6-*7258
123245-,)

6-*7258
/+0&'()

12

!"#$%$&'()#)*)+#,-).
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
LinearLayout
<
LinearLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
android:orientation
=
"vertical"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
>
<
TextView
android:id
=
"@+id/selection"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:background
=
"#ff0033cc"
d id t tSi
"14 t"
%;
%;
an
d
ro
id
:
t
ex
tSi
ze
=
"14
p
t"
android:textStyle
=
"bold"
/>
<
AutoCompleteTextView
android:id
=
"@+id/edit"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:completionThreshold
=
"3"
/>
</
LinearLayout
>
<-)'

:

49=+8

5,

>,+?
Selection Widgets: AutoCompleteTextView
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
#%
$'

()*+,-*

./0

.123245-,)

6-*7258
123245-,)

6-*7258
!"#$%$&'()#)*)+#,-).
123245

59-8
%:
%:
$'

()*+,-*

./0

.123245-,)

6-*7258
123245-,)

6-*7258
/+0&'()

12

!"#$%$&'()#)*)+#,-).
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
LinearLayout
<
LinearLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
android:orientation
=
"vertical"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
>
<
TextView
android:id
=
"@+id/selection"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:background
=
"#ff0033cc"
d id t tSi
"14 t"
%;
%;
an
d
ro
id
:
t
ex
tSi
ze
=
"14
p
t"
android:textStyle
=
"bold"
/>
<
AutoCompleteTextView
android:id
=
"@+id/edit"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:completionThreshold
=
"3"
/>
</
LinearLayout
>
<-)'

:

49=+8

5,

>,+?
Selection Widgets: AutoCompleteTextView
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
#'
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*+,-.-$%&','/'",01'2
package
cis493.selectionwidgets;
import
android.app.Activity;
import
android.os.Bundle;
import
android.text.Editable;
import
android.text.TextWatcher;
import
android.widget.ArrayAdapter;
import
android.widget.AutoCompleteTextView;
import
android.widget.TextView;
public class
AndDemoUI1
extends
Activity
implements
TextWatcher {
TextView
selection
;
%:
%:
AutoCompleteTextView
edit
;
String[]
items
= {
"this"
,
"is"
,
"a"
,
"really"
,
"really2"
,
"really3"
,
"really4"
,
"really5"
,
"silly"
,
"list"
};
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*+,-.-$%&','/'",01'2
@Override
public void
onCreate(Bundle icicle) {
super
onCreate
(icicle);
super
.
onCreate
(icicle);
setContentView(R.layout.
main
);
selection
= (TextView) findViewById(R.id.
selection
);
edit
= (AutoCompleteTextView) findViewById(R.id.
edit
);
edit
.addTextChangedListener(
this
);
edit
.setAdapter(
new
ArrayAdapter<String>(
this
,
android.R.layout.
simple_dropdown_item_1line
,
items
));
}
public void
onTextChanged(CharSequence s,
int
start,
int
before,
int
count) {
selection
setText
(
edit
getText
());
%$
%$
selection
.
setText
(
edit
.getText
());
}
public void
beforeTextChanged(CharSequence s,
int
start,
int
count,
int
after) {
// needed for interface, but not used
}
public void
afterTextChanged(Editable s) {
// needed for interface, but not used
}
}
Selection Widgets: AutoCompleteTextView
from: V. Matos, CIS 493, Cleveland State University
!"#$"%&&!
#'
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*+,-.-$%&','/'",01'2
package
cis493.selectionwidgets;
import
android.app.Activity;
import
android.os.Bundle;
import
android.text.Editable;
import
android.text.TextWatcher;
import
android.widget.ArrayAdapter;
import
android.widget.AutoCompleteTextView;
import
android.widget.TextView;
public class
AndDemoUI1
extends
Activity
implements
TextWatcher {
TextView
selection
;
%:
%:
AutoCompleteTextView
edit
;
String[]
items
= {
"this"
,
"is"
,
"a"
,
"really"
,
"really2"
,
"really3"
,
"really4"
,
"really5"
,
"silly"
,
"list"
};
$(

)*+,-.+

/01

/234356.-*

7.+8369
234356.-*

7.+8369
!"#$%&'

()

*+,-.-$%&','/'",01'2
@Override
public void
onCreate(Bundle icicle) {
super
onCreate
(icicle);
super
.
onCreate
(icicle);
setContentView(R.layout.
main
);
selection
= (TextView) findViewById(R.id.
selection
);
edit
= (AutoCompleteTextView) findViewById(R.id.
edit
);
edit
.addTextChangedListener(
this
);
edit
.setAdapter(
new
ArrayAdapter<String>(
this
,
android.R.layout.
simple_dropdown_item_1line
,
items
));
}
public void
onTextChanged(CharSequence s,
int
start,
int
before,
int
count) {
selection
setText
(
edit
getText
());
%$
%$
selection
.
setText
(
edit
.getText
());
}
public void
beforeTextChanged(CharSequence s,
int
start,
int
count,
int
after) {
// needed for interface, but not used
}
public void
afterTextChanged(Editable s) {
// needed for interface, but not used
}
}
More Selection Widgets

GridView

Gallery Widget

Customized lists

Date/Time selection widgets: TimePicker/DatePicker

Tab selection widget

SlidingDrawer widget

Aside: “inflate” describes the instantiation of a tree-type
data structure with Views from an XML layout specification
Other Features
from: V. Matos, CIS 493, Cleveland State University


!"#$"#%%!
&%
'(

) *+,-.

/- 0 + 1.- 2
344

!"#
$
%&'
-5+-67

!"#$
+,-.-89.-

+,-
:

0;
<
1=.-

0

61>?-.

98

12-814

@=-A

$
:
<
B.9B-.+=-2

067

>-+,972

=6;417=6CD
%&'

()*+,)-.

+/#

0)12.

.#32#*1#4
067.9=7DE=2=?=4=+:
367.9=7D?0;FC.9167
5676

8#+/)9.
G ++ +/
HI
J!
>:
G
1
++
96K.-<1-2
+/
9;12
HI
>:L-5+G95K=2/9;12-7HI
>:M=7C-+K2-+N60?4-7HI
>:M=7C-+K=2N60?4-7HI
'(

'2-.

(6+-.80;-2
:2#.+")*.
;
:2#.+")*.

;
O%