Jesus Tomás Gironés - El gran libro de Android

Ejercicio: Aplicando un tema del sistema

1.Abre el proyecto Asteroides.

2.Aplica a la actividad principal el tema android:style/Theme.Dialog tal y como se acaba de mostrar.

3.Visualiza el resultado.

Práctica: Creando un tema en Asteroides

1.Abre el proyecto Asteroides.

2.Crea un tema llamado TemaAsteroides que herede de android:style/Theme.NoTitleBar. Este tema no muestra la barra con el nombre de la aplicación.

3.Aplica este tema a la aplicación.

En este apartado vamos a aprender a usar varios tipos de vistas y layouts desde un punto de vista práctico. También empezaremos a escribir código que se ejecutará cuando ocurran ciertos eventos:

Ejercicio: Un botón con gráficos personalizados

1.Crea un nuevo proyecto con los siguientes datos:

Application name: MasVistas

Activity Name: MasVistasActivity

2.Crea la carpeta drawable dentro de la carpeta res. Para ello pulsa con el botón derecho sobre la carpeta res y selecciona New > Folder.

3.Crea el fichero boton.xml en la carpeta res/drawable/. Para ello puedes utilizar el menú File > New > Android XML File e introduce en el campo File: “botón” y en el campo Resource Type selecciona Drawable. Reemplaza el código por el siguiente:

Este XML define un recurso único gráfico (drawable) que cambiará en función del estado del botón. El primer ítem define la imagen usada cuando se pulsa el botón, el segundo ítem define la imagen usada cuando el botón tiene el foco (cuando el botón está seleccionado con la rueda de desplazamiento o las teclas de dirección) y el tercero, la imagen en estado normal. Los gráficos, y en concreto los drawables, se estudiarán en el capítulo 4.

NOTA: el orden de los elementos es importante. Cuando se va a dibujar se recorren los ítems en orden hasta que se cumpla una condición. Debido a que “boton_normal” es el último, solo se aplica cuando las condiciones state_pressed y state_focused no se cumplen.

4.Descarga de http://www.androidcurso.com/index.php/119 las tres imágenes que aparecen a continuación. Para bajar cada imagen, pulsa sobre ella con el botón derecho y selecciona Guardar imagen como… El nombre que ha de tener cada fichero se indica a continuación:

5.Arrastra estas imágenes a la carpeta res/drawable/ del proyecto.

6.Abre el fichero res/layout/activity_main.xml.

7.Elimina el TextView que encontrarás dentro del LinearLayout.

8.Selecciona el LinearLayout e introduce en el atributo Background el valor #FFFFFF.

9.Arrastra una vista de tipo Button dentro del LinearLayout.

10. Selecciona el atributo Background y pulsa el botón selector de recurso (con puntos suspensivos). Selecciona Drawable/boton.

11. Modifica el atributo Text para que no tenga ningún valor.

12. Introduce en el atributo onClick el valor sePulsa.

A continuación se muestra el código resultante para activity_main.xml:

13. Abre el fichero MasVistasActivity.java e introduce al final, pero antes de la última llave, el código:

NOTA: pulsa Ctrl-Shift-O para que se añadan automáticamente los paquetes que faltan en la sección import.

El método anterior se ejecutará cuando se pulse el botón. A este tipo de métodos se los conoce como escuchadores de eventos (listeners). Este método se limita a lanzar un toast, es decir, un aviso que permanece cierto tiempo sobre la pantalla y luego desaparece. Los tres parámetros son: el contexto utilizado, que coincide con la actividad, el texto a mostrar y el tiempo que permanecerá este texto. Los conceptos de actividad y contexto se desarrollarán en el siguiente capítulo.

14. Ejecuta el proyecto y verifica el resultado.

Ejercicio: Acceder y modificar las propiedades de las vistas por código

1.Abre el layout activity_ main.xml creado en el ejercicio anterior.

2.En la paleta de vistas, dentro de Text Fields, busca Number (Decimal) y arrástralo encima del botón rojo.

3.Modifica algunos atributos de esta vista: Hint = “Introduce un número”, id = “@+id/entrada”.

4.En la paleta de vistas, dentro de Form Widgets, busca Button y arrástralo encima del botón rojo.

5.Modifica algunos atributos de esta vista: Haz que su anchura ocupe toda la pantalla, que su texto sea “0” y que su id sea “button0”.

6.En la paleta de vistas, dentro de Form Widgets, busca Large Text y arrástralo debajo del botón rojo.

7.Modifica algunos atributos de esta vista: TextColor = #0000FF, Text = “”, Hint = “Resultado”, id = “@+id/salida”.

8.Abre el fichero MasVistaActivity.java. Vamos a añadir dos nuevas propiedades a la clase. Para ello copia el siguiente código al principio de la clase (antes del método onCreate()):

NOTA: recuerda pulsar Ctrl-Shift-O para que se añadan los paquetes de las dos nuevas clases utilizadas.

9.Copia al final del método onCreate() las siguientes dos líneas:

Como se explicó al principio del capítulo, las diferentes vistas definidas en activity_main.xml son creadas como objetos Java cuando se ejecuta setContentView(R.layout.activity_main). Si queremos manipular algunos de estos objetos hemos de declarar las variables (paso 8) y asignarles la referencia al objeto correspondiente (paso 9). Para ello, hay que introducir el atributo id en XML y utilizar el método findViewById(R.id.valor_en_atributo_id). Este método devuelve un objeto de la clase View. No obstante, los objetos declarados (entrada y salida) no son exactamente de esta clase, sino una subclase de View, y Java no permite una asignación directa. En estos casos hemos de utilizar una conversión de tipo (type cast) para poder hacer la asignación. Para más información al respecto, léase el apartado Polimorfismo 13del tutorial de Java Esencial.