CAPITTJLO 2.

Diseo de la interfaz de usuario

El diseo de la interfaz de usuario cobra cada da ms importancia en el

desarrollo de una aplicacin. La calidad de la interfaz de usuario puede ser uno de ls factores que conduzca al xito o alfracaso de todo el proyecto.

Si has realizado alguna aplicacin utilizando otras plataformas, advertirs que eldiseo de la interfaz de usuario en Android sigue una filosofa muy diferente. En Android la interfaz de usuario no se disea en cdigo, sino utilizando un lenguaje de marcado similar al HTML.

A lo largo de este captulo

permitirn entender el diseo de la interfaz de usuario en Android.

mostraremos una serie de ejemplos que te

2.1. Creacin de una interfaz de usuario por cdigo

Veamos un primer ejemplo de cmo crear una interfaz de usuario utilizando exclusivamente cdigo. Esta no es la forma recomendable de trabajar con Android, sin embargo resulta interesante para discutir algunos conceptos.

Abre el proyecto creado en el captulo anterior y visualiza HolaMundo.java. comenta la ltima sentencia del programa y aade las tres que se muestran a continuacin en negrita: package
r::oitr. ex,:nf;l e
.

ho.i;.iltundli;
y
;

import, andioi<i . i.!)p . i:',,:: t: : vit: irrport rr-{:'c:d. i::s . Iirrrri:{..;-e,.

pubJ"ic class HolaMundo ext,ends Actlvity { i* ^ (.:.':..l.eil 'vhi:n t: h.<* :t::i: :!.v !.i .' :!.r .i.i..s:ii: <:i:ei;i.*<i. *,i

51

Elgran libro de Android

eOvirri.ri.e

public void onCreate (Bundle savedlnstanceState)

auper . onCreate ( savedlnstanceState ) ; j. // / ii e l: Ccil t (} c.f.'\,t r w R . 1. a1tr, . m;.r i :': i ; Texwiew texto = nexr TextView(thte);

te.to. aetText (.rHel1o, Androidi) seteort,entVLew ( texto) ;

) )

NOTA: Para poder utilizar el objeto

'.'(::.vi.r::v

hos de importar un nuevo paquete,

para ello aade al principio

quefaltan.

".i..rri.><trt: .;n.J..'o.ii. w.iiir:jr,t!.: .'i:exr.vi.e:w;". Otra alternativa es pulsar Ctil-Shiff-O, para que se aadan automticamenfe los paquetes

La interfaz de usuario de Android est basada en una jerarqua de objetos descendientes de la clase riew (vista). una vista es un objeto que se puede dibujar y se utiliza como un elemento en el diseo de la interfaz de usuario (un botn, una magen, una etiqueta de texto como en el utilizado en el ejemplo,...). Cada uno de estos elementos se defne como una subclase de la clase vew; la subclase para representar un texto es rexl\riew.
El ejemplo comienza creando un objeto de la clase rezrview. El constructor de la clase acepta como parmetro una instancia de la clase conrexr (cdntexto). Un contexto es un manejador del sistema que proporciona servicios como la resolucn de recursos, obtencin de acceso a bases de datos o preferencias. La clase ec[ivi.i.i- eS Una subclas d <]ort.ext, ] CofTto la clase ilell.DAri,lr.<:<i S una subclase de acri.v-ity, tambin es tipo conre]:r. Por ello, puedes pasdr rhs (el objeto actualde la clase HoraMundo) como contexto del rezrview. Despus se define el contenido del texto que se visualizar l rexrr/iew mediante setText {CharSequence) . Finalmente, mediant setContentrJiew O S indica la vista utilizada por la actividad.
Ejecuta el proyecto para verificar que

funciona.

2.2. Creacin de una interfaz de usuaro usando XML

En el ejemplo anterior hemos creado la interfaz de usuario directamente en el cdigo. A veces puede ser muy complicado programar interfaces de usuario, ya

que pequeos cambios en el diseo pueden conesponder

gue conviene separar todo lo posible el diseo, los datos
aplicacin.

modificaciones en el cdigo. Un principio importante en el diseo de soware es

a complicadas

y la lgica de la

52

Diseo de la interfaz de usuario

accede

. Android proporciona una alternativa para el diseo de interfaces de usuario: los ficheros de diseo basados en XML. Ve"ros uno de estos ficheros. para ello
al
fichero res/layout/main.xml de nuestro proyecto.

continuacin. Este layouf o fichero de diseo proporciona un resultado similar que el ejemplo de diseo por cdigo anterior:
.-?,.::.1:.

se

muestra a

ver*cion=
i-

,,1 .

0,' encod.ing=

,,1if _g,,?:.

. _ j tr, .i,i r,;r.l

xmlns : an<lrr:iid=

,,iliir::

and::oid.: o.rienle t.i.orI= ,'vert ical

e.n<l i o.i. d : i a .: 'I',i;.; l . t/ i. .a:, y"'

/,::r.:llr-rnas.all.dr.tt.i..1 .c:c>rn,'a_>krr.t:r::],/an.12..i.t.:.d,,
,, ,,

android: rayout.*v;irjth= "fj Jl -.iretit

ycir t:_he i ght
=,,.t:

.l jlJ)a.,-.rr .,, > ;_ p;i

andrcld : Iayou t_vidlh= " f i I

an<i
< .j

ren i-,,
l_

android: texi= ,,Gstringihej

.-1

ro 1 d : I a.v'ciu !::_he i qhi: =,, rr,l.-s,_

.L:,',
:>

(-.()l

e.n t.,,

>

?i

,:-i. i, l:,r t i1 i:

elejemplo se ocupar todo el espacio disponible.

Resulta sencillo interpretar su significado. Se introduce un elemento de tipo -ir'l'r.i.'I,.,i.,,orri: , como se estudiar ms adelante su funcin es contener otros elementos de tipo ii'j-ew. Este lirlrjai^L\,."ri. tiene cuatro atributos. El primero, :-lrs:1nd-i'i.,-1c, es una declaracin de un espacio de nombres de XML que utilizaremos en Android (Este parmetro solo es necesario especifcarlo en el primer elemento). El siguiente atributo indica que los elementos se van a distribuir de forma vertical' Los. dos siguientes permiten definir el ancho y alto de la vista. En

el texto a mostrar. No se ha indicado un texto en concreto si no una referencia, =:sr-iinq,h+a,r o". Esta referencia ha de estar definida en el fichero res/values/strings.xml. siabres este fichero, tienes elsiguiente contenido:

DentrO del T,j.irc;rrtrijr.t1-):rr-SOIO tenemOs un elementO de tipO T:xtvi.cv.,. ESte dispone de tres atributos. Los dos primeros definen el ancho y ,tto El ltimo indica

n iire= " lt

r_,:

i..1.

;', :"He

11

t13rlil= ".il:,,, 6,, >HO1a, Mundo<

o Wor1d, HolaMundo !,: l r:i<r > 7i j i: I

:..

;;;;

:...1

..,

i.;4,

idiomas.

Esta es la prctica recomendada en Android para la insercin .. de textos en tu aplicacin, dado que facilita su localizacin a la hora de realizar la traduccin a otros idiomas. Es decir, utilizaremos los ficheros layout para introducir el diseo de los interfaces y el fichero sfnngs para introducir los-textos utilizJos en los distintos

53

Elgran libro de Android

Para utilizar el diseo en XML regresa al fichero HolaMundojava y deshaz los cambios que hicimos antes (elimina las tres ltimas lneas y quita el comentario). Ejecuta la aplicacin y verifica el resultado

1. Modifica algn valor del fichero resfualues/strings.xml. 2. Vuelve a ejecutar la aplicacin y visualiza el resultado.
Analicemos ahora la lnea en la que acabas de quitar el comentario:

set'ccnlentView (ft. layr:ut . mai:i ;

Aqui, R.layout.main conesponde a un objeto View que ser creado en tiempo
de ejecucin a partir del recurso main.xml. Trabajar de esta forma, en comparacin

con el diseo basado en cdigo, no quita velocidad y requiere menos espacio. El plug-in de Eclipse crea automticamente esta referencia en la clase n del proyecto

partir de todos los elementos de la carpeta res. Abre el fichero llamado gen/Rjava. Este fichero se muestra a continuacin:
package *onr. exanrrle . hol.amirrclo

publte flnal claee F" { publlc at,atic flnaL claas attr

)

pubLtc stat.Lc flnal clags drawable { publtc statlc ftnal Lot jcon*0x7f0ll000;

publtc etatLc flnal claes layout { public statlc fiaaL int majn*0x?f
t t

r).-Jr)0D0;

publtc gtalfc flnal cl^age sirinq { public etatlc flnal ia! app_name=0x'7f 0400'j.; public etatlc fLnal int hello=rtx?f 0411000;
i

NOTA: Este fichero se genera automticamente. Nunca debes editarlo de forma

manual.

Has de tener claro que las referencias de la clase R son meros nmeros que informan al gestor de recursos, que datos ha de cargar. por lo tanto no se trata de verdaderos objetos, estos sern creados en tiempo de ejecucin solo cuando sea necesario usarlos.

54

Diseo de la interfaz de usuario

2.2.1. Edicin visual de las vstas

Veamos ahora como editar los layouts o ficheros de diseo en XML. En el explorador de paquetes abre el fichero res/layout/main.xml. Vers que en la parte inferior de la ventana central aparecen dos lengetas: Layouty main.xml. El plugrn de Android te permite dos tipos de diseo: editar directamente el cdigo XML

(lengeta main.xml)
.,.

o realizar este diseo de forma visual (lengeta

Layout).

Veamos cmo se realizaria el diseo visual:

mrn.<at

a:

Eding

tantig ddavll

it11,H,,.;a*,{Ft

li;;J}tj;r,;ir,-Jjiiir,;l,q"y

ri^*

.jiiii;e

Q Linutryort
tr- ldteY.'

::tryo*
@ 0ial..tilc.

,!

EJbloldct.iolt
EJlrp.ndrbldirt...

E]:r.hll.ycut
@criav;e.
-,,'i

Yrsr

'.t

(9 Sudrrevis

Sri*
@

viest"l
{nlogclc<k

I
1,-6)

adcr:o8ptc... *t:i;ii{B j} j jiiii jii: tryocl main,mlI

,j.
j

: P-pe,t

'rcblemr "ln

r'l ,oaaot i{!; 0cclara,or i H (onslei,ii, LogC"t:ii,,iP,.rp{rl,,i,,,.r...

Vlue
Est.in gr'h?llo

i
t

r"s
TdpFornc

. I
i-.

lat"t"'
.-.-....I-:{,i..",!,'.1-l'silieh'

marco central aparece una representacin de cmo se ver el resultado. En la parte superior aparecen varios controles para representar esta vista en diferentes configuraciones. Cuando diseamos una vista en Android, hay que tener en

En el marco derecho se visualiza una lista con todos los elementos de la vista. En este momento Solo hay dos un I.,:i n*;:r:I.,:;1;i:rrr::: QUe contiene un :!te:i:vi ilw. En el

cuenta que desconocemos

el

dispositivo final donde ser visualizada

la

configuracin especfica elegida por el usuario. Por esta razn, resulta importante que verifiques que la vista se ve de forma adecuada en cualquier configuracin.

De izquierda a derecha podemos seleccionar el tamao en pulgadas y la resolucin del dispositivo, orientacin horizontal (lanscape) o vertical (portrait),

cnnfiguracin regional (locale), configuracin de utilizacin (escritorio o automvil), configuracin segn la hora del da (diurna o nocturna) y aplicacin de un tema. Para editar un elemento seleccinalo en el marco de la derecha pincha sobre l en la ventana de previsualizacin. Al seleccionarlo puedes modificar alguna de sus propiedades en el marco que aparece en la parte inferior. Si este marco no est visible, pulsa con el botn derecho sobre el elemento en el marco de la derecha y seleccionas Properties, aparecer el marco en la parte inferior con la

55

Elgran libro de Android

fista de propiedades. Pega un vistazo a las propiedades disponibles para TextView modifica alguna de ellas. Vers como en muchos casos te aparece un desplegable con las opciones disponibles.

Los dos marcos de la izquierda te permiten insertar de forma rpida nuevos elementos a la vista. Puedes anastrar cualquier elemento de Layout o de Vrbw a la ventana de previsualizacin.

2.2.2. Layouts
Si queremos combinar varios elementos de tipo vista tendremos que utiliza un objeto de tipo Layout. Un Layout es un contenedor de una o ms vistas y controla su comportamiento y posicin. Hay que destacar que un Layout puede contener a otro Layout y que es un descendiente de la clase Vew.
La siguiente lista describe los Layout ms utilizados en Android:

LinearLayouf Dispone los elementos en una fila o en una columna.

TableLayout Distribuye los elementos de forma tabular. RelativeLayouf Dispone los elementos en relacin a otro o al padre. AbsoluteLayouf: Posiciona los elementos de forma absoluta.

FrameLayout Permite el cambio dinmico de los elementos que contiene.

Dado que un ejemplo vale ms que mil palabras, pasemos a mostrar cada uno de estos layouts en accin:

LinearLayouf

es el Layout ms utilizado en la prctica. Distribuye

los

elementos uno detrs de otro, bien de forma horizontal o vertical.

56

Diseo de la interfaz de usuario

<Ln**.r&ayou t xmlns : andrr:rid= ',Ji !: i : ,' ; . . and:rocl: layout_he j.ght= " i . ; .i_r:.; i. r,.ri,-i ', a nd;:o d : a ,-<ru t_lr' i. tlt \t = " f i .'j._;r., :;t ',,: n t.',
1. .!.

android: orienLat: ion

.1

,,ir+l

: i ;".';

"

,.

^',it.1

I r:,(iil i

r,;

(:

k
',r,:i-.:ti;_<: :'rr: (rji; i. " e i.,,

anCl:rclid: Ialrout_wi-dth=

ai-rdroid : layout_he ig|f = i'; ...1;r....3:.);.1t .: -'1.1,:c k !i.;x

ancloid : 1aycut... r,;idth=

ardroid : laycut*he ght = " i;;: air*,." .|ili a.ird::oi.d: text= "i.r .:'he ,:kB'tx",/>
.:

"i/,'i'-.?iL.:,:,i1r,ji i.

',

,.:ii i. "

iii_li

l:

ni]
iI

anclrO d : I a*Out-_v; i dt- h = " ri.-.'. :_,:' r:, ) i:,i) an<l::oi d : I ayor:t-_he gl-t = ",,r ti ,:)_..:. i !
>

it "

.]

an.<l:-i:: j. d : .r'J'cx1.:V j. :,,+

Lext = " i,l.-r

;:),:,t:

il

" .,

|i

'

ayor-rL.....1,r i rltf i= " u,i'ri.:... ,:_.,_'l i- ,,--.r t ,, ardro id : layout_he iqht = " ri'.. ::*i-.,-;l it r:it i'

anclrr: i d : l an.dro

"
>

<

/ti n}ar:l,ayout>

id

t exl. = " ii)

i; ry i. .;t

..,7.i.

.1 :

i i,

r2

r',.',,,'

TableLayouf distribuye los elementos de forma tabular. Se utiliza la etiqueta

TableRow cada vez que queremos insertar una nueva lnea.

<Tabletayout :crnlnll : android= "l.t.:',:.it: ,, / . . , android : 1ays11_i161qht=,'f I J l..-pa.rent " android : 1ayor.rt.-_v;i. dL.h= " .f-:r i 1.._,: - rent- ,,>
<?ableRow>
.: A.i:

* <:s(-.l
.1.

<>i:

r.
uL....

anCrCrid : 1ayOr-rL...width=,,',,rj_,.-'oi1i- en i.,,

anCrcr
.:

C:1

avo

he i gl'Ll. =,,

r d D--t:

on

!_

eil i, ",/

:,

(:i:(:rr:'i

lloz
3-

andro i ii : ayorrt _lvi dt- h.= ', ryr^ap_c.rn t e.r? | ,, andro i d : i ayouL _he i ghf- = " .1^ir p_ rct L r?n i,,
<,/TableRaw>
<Tab:-eRow> 'iiri.ii. i,:ir). ar.drc i d : i ayou
tj'....rv.r d

L.h=

alidrci d : iaycruL..,,he icht = ", .:ir_i_'rri i en t a:r.ft oid : iext='r ii-r l.r- i. iin ",! :,
-jr.--^!:;i ^--

"w

[ i p_c o n t e rl y

"
.'

and:t-.i d : .l.ayor:t_n'i. dth= ', wrap*cair i el a ,,

anCrrliC

: 1a,-oul......he

iittx=
_

,,w

anCrr:riC : iexl_ =', .h

) t

ap*r:ant eilt
J i d

"

.:'ui

i i) r a,' /.>

<lTableRow>

</Tabletayor:t:.

57

Elgran libro de Android

RelativeLayouf permite comenzar a situar los elementos en cualquiera de los
cuatro lados del contenedor e ir aadiendo nuevos elementos pegados a estos.
<

Rlativ',ayout xmlns :android= "htrp: /.i schemas. ., android: layout_height= " fi i i;arent android : layout_width=' i 1 i_pa ren t'
.:^irla l^ c;i;Cl arck android : id='
@

"
>

+ i d / Ana l. ogCi. ockA l' andro id : 1 ayouL_widt h= " vrrap_con t en t " andro id : layout_he ight = "rr'rap_con cen L o andro:ld : layout_al.:lgnParentTop= 'tr1.ten t' > .: riltie;r: k 3ox

android : d=' G + i d / CheckBox? l' andro d : layout_widbh=' w.rap_cont en c " android : 1ayou.t_height = "ri;:ap_conteiit " androld : layout_belovrs " @+ ld/ AnaLogeLock0

android: text='Ltn checkBox'

f.on

"

t'

:>

..:B',i:

android : d= " G + i- d / Bu t t o.n 0.1 " andro id : layorrt_wiclt}:^=' wrap_cont ent " android : l ayoul_he igh.t= "wrap_cotltent " android: text=' Lln bocn " andro:l d ; J. ayou t_b lovr' " + I d / Chec kBox 0 7 " / >
@

L.l'ext"Ve't

androd : id=

andro d : I ayout_rridbh=' wr a.tr>_c on t en i' android: layout_heigtrt.= "wrap_con e.nt

<

" Q +.i d

/ Text l,li elrtJ.f "

android : layout_a1 igmParntBol tom-'ru " andrcrid: Lext= "Lr Lexto cuaf guiera " '."

/Relativaf,ayout>

AbsoluteLayout permite indicar las coordenadas (x,y) donde queremos que se visualice cada elemento.

58

Diseo de la interfaz de usuario

<Absol $t.I'yd)$ t xml.ns : andro id= 'ht tit : ,i ,1sl---he.nia-c . an.ci::o i. ri : l.ayout _he i. ght = " f .i .i J_p i.-r?d t " an.rft:oj.rl: l.ayout_krid.th= " i. i. i_:,.rr-e.n| "t .r;irr: oqi:. cl'.: anclro i d : 1 ayout-*w <ltirr= " wr el_c a ]1 t.. e n i " andro j-d: 1ayout*height.= "nl^a,n_cont ent
"

android: layout_x= " 50tx" android: layouu_y= " 5opxtt /! >

4 ,:ih.:

andr:oi d : layor.rt_wdt.h.= 'h,-a:r_cr)rtten.i " ardroid : layouL_heiOh.t = ",'.rl:i_roir t e.n . "

c.l<ilox

android: text= "i/I <::he<:kBox" android : layout....x- " 75 0gty" android: layout_y= u 50px" ,t ,
.:8

it: t: (:'tl an r}:o j. d : l. ayou t _w i. dt

an.r}:o j. d : l.ayout _he i. ght =' rcr-ap_. android: t.exi= " iin l>oi i "

lt = " ,'.:.a:_ c'c n t en t " a n t eri a "

android: layout_x= " 50px" android : Iayout...y= " 2 5 qpx ",1 :,

.' ri\'1 '.r':,ii,;

andro i d ; l ayou
a

ts-*',!

h= " '.:"w

c' r:r ,'

e n t: "

nd ::o

i d : ayoi.rt
.1.

.h.e

andr:oi d : t-ex!-, = " i.Il I eJr I D

i.g.h.t =

r ap-di-r n I r-?n f
i.:

a..l cii.:

i era "

android: layou!_x= android: Iayout y=

<

"2

00px" t

>

/&bsoiutel,ayut:'

FrameLayouf posiciona todos los elementos usando todo el contenedor, sin distribuirlos espacialmente. Este Layouf suele utilizarse cuando queremos que varios elementos ocupen un mismo lugar pero solo uno ser visible. Para modificar la visibilidad de un elemento utilizaremos la propiedad visivility.

59

Elgran libro de Android

<Frae},ayout
xmlns : android= " hi
Ll> :

android : 1a1'out_height=' f ,.i_pa?:en t

/ schemas. . .

android: 1a1'out,_wiclth=,, f i l.i-_oarent

<.ir,na.l. ogL tl
-1.

,,>

"

ocl<
"
:,

android : 1ayouL.._width= " h/rap_con L ent

andro i d : 1 a you .i(illeilhBort.....he

i ght = " r,'rap_c

o 7

t en " /

android : layout_w<lth=' wra.p_cont: eni n andro id : l ayout_he ight = ,,-t-ap_con t en f ,, android : text='tI checkBox", >
<3u

Ii

L1n
n

android : 1ayout_widttl= wrap_c cnt- ent " android : layoue_heigllrL= " w z'ap_cont ent. " android: text= "t/l botn" androld : vietbiLl ty= " inv i s ibf e ",/
>,

":'lext Vi e*-

android : 1ayoub_wirlth= androl"d:vf slblltty=

"

"

u,raF_c, nL

arrdroid : layoub_he ight = " ?,'rap_c on t en L " android : text:.= " IJn text o cuaTqu iera "

nt

"

j.nvi.sib.!e" i

>

{,,r :i r ;tnli:

L,r:/illlt

:r

1. Modifica la vista actual insertando nuevos elementos 2. Visualiza el resultado en elemulador.

Layouts.

En algunas ocasiones, como en eJ AbsoluteLayout, tendremos que indicar las coordenadas donde ha de situarse un elemento. Dado que nuestra aplicacin podr ejecutarse en gran variedad de dispositivos con resoluciones muy diversas, Android nos permite indicar estas coordenadas de varias formas. En la siguiente tabla se muestran las diferentes posibilidades:

px (pxeles): Estas dimensiones representan los pxeles en la pantalla.

mm (milmetros): Distancia real medida sobre la pantalla.

in (pulgadas): Distancia real medida sobre la pantalla. pt (puntos): Equivale a 1172 pulgadas.

dp o dip (pixeles independientes de la densidad): Presupone un dispositivo de 160 pxeles por pulgada. Si luego el dispositivo tiene otra densidad,
se realizar la conespondiente regla de tres.

sp (pxeles escalados): Similar a dp pero tambin se escala en funcin del

tamao de fuente que el usuario ha escogido en las preferencias.

60

Diseo de la interfaz de usuario

1. Crea una vista basada en AbsoluteLayout. 2. Utiliza diferentes tipos de unidades para situar los elementos.
Tambin podemos utilizar otras clases de Layoufs, que son descritas a
continuacin:

ScrollView: Visualiza una columna de elementos; cuando estos no caben en

pantalla se permite un deslizamiento vertical.

ListView: Visualiza una lista deslizable verticalmente de varios elementos. Su

utilizacin es algo compleja. Se ver un ejemplo en el CAPITULO 7.

GridView: Visualiza una cuadrcula deslizable de varias filas

columnas.

varias

TabHost Proporciona una lista de ventanas seleccionables por medio de etiquetas que pueden ser pulsadas por el usuario para seleccionar la ventana que
desea visualizar.

ViewFlipper Permite visualizar una lista de elementos de forma que se

visualize uno cada vez. Puede ser utilizado para intercambiar los elementos cada

cierto intervalo de tiempo.

2.3. Una aplicacin de ejemplo: Asteroides

A lo largo de este libro vamos a ir creando una aplicacin de ejemplo que toque los aspectos ms significativos de Android. Comenzamos en este captulo creando una serie de vistas que nos permitirn disear un sencillo interfaz de
usuario. En primer lugar crea un nuevo proyecto con los siguientes datos: Ft.rl j ect. iarne : Aa.-:t:er'<:r:i. <je:
tsui. l.r:i T:rc,lt.: Ar,:i|ci.r:i L . A,tplicati.oi- :ame : Alrl icaciu Pra<:ka<;e ::itllle : orc , esart!1e . a)1-e.l-'o i,.ie*i f.;rc,ji.t e Ac t i..; i. t y ; .As l- r'< j. <j :; l..lir SlL Versic:r: f
e-; r-.:

NOTA: En el desarrollo del ejemplo hemos indicado que, para toder ejecutar la aplicacin necesitamos como versin mnima el SDK 3, correspondiente a Ia versin 1.5. No obstante, vamos a utilizar laversin del DSK L6, dado qtrc nos proporciona ciertos beneJicios respecto a versiones anteriores (por eiemplo iconos de la aplicacin en dif'erenles resolucitnrcs). Eslo es pe4fectamente posible, pero hav que tener precaucin de no utilizar ninguna caracter.sti<:a que no sea c'ontpatible c,on la
versin 1.5.

61

El gran libro de Android

1. Crea una vista similar a la que ves a continuacin:

formada por un LinearLayout que contiene un lexView y cuatro Bufton. Trata de utilizar recursos para introducir los cinco textos que apareoen.

Has de obtener un cdigo XML similar al siguiente:

.:

l,iiie arLal'out.
: r/,/ schema g . a:droid . ccm,/apk,/ res,/andrrr d ardroid : oriental-ion= "'erL ical r' android: 1ayor.rt....width= " f i.Il.....rrarent " android ; layout_he ight = " f i 1 l_..rcarent rt android: gravity= "ge3 u android: padtling= r'.i f ;! j. I ', <TeztView an<lroid: layou[_width=', f iil_parerrl "

xmlns : android= " ht tp

"

andr:od : Layout_he j.ght = !'vr:':t.p_ccnt.ent' andro i d : L ext. = " i.ls t r ing// t i iuioApi :. cac i on'l a:rci:'i:i.i.: g:'avii:1'= ', cenier "

a:rii:'iti.il:
..:ir:-r'L

Le:':i:$.i.:i:e=

"

25sp

"
"

a:rCi-ciC : i ayor.rt._..narginBot t oin=

But t on? ari,:lt:o i.d : 1arcui._he:i.ght= "rr'rap_con

di

"

>

Lcn

ielriro

iri : i d= " G + i d i

1'
tent '

62

Diseo de la interfaz de usuario a:r,iro

i.,.i : l. a-),..r ir
t...... j.

Li^,

="f

1 1._p a

r en i "
" ,r >

andrcid : t ezt= " Bstr ing,/Arrancar

<su:i-.rrr and::o1d:
a id

td.= " t?t.idi

f?uitan02

"

ro <j : 1.a.yrrir b_iie :i,iil = " wr ep_c on!-- en t " android: 1aycut....wi,Jt.h= ', fj i i_p arent, a-iro ici : Le-\L = " 4.9 4.r' i n g / C on .i gt..r ar " f >
<g!i:- io
a

rl

: r<l:l'i::.i.11

:i. <1

" Q.+

d t/

Eu

t on

0-1 "

andrci.J : 1a;*oitt....he
ardrc,:i.<i : t.exL=

ir;1!11

= "r,r_Lror't en a "
f: "

eirc i <i : 1. iay,:u L_w ici l:-r.= " f .i L,i Ji?r'en

'Gstring/Ar:ercade" i > <3':a:,nir .-.ndrord : !d=' 6 + id,t But ton 4', a-dr o i ct : I ai.c1 _1t* t <]i: t. = " i/rp- c-'on I e1 t a:'rcirr? i.i:i: ayout._w:. <i t:.it= " .f ii 7.J)arent " ar.lrciC : tezt= " Bst z' ing / Sat ir " i >
.L

"

<

L1:-14.n j:L:y'r:t1i: 2

Elfichero res/strings.xml ha de tener el siguiente contenido:

<aescll3'ceg:.
.: s 1'l'
<

ng ng <si::ir:g .: s:1: ::'ing

i
s
L

:'

i.

name = "^/.t.r';r'4.t (:::-L- " :' rTuga r.: ;' s i:: l' i ttg :" name = " Cor: f i grul-ar " :.Conf i gurarr,.i,s i. ::i.n.q

name= "Ace-r-cde ">Acerca de .:,/s!.ring> nalne= "ia: l.i.r' " :'Sa1 i r.: ;' I i::' i ng:' <si.rin.gl name= "titu.7oA>1-icac-ior">Asteroides<',.--;"r:.'i.ni]>

<slring
.. s L !'

nane= "heJ-lo ">Hel1o Wor1d, Asteroides i rlg.. name = " alp_.Darile " :"As te ro i de s.: ' s: i: i inc >

! <,/:::'inq:.

<.j res:otj:'t::e.g >

2.3.1. Usando recursos alternativos

en apasado y en vertical. Para conseguir este efecto con el emulador pulsa
Ctrl+F11. Si observas el resultado de la vista que acabas de disear en vertical no queda todo lo bien que deseariamos.

Los telfonos mviles basados en Android permiten cambiar la configuracin

63

El gran libro de Android

Android permite disear una vista diferente para la configuracin horizontal y

vertical.

Eiercicio

1. Crea la carpeta res/layout-land. 2. Copia en ella elfichero main.xml. 3. Crea una vista similar a la que ves a continuacin:

formada por un y que TableLayouf con dos Button contiene un lexVelv un LinearLayouf por columna.

Has de obtener un cdigo XML similar alsiguiente:

64

Diseo de la interfaz de usuario

<

xnl-ns : andro<1= ".hi t:,.

l:, n+;i i: I.,* "i:itt

i:.

,t t,

sr:hema.s . android . t:aot'ar.>k /::

"

e:-.

andr-o j. d,,

android : ori.entaf.ion= "yerf i ca- " and r:o i d : 1 a yorr f._v;i.ilth= " f i i -'p a r en i
.1.

and ro j. d

: 1. a yorr L_he . gh t = " f.i,1 l_:a.:en

"

android: grarri.ty= "ce.nte.: " android : pa.<1ili.rrg= " 3 )dip " >
{:!le}.i;i:V.:.*'d

and ro i d

: 1 a yorr : 1.a

andro id

f._vri.dtir= " f .i 1]_pa rn r " yorrt _he j.gl.t = " h'r:)_. con t .t L- "
t-

and ro i d : tex

"es

i r'..n9,/ i

:i
" "

r-

u.L

o,4pf.

:. c:a

cj

c.n "

android : gravi.t y= " ce.nt er androi.d: textSi.ze= "25sp

andr:o j.d
< :ilil)
-i.

: 1.a

you

marg i.nBot t an=

"

d.p " i
"

>

iii I.,ii i/:i u ;:.

andro j.d : l ayout_wi.dth= " fj 1.1.. _pare.ni andr:o id : l a yout-_he i.ght= 'f i .1 i.....l]a-r-en
arrdr:o j.d : gravi.
eRi::w >
i::

"

ly= " ce.r ir.r' " androd : stLetchcolumns= " * ">

< l!l..iti.

id= " 0 *.i ci, l}ut t on ().1 " and roi d : 1.a.you t_ltei girt = " vrrep__<:artr: ent " ardroid : l.ayoub_wi.dtil= "fj 7i_parent " and.r'oid : t-ext= " @:;tri.ng /Arrencar " i > <.[:iu!::i: i:in andr:oi.d: i.d= "8*.iciz l3uttant"2 " androi d : layout_hei girt = "w ap--cant ent. " a rdroi d : l. ayou f _w i.clt h= " f .i 7.i..-pa r ertt " androd: t,ext= "@striitg/Con.f igurar" / ,
{.t:ir
i:

*n

andr:o i.d

.:i.'elli *lir:rw> i:i: i:n an<iro ici : id= ":liJ\r

i d i tsut:. t on 0.3 " android: 1ayoriL_height.= "urap_ c:ontent.

"A+

"

android : layouL_width= " f j I j3arenr " android : Lext:= " G st. r' ing /' Acer ca<ie,' / ;,
<

ll\i

:!n anclro i<i : icl= " d +i <i../ !]ut. t on 0 4 " andro i d : 1 ayorr L_he i ghL = " ra'rap_cor.l ti en f "
i:ri:

android : layorrb_widLh= " f

an<lroici : Lext = " G s
<
t_-

j3arent
"

"

r' .!.itg

Sa

J..i.r'

>

/"1':air.l
b.!. e

e !tcr,.r :,

<,'i'*
< .;1,,,i.

l.e.iorj.t
:)

>'

n++.:: i,,:"'.:)r1tr

65

El gran libro de Android

Android utiliza una lista de sufijos para expresar recursos alternativos. Estos sufijos pueden hacer referencia a la orientacin del dispositivo, al lenguaje, la regin,la densidad de pxeles,la resolucin, elmtodo de entrada,...

Por ejemplo, si queremos traducir nuestra aplicacin al ingls, espaol y francs. Siendo el primer idioma el usado por defecto, crearamos tres versionei del fichero strings.xmly lo guardaramos en los siguientes tres directorios:
r:e s /v.1.1.r.ie.rs I st.

r'i.r:qs . xml
.

reef values - es,/strincts

res, vahes - f r/s

xml-

Lrincs . xnil

1. Crea la carpeta res/values-en. 2. Copia en ella elfichero strings.xml. 3. Traduce en este fichero todas las cadenas al ingls. 4. Ejecuta la aplicacin en el emulador y verifica que la aplicacin est en
ingls.

5.

Vamos a cambiar la configuracin de idioma delemulador. Para ello, accede alescritorio (Pulsando el botn con forma de casa). En la parte inferior aparecer un botn que permite desplegar un men con todas las aplicaciones instaladas.

Abre la aplicacin Seffings y desciende hasta enconlrar Locale & text. Dentro de esta opcin selecciona Se/ecf locale. Selecciona ahora

66

Diseo de la interfaz de usuario Spanish. Nota: Observa que en otros

idioma^s perrnie seleccionar tanto el idioma c'omo la regkin. Por desgracia, para el espaol no. Ejecuta de nuevo la aplicacin y observa cmo ha traducido el texto.

7.
rra ro

ejemplo de utilizacin de recursos diferenciados lo podemos ver al crear aplicacin con Eclipse a partir de la versin 1.6 de Android. En este caso no crear una nica carpeta drawable para almacenar el icono de la aplicacin, sino

les

segn la densidad de pxeles del dispositivo:

re lr /'Jraviabl

e - irdp

i'l i con' p:nq

res,/Crervial:Ie -;riC:i.i ic'l>n . -rrrg res/tir.tw.rb1e - lcipii iccn. png

Resulta posible indicar varios sufijos concatenados por ejemplo:

res,/.alues -en-rt-iS/
r:e :r,./. l. ue g - e n - r:I-l
K-

strings . zml
Ir
i. ni:

:/ s

s . zln

1.

Pero cuidado, Android estiablece un orden Rredes encontrar una lista de estos sufijos en:
1:

a la hora de

encadenar sufijos.
1:

-iand:: <>:i. <i - ,;ilk - w:i. rtd.oi"fi / (i:i<-':l /i gu::. <1*7i i:-o; i.i:: t;,/.'iilttlr i I .in . h I::i.i.,llAi i::e ni; t. *R*if:-:i:)11]:(:es-:

x c'i lt,/:r'+r:ri:)u

(:iif -

Para ver los sufijos disponibles tambin puedes pulsar con el botn derecho sobre una carpeta de recursos y seleccionar rirr > orh,*"':'... Selecciona Android > fudroid XML File. Esta opcin te permite crear un nuevo fichero XML y poner el
sufijo deseado de forma correcta.
Wlut type of resourcc <onfigurdicn uould you

--lvailable
i
i

lrike?

r2.-

QuLifis.s - {acouniryCode
fi$ L"n9u"g" G{ l'{eflon

"-

""-

,., l l

hosen Qualifierr

sue{)

Ll--__:;1
Smalt Normal
i

Sc.reen Sie

i l:lllNetworh Code

Hl.cs*--**.-J

t$n"*o

d
lp

oientatian
Touch Screen

@Pirel Denrit Kegboard

l$ fertlnput
rir f.lavigation
-11

I fi irne-r,sian,......................

67

Elgnan libro de Android

2.4, lmplementacin de una caa Acerca de

Veamos ahora como crear una caja Acerca de... y visualizarla cuando se pulse el botn adecuado. En primer lugar crea el fichero res/layouUacercade.xml. Para effo pulsa con el botn derecho sobre una carpeta res/layout, seleccionar sew > other:... Selecciona Android > Android XML File e indica en File acercade.xml. Selecciona la lengeta de edicin en XML y copia elsiguiente contenido:
<?xnr.l.
.:

Text: Vi er;

version= "1.. 0 " encotling= "utf-B "? > android r id= " 6+ i d.z'"ext V i ew0 1 " android : layout_widtl'= " wr ap_c ont ent " androd: layout_tre glrt= "wrap_content " xmlns : android= "itttp: /,/schemas. and'oi . com,tapk/res,/android" android:text="li.se proqrana ha si,Co desarroTlado como ejempTo en el. curso de and.roici para demostrar cmo se pueden Tanzar rlue\zas activiaaes desde 7a act!',,idad principaT.">

<

r''l'*xt."/i.ew."

Creamos ahora una nueva actividad, que ser la responsable de visualizar esta vista. Para ello crea el fichero AcercaDejava. Botn derecho sobre
por:

src/org.example.asferoides y seleccionamos Nely > C/ass. Reemplaza el cdigo

package crrg. ezianq:le . astercides;

lmport androicl. app. Act.ivity iurport ia:':clr'c i.ci . D. . ilr.rirr:11.e

,'

publ.Ic clase AcercaDe xterda Activity { ,r'** C;..Ll.r:<i wiic:ri Lhr activi.ty i.s first
(1,Cr,'erri-ce

cre;t'qd. t/'
t

public voLd onCreateiBurdle savedlnstanceStatei

super. on(:reale (savedInsLancesLaLe) setco!:t.entView (R. layout, . acercade') i
;

i
l
Pasemos ahora a crear un controlador de botn en la clase Asteroides.java
para que cuando sea pulsado se lance la nueva actividad.

pu.blic class AsterciCes extends Actir,'ity

68

Diseo de la inbrfaz de ustario

private 8utt,ox /** {Jalieci

@i.)v*::l':" i

bAcereaDe;

r,vie:-i

L}ie ac.l-i,il-y is-r fi.r.s.L cre.aLe<j.

,tr,

ile
onCre.rt:i: (t3rlrr(i:j.e f,:irv*d.!.ns.:ti:i*ni::eljt.*t-e) i
:* i.;i:;rr i:: . ma

public void

super . oncreaLe ( sa-eiiInsancssiae ) ;

$e i:Ci:irr !::entV i. *w ( R . I

in);

bAcercaDe *

bAcercaDe . set.SnCl"

{Button} findViewByld (R. i.Button13} ickti s tener {new OnClicklistener() { public void onCliek{View vie} {
lazarAcercale () ;

jt'
t

]
i.::::;::r'\r::el<-'*D* i

pub1.i.c voi.cl

frri.enr i = nehr inierrt.(this, .AercaDe.class); $i..riAci j.vlry (i ) ;

ii

NOTA: Para poder utilizar los objetos r?irr.-r;:, t'-tiii. l ji!, s;f ejier-.y ,,;t.q, hes de imporlar varios paquetes, para ello o puedes aadir a mano los ;ni:c:t-t.:.; ,recesarios
o tr

ulsar Ctrl-Shift-O, para que se aadan automticanxente los paquetes que faltan.

resultado no es satisfactorio Qu ha ocurrido?

Ejecuta ahora la aplicacin y pulsa en el botn Acerca de. observars que el

. El problema es que toda actividad que ha de ser lanzada por una aplicacin ha de ser regstrada en el fichero AndroidManifest.xmt. Para regiitrar la actividad abre AndroidManifest.xml y seleccona la lengeta Application. En Aplication Nodes pulsa el botn Add... y selecciona Activity". Rellena los campos de la derecha taLy como se muestra a continuacin:
69

Elgran libro de Android

f------------:- !

Ttr

actini$ tag.d:<lares

an

en&rald.4g.lrlirlty
a p* of

1.,,,.id

ru

.*,,,,:,!

clss that is avilabe ar part of thc packrgc's

1,ffi;j
[i,t*,# [.'D**;

rppHcrtion componcrtr. iRFkncting applkrti,on! usv intcrfrca

tht

Nmc*
Thcme

fs*-"-1

f,E**"|

tbcl kon

Iir;;] ru l**".1
!ffi

Observa como en elfichero xmlse aade la siguiente lnea:

<;.r,::t. v5. t.

.v

android: name= " . Ace.t',:.ile " android: label= {A::et:ci,le . . . " / >'

Ejecuta de nuevo el programa. El resultado ha de ser similar al mostrado a

continuacin:

70

Diseo de la interfaz de usuario

2A.1. Aplicando un tema

n$orarla aplicando un tema.
La vista mostrada en el ejemplo anterior no parece muy atractiva. Tratemos de

Un tema es una coleccin de estilos que cambia elaspecto de una de nuestras stas. Est inspirada en las hojas de estilo en cascada (css) que se emplean en b pginas web. Puedes utilizar alguno de los temas disponibles en Android o crear el tuyo propio.

Para definir tus propios estilos has de almacenarlos en res/values/stytes.xmt. En este caso utilizaremos uno de los de Android. Para ello abre AndroidManifest.xmly selecciona la lengeta Application. En Aplication Nodes pulsa sobre .AcercaDe y a la derecha introduce en elcampo Theme: elvalor:
@android :styleffheme.Dialog.

Si lo prefieres edita directamente el fichero AndroidManifest.xmlpara que incluya:

<a

c ir

v i.

i:',. andro id : name= " ^ ;,',i: e I t:: .).: " androi.<i : l.alel = "./].,:':.t:t;,,.')r: . " .
:i

"
ii'i.,:i.1.,:.'c.i "

androi.d : theme=

" iai:!7,:!f i:..;.i:i : ;:

i.v.l.,:t,"j'.it*:: .

>

Ejecuta de nuevo el programa y observa cmo mejora la apariencia:

71

Elgran libro de Android

2.5. Aadiendo un men

Android permite asignar mens contextuales

a las aplicaciones

que se

despliegan pulsando el botn men del telfono. Podemos asignar un men de este tipo a nuestra aplicacin de forma muy sencilla.

Crea una carpeta con nombre res/menu. Pulsar con el botn derecho sobre esta carpeta y seleccionar Neu > Other... Selecciona Android > Android XML File. lntroduce en el campo File: el valor menu.xml y verifica que queremos crear un fichero de tipo men. Aparecer una lista vaca de elementos de men. Pulsa en el botn Add.. aade un elemento de tipo ltem. lntroduce en el campo ld e! valor @+idlconfig y en el campo Title el valor Configuracin. Repite el proceso para introducir un nuevo tem con /d tomando el valor @+id/acercaDe y Title con el valor Acerca de ...

cAndroid Menu
f,der*r

fhmsnt

EI *o
t-.Ad;-l

Attrib*ter for confq {Item}

[J

Basc

attribute that art availab]e to all

@+idJccnf

hem objccb.

fril;l ru
[: ur.,j
i".s*"]]
t::j lll:1i:ii::::::::::::::l:l

ld
Menu

catcaory

Ordcr in c*egory

Title Tille<ondemed Icon

Alphabetic shortcut

Configurar

f.B***"1 t.:.::::1.:.:::::::::111*

f;ffi
r-...1

l,,Brcnlgr^*.!

Elfichero xml resultante se muestra a continuacin:

<rne:.u xmlns : android= "htt,p
: ,i

/schemas . ar:droiC. comr'apkz'res./a::.ircid"

i.r:'l "
I'

>

..:it-en android: id= t'rPai,rcr:nf ig" anriro i.d: t i.tl.e= " (]onf i.gir'ac
.:

>

it

ern android : icl=

i.l;'

".jr+

ic/acercaDe

android;title="Acerca de .. ." / >

.: ,/ill.rli'i

Para activar
Asteroides.java:

el

men has de introducir

el

siguiente cdigo

al final

de

72

Diseo de la interfaz de usuario

O."'e
r'.-i.'i. <1,i

public bo<Iean oncreateoptionsMenu(Menu menu) i

super . onCreateOpt. ionsMenu (menu ) ; Menulnf later inf later = get.MenuInf

later

,-

inf f at.er. inf late refurn true;

)
/\.-,. .-.--... Lr -

(R.menu .menu, menu) ;

public boolean onOpLionsltemselecLed (Menultern item) switch (item.getltemIdO ) i

caae R.id.acercaDe: lazarAcercaDe ( ) ; break;

return falae;
)

Ejecuta el programa y pulsa el botn MENU del telfono. Aparecer un men

desplegable como el que se muestra a continuacin:

Estilos y Temas

En el apartado anterior hemos visto lo sencillo que resulta aplicar uno de los temas disponibles en Android para mejorar el aspecto de una vista. Ahora aprenderemos algo ms sobre estilos y temas, tambin crearemos nuestros
propios estilos.

73

Elgran libro de Android

2.5.1. Los estilos

Un estilo es una coleccin de propiedades que definen el formato que tendr una vista. Podemos especificar cosas como tamao, mrgenes, color, fuentes, etc. Un estilo se define en ficheros XML, diferente alfichero XML Layoutque lo utiliza.

Veamos un ejemplo. Elsiguiente cdigo: <TextView

i. <l : i. ..vcirr i_vii. ilitr- ', .il :i. i. _tr);l r.erl. " arril:'o i.il i.;ri*orli:_he.i..h i - " ,*r'ar_cont_en i:. r' rn<i r:c i. <; : t_ *x i C'ci i. c.:r' * r' ii 0 fi F F 0 0 !' e.:l l:'c i.il : type f ;ii::e = " nc) to ripa 'e "

an<i rcr

.1.

a.<ircri.<i :

texi*'rtin Lext.o" />

Es equivalente a escribir:

<TextView s Lyle=

:t.r:i:r'oi.il: Iexf-= !'l.Jr

",8s t:y1

e/MiEsti

t.exto" />

10 "

Habiendo creado en el fichero res/val ues/styles.xml el siguiente cdigo: .:?xm1

version="I. ,' encoding=,'u-A',?>

rlarne=

<resources>

<sty1e
trMi.Estil.o{
,'aa;..rnciro
j. <i : *cl-y..

parent=

)ame= !'and::c i,.1.: .i.ayorrt ....irei.qirLr, >wrap_content< / item> < item ilame=,' and::oi d : textCclc:: " >#00FFO 0< / item> < i tem irame= !' encii-oiC : t-ypef ace', >monospace< / i tem>
<

<item < item

rlame=!'anC.:-.i.,1

:1.a./'orlt.....,ri.dLh">fill3arent</it.em>

cr,/Tt:xlApp,slriric.:t? .Ir,lcrilir:i " >

</sty1e> /resources>

observa como un estilo puede heredar la propiedades de un padre (parmetro parent) y a partir de estas propiedades rcalizat modificaciones.

1. Crea el estilo mostrado anteriormente. 2. Aplcalo en el Layouf acercade.xml.

74

Diseo de la interfaz de usuario Puedes encontrar una lista de todos los estilos disponibles en Android en: http://developer.a ndroid. com/reference/android/R.stvle. html

2.5.2. Aplicando temas

a aquellos elementos donde sea posible. Por ejemplo, CodeFont solo afectar al texto.
una vista individual. Cada elemento del estilo solo se aplicar
application:

Un tema es un estilo aplicado a toda una actividad o aplicacin, en lugar de a

Para aplicar un tema a toda una aplicacin edita el fichero AndrcidMarifest.xml y aade el parmetro android:thente en la etiqueta

<

app

l i c a t i on

a nci

rc,

j. ci. : l- hrmc: ' l i =

t'f l cj r/l.,i j. Tr:)ni.l

r' >

Tambin puedes aplicar un tema a una actividad en concreto: act ivi t.y

<

ano::c.,

i,i : t henle - ",i)s l-- i e / i'letna

11

"

>

1. 2. 3.

Crea un tema que herede de android:style/Therne.Dialog. lndica que el tipo de fuente sea rnonospace y el color de texto sea rojo. Aplica este tema a toda la aplicacin.

2.6. Aadiendo preferencas

Android nos facilita la configuracin de nuestro programa, al permitir aadir
una lista de preferencias. No hace falta usar cdigo, simplemente has de crear un nuevo fichero res/xml/settings.xml del tipo preferences y editarlo para que quede de la siguiente forma:

<

?r:rri

-e ::s

orr==

"

"

gna-o.i-l:..g=,' u I. f -

"

j-

>

,:Pref erenieSci'e11
xinllla.:irldr:o:i.d="itc-tr;,, 1':,-tr_:!l4nat:.;,;Lndrci.i..1 .a:oin/1>.k/r!:(:::,,at:r.ir-t>_i_tf andr:o i d : k.ty= " rl e f e-z^en ci ari.....r-i rtcip.e l " -,
,,

75

Elgran libro de Android

<.

C'h e c

hFcxP re f

r.:

r:r: :i c

android : key= "nr-c j ca ' anriroid : t.it le= " Ileprodu<: i r n s ica,' anclroid: summr:f= " Se rep.rr:duce nsi.ca de .f c:itdo" i
<

>.

LisLFreferelrce android: key= "graf icos " android: title= "Tipo de grf icos"
ardro j-d: sUmmial'f= "Se escoqe .i,a .r^e;-r-esen tacin anclro i.cl : en tri es= " G a.r' r ay,t pc> sGr a f i c o s "

dtl

g.r-f.i t:o.s',
"

android: entryvalues= " Garray/ riposGr:afi cosl,,alores anCroid : def aul t.Val ue-- " L " i >
<Eci t Tezt.Preference android: key= " 7'uo^en:os " anclro i. rl : t i. t. 1. e= " I,lt.ine.r o <.1e .F r a gme n t

androi-d:SummI)= oEtl cuantos

s' trozas se
c>

cU'j,Ce

ul asleroi<je"

android: def auItValue=

.:
./.1?

"-J ",'>

r'e f e re ice*( c :r'ee n ;'

Elresultado que obtendremos se muestra a continuacin:

Para almacenar

los

valores del desplegable has de crear

/res/values/arrays.xml con el siguiente contenido:

el

fichero

76

Diseo de la interfaz de usuario

<

l'e3-ii)il rce:-: >

<

i r inq - arr;r/
.: .: .i. i:: eni:-.b j<

ani=

"

t.

i po

s<|z' a

fi

<>

s,'

>,

i i-e:i>vectorial.: r i
1,-ren>3D<

I,eri>

tmap{./ :i. t 7r i i.eri:,

:-r

er:

:'

.: i si:. r' tnr - a r r'^.y <:ii:r.i.rl!T*;i'.:ir'a! llalli= "t).{t';,<r-t^^c:.co-'L/.r.lore.f;"->

.: r i. erii > 0 < ,;

.<

i.

e'r.:r

i:-eci:' 1

":

.i i:eri:"

.: .i r::el:i:..2 < ' .i. i::eri:.. <

.r

/ st.rlrrJ

- e-

Tr:a\i:,

geS::. ,/" f eSCUI

Crea ahora una nueva clase en src/../Preferencias.java con elsiguiente cdigo:

package cri: . exmple . ast ero

Ol,l)vr:li.'r i.r:it:

j-Clcs

public class Preferei:cis exCends FreferenceAct.irr1ti. protected vol"d

ar:ici F l'e
I I

r::r(lr.'e;t:e
(:r

ilr.riiiil.e ;:.irye:l:tiit:ar:<::e;9t;t:ei i
;

super . criCreate saveclirsta:rceSt.rtei

f
c :r-ln ri
$ F r.'rrnR e

i:r)u r c:rj

i F- .

xnr.l., s e

t t i ng s i

NOTA: En este cdigo no se han incluido los .iici>t,t'r, prrlsa Ctrl-Shift-O para
aad ir I os de for ma du t 0 mt ica.

No hay que olvidar registrar toda nueva actividad Ancrroic*4anif esr. xrnt.

Para activar la configuracin desde la opcin de men aade el siguiente cdigo en el fichero Jistercrrdes . ja.;;r en el mtodo oit(ipl-i.:lertemseiecteii i i
dentro delswtch.

caae R.i<l

.c<>nf i.g:
L':r':

:!:n:::eni- i. ,,. ne l ri.i: +nl:- ithis

si.aitrfrc.'i:- i v ir-'"' t i i
;

e.t'eni:: i.i: r,: , class

break;
Ananca la aplicacin y verifica que puedes lanzar las preferencias mediante la opcin de men correspondiente.

1.

Modifica Asteroides.java parc que se pueda acceder a las preferencias tanto desde el men como desde el botn de la primera actividad.

77

El gran libro de Android

2.6.1. Organizando preferencas

Cuando el nmero de preferencias es grande resulta interesante organizarlas de forma adecuada. Una opcin consiste en dividirlas en varias pantallas. De forma que cuando se seleccione una opcin en la primera panta[a, se abra una nueva pantalla de preferencias. Para anidar las preferencias usa el siguiente
esquema:
< F"'.-rlf

e-'.'enceSc:::t1i?It >
...r/ >

<CheckBcxP::ef ei'ence
<.Pl:

eli e l:)ICleSi:r'.'eelfl >

<,/

i P, *t *^ceSi: re en :' "f P r e f c r e rlcr e -q i:r ::'e en :.

.-

Ejercicio

1.

2. 3.

Crea una nueva lista de preferencias <F:reference$c::een> dentro de la lista de preferencias del fichero res/xml/seftings.xml. Asgnale al parmetro arrdroid: r.lLie el valor "Modo multijugador". Crea tres elementos dentro de esta lista: Activar multijugador, Mximo de jugadores y Tipo de conexin. Para este ultimo han de poder escogerse los valores: Bluetooth, Wi-Fie lnternet.

Otra opcin para organizar las preferencias consiste en agruparlas por

categoras. Con esta opcin se visualizarn en la misma pantalla, pero separadas por grupos. Has de seguir el siguiente esquema:
.: i.:".:'e.f

e:'eic:e:ic ::'esrl.L
...r/ >

<fiteckBcxf,::ef ei"ence
<1:::ef er en(::eC* teclc:t'./:.
": ,/

.:

/ l? r'e f

P::ef ere:rceCat eg1'; e re rr<-' e$i:: :l'een ;-

continuacin

se representa la forma en la que Android muestra las

categoras:

7B

Diseo de la interfaz de usuario

1.

Modifica el ejemplo anterior para que en lugar de mostrar las propiedades en dos pantallas, las muestre en una sola, taly como se muestra en la imagen anterior.

2.6.2. Gomo se almacenan los valores de las preferencas

Si modificas un valor de una preferencia, este quedar almacenado de forma permanente en el dispositivo. Para conseguir esta persistencia Android utiliza un fichero xml que se almacena en el sistema de ficheros.
Veamos donde se han almacenado las preferencias que acabamos de crear:

Para navegar por el sistema de ficheros de un dispositivo (tanto virtual como real) accede al men Windows > Show View > Others... > Android > File Expl. Busca el siguiente fichero: ldalaldatalorg.examples.asteroide/shared_prefs/
org.examples. asteroide_preferences.xml

79

Elgran libro de Android

t;r.-:s i-d.
:
ir::l.

i@

;-;hi; i;;i;;;itt'

'

3lttl-"
Sizr

Dc

Tim: Pmision

ip,(o"omrcffio{t'oPn*nn
org,mmple,Shape-Drawable

r 7;i org,mmple'stcroids i y rb r ijf. sharedtcfs

i.'i *Sol-p1e'
ast*rci
d

?010-03{2 08:32 dmr-xr-x 2010tr-04 15;2f. dw-xr-x 2810{6-07 17r0l dmr-rr-r

2010-06-0t 17:0l dwr-Yr-v

3010{6{9 14:01 dms--x

xgrrf aenc:m
I

.?66-.-2010{6-0s 2010-03-10 06156 dmrr-rr-x

lfili :;;;:::

Pulsa el botn para descargar el fichero y visualiza su contenido. Tiene que

ser similar a:
.:

lllii

[:r

>

.:bcoleair t:.me='rnusica' value=ntr!le'r,/> .:st ri-ng i:ame= I'r:rf icos " >1'< /st ring> .,. i; r i. l:i; il.llle * rr f ra;ntel t: <:r,; n :' :i': r/ ; - t ' ttg t
1-.
!

<,/na.r>

2.6.3. Accediendo a los valores de las preferencias

por supuesto, ser neoesaro acceder a los valores de las preferencias para alterar el funcionamiento de nuestra aplicacn. El siguiente ejemplo nos muestra
como realizarlo:

public void lllottt.r'tr'Pref erefic:ai; ( ) { llirar.ecli:ref er'*nctest pr'*f - geLjhareiiPref erences: i it "org. example. ascerides-pref erencest' . tiifft$,, ii# Sl.r:,nc- s = I'msica: 'r + ptgf .lteiBocleani"musicat'.true) +',, grf icog: " + pref .,:fetStrili+i"graf icostt t)i\ s, Tcast'LENGTH-SHOR?)'show{) ; Ttrrst ..rike?eri {this,
il

'

String s y los mtodos preferencias. utilizan Se le asigna los valores de dos de las parmetros: ( que de dos ( disponen y pref.getstring ), pref.getBoolean ) el valof de itei, que quefemos buscaf (":mr;;i.r::;r" Y "g::r.f ir::<>r.1 ") y gl valof asignado por defecto en caso de no encontrar esta xe1'.
privado (solo nuestra aplicacin tiene acceso). A continuacin crea el

comienza creando el objeto pref de la clase Sharedpreferences y le asigna un fichero de preferencias, abrindolo en modo

La funcin

Finalmente se visualiza

el

resultado utilizando

parmetros indicados Son el contexto (nuestra actividad), el eltiempo que se estar mostrando esta informacin.

la clase Toast. Los tres String a mostrar y

BO

Diseo de la interfaz de usuario

1. Copia la funcin anterior en la clase Asferoldes. 2. Asgnala a un botn. Por ejemplo, Jugar. 3. Aade el resto preferencias que hayas introducido.
1. 2.

Asigna al botn Sa7 el siguiente cdigo finish ( ) ;, De esta forma la actividad pasar a un segundo plano al pulsarlo.

2.7. Depurar
2.7.1. Depurar con Eclipse
El plug-in de Android para Eclipse tiene una excelente integracin con el depurador de Eclipse. lntroduce un error en tu cdigo modificando el cdigo fuente d lli:1.3i,'tr.rirri<:, pdIS que tenga eSte aspecto:

public class i:ol.aMi-rilli<i exLends Acl:iviLi, { ;'** (:a11eG wliei: r-iie act- ivili' ig f irst- creat,eci.. k i
i.;!\!r \!..r''.1.i/

public void cin(::re;al:e {3u:.<jle s-rll',e<iI::t:;ai!{:eii;l:ir1:e) gup er . cr tiL- r c: l- 1: ( si vr,.:,;i I ii. s t lic e S t: ;.r I cr ) ; r);:rject c - nul1;
i.
:.1

;,1

r..).

tcrj[.r i.ri-c O ; set ci:lt erlt\,'i ev

. 1.;r.i.o'.

ma

in);

l
Este cambio introduce un NullPointerException en tu cdigo. Si ahora ejecutas tu aplicacin, te aparecer esto:

B1

t-.tj'-,; /i t il f:',,i'.: ii: t 1 :..,rTE{',A a1

Elgran libro de Android

Pulsa "Force Glose" para finalizar la aplicacin

emulador.

y cerar la ventana

del

Para averiguar ms sobre el enor, inserta un punto de ruptura en el cdigo fuente en la lnea Object o = null; (el breakpoint se introduce haciendo doble clic en la bana de la izquierda). Entonces selecciona Run / Debug History / HolaMundo para entrar en modo debug. Tu aplicacin se reiniciar en el emulador, pero esta

vez quedar suspendida cuando alcance el punto de ruptura que se

ha

introducido. Entonces puedes recorer el cdigo en modo Debug, igual que se hara en cualquier otro entorno de programacin.

2.7.2. Depurar con mensajes Log

La clase Log proporciona un mecanismo para depurar nuestros programas o el funcionamiento de los objetos que estamos utilizando. Disponemos de varios tipos de mensajes taly como se muestra a continuacin:

para verificar

'ItetJ.E

(l:

Enofs

i;o!J.i.iit:Warnings

Laq.i O: lnformation Los.dlt:Debugging

Log.v i): Verbose
Modifica la clase ic,Llr"turido introduciendo la lnea que aparece en negrita:

82

Diseo de la interfaz de usuario

public class I..o1.if,ii:ri(i(:] extendB Acl.i.v.i.i::i' { ;'** i.lalle.l when lh* c:ivi::-; isl iirsi::
rt;O..'e

:r'eeit-etl

*7r

::':!.

i:)f:

public void t::nilr'*i:::e illr.,rdl* r:iiv'e(lIrl$i:.in.c*ii::ii::e) i L$9. d ( oHolaltlundo'r,'rEntrarloa en oncreate'r ) i super . cncreat e i Ea1,'ealrst.ancegt.aLe ) Ot;j*ci:: t:; = null; c. i:-o:il:r.ing ii ; sie l::Ccn i::en tV: *w i R . 1 a irciii i:: . main I ;
I j

/ Others...

Para ver el fichero de Log desde Eclipse accede al men Window / Android / LogOat.

Show View

LogCat puede utilizarse para detectar errores o problemas en el cdigo. Por eiemplo, si no tenemos muy claro qu parte del cdigo caus el error del ejemplo anterior, podemos buscar el ltimo error y ver cul fue la llamada de nuestro codigo que lo gener. En el siguiente cuadro se muestra como el error lo ha
ocasionado "holaAndroid.java: 1 0"

Pid ! !rj
3g t!

E9
Ad"oid:l'rnt rr

A]r.ridi:,nIrr$
rqt1

6rc
3, 0

r-r;.iiivil t: ns

9fj

ndridffuti:re rdf,rifiurt ii'.:'

l{sgs ,:'issi r a! .r

br :aa :h? ilrjifote:Erce:ic ril,intlrrid rn..:yE,it..irr:rir!r.'i,.i tdc,r :) il,irql apt frsttrrielrf,rllor.1|\{tj.r;i?(hrslelilsi:xfrrtti.-\.:ja? eair.i.l FF. ct, :!i itTir.si F8i irlrunriAar- i ti t r ir. 1 r' : t rThrE : ri i ! !,J!,+
.rh.r?zrsi'i.r r1rrl;'.'i..i

83