Curso PUDE

Desarrollo de Aplicaciones Mviles en Android

Ejercicio Bsico A: Vistas y Layouts

En el primer ejercicio, construimos una aplicacin sencilla entre todos paso a paso. En este segundo ejercicio el objetivo es que empecemos a coger un poco de soltura escribiendo cdigo para aplicaciones Android, tanto XML como Java.

A. Descripcin
En este ejercicio nos concentraremos en modificar solamente tres archivos de un proyecto Android: la Actividad (Java), la interfaz (XML) y los textos (XML). Esto lo conseguiremos aadiendo vistas (views) a una aplicacin por medio de XML, y luego nos conectaremos a ellas a travs de cdigo Java para poder actuar cuando se produzcan eventos, como la pulsacin de un botn En el camino, iremos descubriendo nuevas vistas, adems de nuevas propiedades y listeners.

B. Implementacin
Comenzaremos este ejercicio creando un nuevo proyecto Android desde Eclipse. Le asignamos un nombre, le damos una versin (recomendamos 2.2), un nombre a la aplicacin, a nuestro paquete (por ejemplo: com.[mi_nombre].android.apps.BasicoA) y a la Actividad que queremos que se nos cree por defecto; finalmente ponemos un 8 en el campo de versin mnima de SDK. Una vez le demos a Finalizar estaremos listos.

B.1. Primer layout

Vamos a comenzar editando el archivo de layout, el main.xml. En l tendremos ya la estructura creada por defecto, en la que destaca un TextView con un texto. Comenzaremos a trabajar aadiendo Views y ViewGroups1 bajo ste. Lo que queremos hacer es un clsico CheckBox para habilitar o no un ViewGroup, donde guardaremos una vista. Debido a que tambin queremos practicar los eventos de las Views, necesitamos tambin un TextView que acompae al ya mencionado CheckBox.

Las clases son en realidad View y ViewGroup, pero para hacer ms fcil entender que hablamos de ms de una, las mencionamos en plural y con la letra utilizada por el Eclipse.

Desarrollo de Aplicaciones Mviles en Android Ejercicio Bsico A: Vistas y Layouts Autores: Jorge Carballo Franquis David D. Harjani Harjani

Pgina 1 de 10

 El cdigo XML para poder aadir un CheckBox seguido de un TextView (main.xml) es el siguiente:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hello"> </TextView> <CheckBox android:id="@+id/enableViews" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/enableViews" android:checked="false"> </CheckBox> <TextView android:id="@+id/eventsTextView" android:layout_width="match_parent" android:layout_height="wrap_content" android:maxLines="2" android:minLines="2"> </TextView> </LinearLayout>

Como vemos, hemos aadido dos Views, un CheckBox y un TextView. A ambas les hemos dado un id, para poder referenciarlas desde el cdigo Java, y les hemos puesto las mismas caractersticas de anchura y altura. El CheckBox viene acompaado de un TextView internamente, ahorrndonos la tarea de tener que aadirlo nosotros para que sea intuitivo de usar. Para poder asignarle un texto solamente tenemos que utilizar la propiedad text. Por ltimo, hemos puesto por defecto que el CheckBox no est marcado (checked=false) En el caso de que queramos tenerlo marcado por defecto solamente tenemos que ponerlo a true. El TextView es muy sencillo. Las dos nicas propiedades que asignamos son nmero mnimo de lneas y nmero mximo de lneas, de forma que tenga altura suficiente para mostrar dos lneas de texto. Es una forma para forzar al TextView a que tenga la altura que queremos, pero no la mejor (veremos en otro ejercicio una forma mucho ms correcta y elegante)
Desarrollo de Aplicaciones Mviles en Android Ejercicio Bsico A: Vistas y Layouts Autores: Jorge Carballo Franquis David D. Harjani Harjani

Pgina 2 de 10

Con esto ya tenemos un interruptor y un lugar donde escribir. Ahora nos hace falta un LinearLayout que nos guarde las vistas con las que vamos a practicar un poco. Realmente, este Layout que vamos a aadir no es necesario, pero lo usamos para aprender. El cdigo que sigue al ltimo TextView (el eventsTextView) y que termina antes del cierre del LinearLayout principal (o raz), es el siguiente:

<LinearLayout android:id="@+id/myViewsLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_margin="7dp" android:visibility="gone"> <!-- Botn circular --> <RadioButton android:id="@+id/myRadioButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/myRadioButton"> </RadioButton> </LinearLayout>

A este LinearLayout le hemos dado un id, y le hemos asignado unas caractersticas de anchura y altura similares a las Views que hemos visto antes. Le hemos dicho que queremos que nos coloque las Views una debajo de otra (orientation=vertical), y le hemos dado un valor de layout_margin. El layout_margin (como su nombre indica) es una distancia que separa una View/ViewGroup cualquiera del marco en el que est situada, sean los lmites de la pantalla u otra View. layout_margin tiene una propiedad hermana, padding, que en este caso representa un margen dentro de la propia View. Existen muchos casos en la prctica en los que es muy fcil confundirlos porque sus resultados son iguales, pero en ningn caso representan lo mismo. Para nuestro ejemplo, utilizamos un layout_margin de 7dp (dp se explicar en un ejercicio posterior, por ahora interpretar que son pxeles), es decir, un margen de 7 pxeles respecto a las cuatro esquinas. El layout_margin (al igual que el padding) no tiene por qu ser respecto a las cuatro esquinas; tambin puede ser respecto a una esquina o lado en concreto (ver la propiedad layout_marginLeft y similares) Para terminar con el LinearLayout, tenemos la propiedad visibility puesta a gone. Como su nombre indica, la propiedad visibility determina si el LinearLayout es visible o no, y lo interesante es que si el LinearLayout no es visible, sus hijos no lo sern, aunque stos sean visibles. Una View tiene tres posibles estados de visibilidad: visible (por
Desarrollo de Aplicaciones Mviles en Android Ejercicio Bsico A: Vistas y Layouts Autores: Jorge Carballo Franquis David D. Harjani Harjani

Pgina 3 de 10

defecto), invisible y gone. visible es autoexplicativo, y la diferencia entre invisible y gone la veremos en el ltimo apartado. Para terminar aqu, tenemos el RadioButton, que es hijo de nuestro nuevo LinearLayout. Un RadioButton es un botn especial; deriva de la clase Button, y se parece mucho a un CheckBox, salvo por una cosa: el CheckBox puede funcionar como interruptor (apagado / encendido o viceversa), pero el RadioButton no. El RadioButton, una vez marcado, no puede desmarcarse. Por lo dems, su declaracin no contiene nada nuevo. Ahora lo ideal sera marcharnos a modificar cdigo Java, pero no podemos. Como Eclipse ya os habr avisado, existen errores que debemos solucionar. Si todo ha marchado bien, los errores provienen de las propiedades text, que referencian a una cadena (String) del archivo strings.xml que an no hemos aadido. Por tanto, vaymonos al archivo strings.xml y dejmoslo como est aqu:
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, ViewsAndLayouts!</string> <string name="app_name">Vistas y Layouts</string> <string name="enableViews">Activar Layout</string> <string name="myRadioButton">Botn circular</string> </resources>

Con este cdigo XML, los errores del main.xml deberan desaparecer. Ahora, por fin, podemos empezar a jugar con Java.

B.2. Java y eventos

Abrimos nuestra Actividad, y lo primero que haremos es preparar las cosas como a nosotros nos gustan: nuestro mtodo initConfig(). Comenzaremos dejando el cdigo de nuestra Actividad (lo que va dentro de la definicin de la clase) como vemos aqu:

Desarrollo de Aplicaciones Mviles en Android Ejercicio Bsico A: Vistas y Layouts Autores: Jorge Carballo Franquis David D. Harjani Harjani

Pgina 4 de 10


/** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // llamamos a nuestro mtodo de inicializacin initConfig(); } private void initConfig() { setContentView(R.layout.main); }

Como habris adivinado, el grueso de nuestro cdigo de hoy va dentro del mtodo initConfig(). Sin embargo, antes de empezar, necesitamos declarar las variables que vamos a utilizar. Para ello, aadimos el siguiente cdigo justo antes del mtodo onCreate():
private private private private CheckBox enableViews; TextView eventsTextView; LinearLayout myViewsLayout; RadioButton myRadioButton;

stas son las cuatro referencias que vamos a necesitar. Lo siguiente es inicializar las variables en el mtodo initConfig():

enableViews = (CheckBox) findViewById(R.id.enableViews); eventsTextView = (TextView) findViewById(R.id.eventsTextView); myViewsLayout = (LinearLayout) findViewById(R.id.myViewsLayout); myRadioButton = (RadioButton) findViewById(R.id.myRadioButton);

Sin duda, ste es un buen momento para arrancar la aplicacin. Al hacerlo, vemos nuestro CheckBox, y al tocarlo vemos que se marca y que se desmarca, pero no ocurre nada ms. Qu es lo que queremos que ocurra? Pues que el LinearLayout se vuelva visible si el CheckBox est marcado. Cmo lo hacemos? Con un listener:

Desarrollo de Aplicaciones Mviles en Android Ejercicio Bsico A: Vistas y Layouts Autores: Jorge Carballo Franquis David D. Harjani Harjani

Pgina 5 de 10

enableViews.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (isChecked) { myViewsLayout.setVisibility(View.VISIBLE); } else { myViewsLayout.setVisibility(View.GONE); } } });

Este listener nos da como parmetros el botn en cuestin, que no nos hace falta, y un boolean con la situacin actual sobre si est marcado o no. Es importante tener presente que esta llamada se produce despus de que el CheckBox cambie de estado, no antes. Lo nico que debemos hacer es cambiar el estado de visibilidad segn el booleano, a visible o a gone. Con esto, ya deberamos conseguir nuestro objetivo: que sea vea y que no sea vea el RadioButton. Qu nos queda? El propio RadioButton:
myRadioButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { eventsTextView.setText("myRadioButton ha cambiado de estado."); }); }

Probemos ahora. Vemos que funciona perfectamente, pero se nos formula otra pregunta, y es, cuntas veces se ejecuta este listener? Averiguarlo es muy fcil. Lo primero es declarar una variable de tipo int, por ejemplo clickTimes; la declaramos como privada debajo de las dems variables, justo encima del mtodo onCreate(). Luego, alteramos el cdigo del listener, aadiendo una lnea antes para inicializar clickTimes a cero:
Desarrollo de Aplicaciones Mviles en Android Ejercicio Bsico A: Vistas y Layouts Autores: Jorge Carballo Franquis David D. Harjani Harjani

Pgina 6 de 10

clickTimes = 0; myRadioButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { clickTimes++; eventsTextView.setText("Clicked " + clickTimes + " times."); } });

Es importante sealar que la lnea clickTimes = 0 se ejecuta una sola vez, pero el cdigo que est dentro del setOnCheckedChangeListener se ejecuta cada vez que el RadioButton cambie de estado, que es lo que nos promete este listener. Solamente tenemos que ejecutar este cdigo para probarlo. Si de verdad quisiramos contar cuntas veces hacemos click en el RadioButton, lo nico que tendramos que hacer es cambiar de listener, y utilizar el onClickListener, que se ejecuta una vez por cada click, independientemente de si se cambia de estado o no:
clickTimes = 0; myRadioButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { clickTimes++; eventsTextView.setText("Clicked " + clickTimes + " times."); } });

B.3 Visibilidad
El ltimo apartado de este ejercicio es tambin el ms corto. Aqu, finalmente, descubrimos la diferencia entre que una View tenga visibilidad invisible o gone. Para ello, debemos volver al main.xml, y aadir una nueva View, justo donde lo dejamos antes, es decir, tras el cierre (</LinearLayout>) del Layout que guarda al RadioButton. ste es el cdigo a aadir:

Desarrollo de Aplicaciones Mviles en Android Ejercicio Bsico A: Vistas y Layouts Autores: Jorge Carballo Franquis David D. Harjani Harjani

Pgina 7 de 10


<ToggleButton android:id="@+id/toggleVisibility" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textOn="@string/invisible" android:textOff="@string/gone"> </ToggleButton>

El ToggleButton es una mezcla (a nivel de concepto) entre el CheckBox y el Button convencional. Bsicamente, es un botn clsico con estado, donde una luz nos indica si est marcado o no. Visualmente, se parece mucho ms a un interruptor que un CheckBox, pero a nivel prctico (de programacin, no as para el usuario) son lo mismo. La primera novedad es que no hemos declarado que ocupe todo el ancho de la pantalla, lo cual nos da pie para la nueva propiedad que vemos all, layout_gravity. Lo que nos permite layout_gravity es decirle al contenedor (padre) de una View dnde quiere que nos coloque en el caso de que no ocupemos todo el espacio que podemos ocupar. Por ejemplo en este caso, ninguna otra View se colocar a la misma altura de este ToggleButton, por lo que nosotros hemos decidido que queremos que est en el centro. Despus tenemos que la propiedad text est dividida en dos casos aqu, una para cuando el botn est presionado o marcado (textOn), y otra para cuando no lo est (textOff). Como siempre, si todo ha ido bien, los errores que tendremos sern porque nos falta declarar las dos cadenas en el archivo strings.xml: <string name="invisible">Invisible</string> <string name="gone">Gone</string> Ahora volvemos al cdigo Java, que es donde se producen los cambios. Qu queremos con el botn? Muy sencillo: siempre y cuando el CheckBox no est activo, si el ToggleButton est apagado la visibilidad de myLinearLayout ser gone, y si est activado ser invisible. Los dos siguientes pasos os los dejamos a vosotros: declarar la variable ToggleButton toggleVisibility y unirla con la View de la interfaz XML. Por ltimo, y ya para terminar, aadimos este cdigo al initConfig(), y habremos terminado:
Desarrollo de Aplicaciones Mviles en Android Ejercicio Bsico A: Vistas y Layouts Autores: Jorge Carballo Franquis David D. Harjani Harjani

Pgina 8 de 10

toggleVisibility.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (!enableViews.isChecked()) { if (isChecked) myViewsLayout.setVisibility(View.INVISIBLE); else myViewsLayout.setVisibility(View.GONE); } } });

C. Conclusin
El objetivo de este ejercicio no era aburriros, ni mucho menos sino que os sintierais cmodos trabajando con la parte XML y la de Java que permite construir las interfaces. Hay muchas propiedades y muchos listeners que descubrir, as que adelante!

Desarrollo de Aplicaciones Mviles en Android Ejercicio Bsico A: Vistas y Layouts Autores: Jorge Carballo Franquis David D. Harjani Harjani

Pgina 9 de 10

D. Opcionales

Para aquellos alumnos a los que el ejercicio os ha sabido a poco, o que habis terminado antes, proponemos una serie de cambios o modificaciones: - Qu ocurre si myViewsLayout, en vez de ser de tipo LinearLayout, lo pusiramos de tipo ViewGroup, relizando los cambios pertinentes en nuestro cdigo Java? Funcionara? Se comportara el cdigo de la misma forma? Por qu? El CheckBox enableViews lo estamos inicializando desde XML, dndole un texto y un estado de no marcado. En vez de hacerlo en XML, hagmoslo en Java. Primero habra que borrar las dos lneas pertinentes en el XML, y luego aadir otras dos de cdigo Java. Hemos visto que el RadioButton slo puede ser marcado una vez. Qu podemos hacer para intentar que funcione como un botn normal? Funciona? La forma en la que utilizamos el ToggleButton no es del todo correcta, porque si cuando los dos estn activados (ToggleButton y el CheckBox) desactivamos el CheckBox, myViewsLayout se queda en gone en vez de invisible (ToggleButton marcado) Solucionarlo. (Pista: de qu tipo son View.VISIBLE, View.INVISIBLE y View.GONE?)

- -

Desarrollo de Aplicaciones Mviles en Android Ejercicio Bsico A: Vistas y Layouts Autores: Jorge Carballo Franquis David D. Harjani Harjani

Pgina 10 de 10