El gran libro de Android

2.4. Una aplicación de ejemplo: Asteroides

A lo largo de este libro vamos a ir creando una aplicación de ejemplo que toque los aspectos más significativos de Android. Comenzamos en este capítulo creando una serie de vistas que nos permitirán diseñar una sencilla interfaz de usuario. Si quieres ver cómo quedará la aplicación una vez termines el libro, puedes ver el siguiente vídeo:

Vídeo[tutorial]: Asteroides

Enlaces de interés:

• Asteroides: Puedes descargarte la aplicación de Google Play:

https://play.google.com/store/apps/details?id=es.upv.mmoviles.asteroides&hl

Práctica: Creación de la aplicación Asteroides

1. Crea un nuevo proyecto con los siguientes datos:

Phone and Tablet / Empty Activity

Name: Asteroides

Package name: org.example.asteroides

Language: Java

Minimum API level: API 19 Android 4.4 (KitKat)

NOTA: Deja el resto de los parámetros con su valor por defecto.

2. Abre el fichero res/layout/ activity_main.xml y trata de crear una vista similar a la que ves a continuación. Ha de estar formada por un LinearLayout que contiene un TextView y cuatro Button. Trata de utilizar recursos para introducir los cinco textos que aparecen.

Solución:

1. El fichero activity_main.xml ha de ser similar al siguiente:

2. El fichero res/values/strings.xml ha de tener el siguiente contenido:

Práctica: Uso de ConstraintLayout en Asteroides

Repite la práctica anterior pero esta vez usando un ConstraintLayout:

2.5. La aplicación Mis Lugares

En este libro vamos a crear una segunda aplicación con características muy diferentes de Asteroides. Tendrá por nombre Mis Lugares y permitirá que los usuarios guarden información relevante sobre los sitios que suelen visitar (restaurantes, tiendas, etc.). En el capítulo 1 se implementaron algunas clases de esta aplicación y se presentó un vídeo que describía su funcionamiento. A diferencia de Asteroides, esta aplicación utilizará un diseño y varios elementos de Material Design. Una explicación más extensa de estos conceptos se abordará en El Gran Libro de Android Avanzado. Para más información sobre Material Design y el siguiente ejercicio te recomendamos un tutorial ¹⁷.

Vídeo[tutorial]: Mis Lugares

Ejercicio: Creación de la aplicación Mis Lugares

1. Crea un nuevo proyecto con los siguientes datos:

Phone and Tablet / Scrolling Activity

Name: Mis Lugares

Package name: com.example.mislugares

Language: Java ó Kotlin

Minimum API level: API 19 Android 4.4 (KitKat)

De esta forma, se creará una aplicación con una actividad basada en Material Design. Dispondrá de una barra de acciones y un botón flotante. El contenido principal podrá desplazarse, a la vez que la barra de acciones cambia de tamaño.

2. En el navegador de proyecto pulsa con el botón derecho sobre la clase ScrollingActivity y selecciona Refactor > Rename. Introduce como nuevo nombre MainActivity. En la carpeta res/layout renombra el fichero activity_scrolling.xml por activity_main.xml. En la misma carpeta renombra content_scrolling.xml por content_main.xml. Finalmente, en la carpeta res/menu renombra menu_scrolling.xml por menu_main.xml.

3. Ejecuta el proyecto y verifica su comportamiento:

NOTA: Además del tutorial indicado puedes hacer el siguiente ¹⁸.

Práctica: Creación de una primera actividad en Mis Lugares

En esta práctica crearemos una primera actividad que contendrá simplemente cuatro botones.

1. Edita el fichero res / layout / content_main.xml y trata de crear una vista similar a la que ves a continuación. Has de dejar el NestedScrollView que ya tenías y reemplazar el TextView por un ConstraintLayout o LinearLayout que contenga cuatro Button. Un NestedScrollView solo puede contener dentro un elemento, por lo que no puedes introducir directamente los cuatro botones. Usando un layout que los contenga se resuelve el problema.

Solución: http://www.androidcurso.com/index.php/115

Práctica: Un formulario para introducir nuevos lugares

El objetivo de esta práctica es crear un layout que permita introducir y editar lugares en la aplicación Mis Lugares.

1. Crea un nuevo layout con nombre edicion_lugar.xml.

2. Ha de parecerse al siguiente formulario. Puedes basarte en un LinearLayout o un ConstraintLayout para distribuir los elementos. Pero es importante que este layout, se encuentre dentro de un NestedScrollView para que cuando el formulario no quepa en pantalla se pueda desplazar verticalmente.

3. Introduce a la derecha del TextView con texto “Tipo:” un Spinner con id tipo. Más adelante configuraremos esta vista para que muestre un desplegable con los tipos de lugares.

4. Las vistas EditText han de definir el atributo id con los valores: nombre, direccion, telefono, url y comentario. Utiliza también el atributo hint para dar indicaciones sobre el valor a introducir. Utiliza el atributo inputType para indicar qué tipo de entrada esperamos. De esta manera se mostrará un teclado adecuado (por ejemplo, si introducimos un correo electrónico aparecerá la tecla @).

NOTA: El atributo inputType admite los siguientes valores (en negrita los que has de utilizar en este ejercicio): none, text, textCapCharacters, textCapWords, textCapSentences, textAutoCorrect, textAutoComplete, textMultiLine, textImeMultiLine, textNoSuggestions, textUri, textEmailAddress, textEmailSubject, textShortMessage, textLongMessage, textPersonName, textPostalAddress, textPassword, textVisiblePassword, textWebEditText, textFilter, textPhonetic, textWebEmailAddress, textWebPassword, number, numberSigned, numberDecimal, numberPassword, phone, datetime, date y time.

5. Abre la clase MainActivity y en el método onCreate() reemplaza el layout:

setContentView(R.layout<strike>.activity_main</strike>.edicion_lugar)

6. Comenta todas las líneas de este método que hay debajo usando /* ... */. Como ya no se crea el layout activity_main los id de vista a los que se accede ya no existen.

7. Ejecuta la aplicación y verifica cómo cambia el tipo de teclado en cada EditText.

8. Deshaz el cambio realizado en el punto 5 y 6.

Solución: http://www.androidcurso.com/index.php/115

2.6. Recursos alternativos

Una aplicación Android va a poder ser ejecutada en una gran variedad de dispositivos. El tamaño de pantalla, la resolución o el tipo de entradas puede variar mucho de un dispositivo a otro. Por otra parte, nuestra aplicación ha de estar preparada para diferentes modos de funcionamiento, como el modo “automóvil” o el modo “noche”, y para poder ejecutarse en diferentes idiomas.

A la hora de crear la interfaz de usuario, hemos de tener en cuenta todas estas circunstancias. Afortunadamente, la plataforma Android nos proporciona una herramienta de gran potencia para resolver este problema: el uso de los recursos alternativos.

NOTA: Las prácticas de este apartado se proponen para la aplicación Asteroides, pero también pueden realizarse con Mis Lugares.

Práctica: Recursos alternativos en Asteroides

1. Ejecuta la aplicación Asteroides (o Mis Lugares).

2. Los teléfonos móviles basados en Android permiten cambiar la configuración en apaisado y en vertical. Para conseguir este efecto con el emulador, pulsa el botón . Si usas un dispositivo de pantalla pequeña, observas como el resultado de la vista que acabas de diseñar en vertical no queda todo lo bien que desearíamos.

Para resolver este problema, Android te permite diseñar una vista diferente para la configuración horizontal y otra para la vertical.

3. Pulsa con el botón derecho sobre la carpeta res/layout y selecciona New > Layout resource file. Aparecerá una ventana donde has de rellenar en File name: activity_main, en Available qualifiers: selecciona Orientation y pulsa en el botón >>. En el desplegable Screen orientation: selecciona Landscape. Pulsa en OK. Observa como ahora hay dos recursos para el fichero activity_main.xml.

El primero es el recurso por defecto, mientras que el segundo es el que se usará cuando el dispositivo esté en orientación Landscape.

4. Crea en el nuevo layout (land) una vista similar a la que ves a continuación: formada por un TableLayout con dos Button por columna.

5. Ejecuta de nuevo la aplicación y observa como la vista se ve correctamente en las dos orientaciones.

Solución:

Has de obtener un código XML similar al siguiente:

NOTA: Para conseguir que en un TableLayout las columnas se ajusten a todo el ancho de la tabla, poner stretchColumns="*". stretchColumns="0" significa que se asigne la anchura sobrante a la primera columna. stretchColumns="1" significa que se asigne la anchura sobrante a la segunda columna. stretchColumns="*" significa que se asigne la anchura sobrante entre todas las columnas.

Android utiliza una lista de sufijos para expresar recursos alternativos. Estos sufijos pueden hacer referencia a la orientación del dispositivo, el lenguaje, la región, la densidad de píxeles, la resolución, el método de entrada, etc.

Por ejemplo, si queremos traducir nuestra aplicación al inglés, español y francés, siendo el primer idioma el usado por defecto, crearíamos tres versiones del fichero strings.xml y lo guardaríamos en los tres directorios siguientes:

res/values/strings.xml

res/values-es/strings.xml

res/values-fr/strings.xml

Aunque internamente el SDK de Android utiliza la estructura de carpetas anterior, en Android Studio el explorador del proyecto muestra los recursos alternativos de la siguiente manera:

res

values

strings.xml(3)

strings.xml

strings.xml(es)

strings.xml(fr)

Ejercicio: Traducción de Asteroides

1. Crea un nuevo recurso alternativo para strings.xml (en): Pulsa con el botón derecho en res/values, selecciona New > Values resource file e introduce strings como nombre de fichero. Mueve el cualificador Locale (o Language) desde el marco de la izquierda a la derecha, pulsando el botón >>. En Language selecciona English, en Specific Region Only deja el valor Any Region y pulsa OK.

NOTA: Observa cómo además del idioma también permite seleccionar la región. De esta forma podremos diferenciar entre inglés americano, británico, australiano, …

2. Copia el contenido del recurso por defecto, strings.xml, al recurso para inglés, strings.xml (en). Traduce los textos al inglés. No has de traducir los nombres de los identificadores de recursos (accion_mostrar, app_name, …) estos han de ser igual en todos los idiomas.

3. Ejecuta la aplicación.

4. Vamos a cambiar la configuración de idioma en un dispositivo Android. Para ello accede a Ajustes del dispositivo (Settings) y selecciona la opción Personal > Idioma y entrada. Dentro de esta opción selecciona como idioma Español o Inglés. NOTA: Observa que en otros idiomas permite seleccionar tanto el idioma como la región. Por desgracia, para el español solo permite dos regiones: España y Estados Unidos.

5. Observa como el texto aparece traducido al idioma seleccionado.

Otro ejemplo de utilización de recursos diferenciados lo podemos ver con el icono que se utiliza para lanzar la aplicación. Observa cómo, al crear una aplicación, este icono se crea en cinco carpetas mipmap diferentes, para utilizar un icono distinto según la densidad de píxeles del dispositivo:

res/mipmap-mdpi/ic_launcher.png

res/mipmap-hdpi/ic_launcher.png

res/mipmap-xhdpi/ic_launcher.png

res/mipmap-xxhdpi/ic_launcher.png

res/mipmap-xxxhdpi/ic_launcher.png

NOTA: En el siguiente capítulo se describe por qué se actúa de esta manera.

Resulta posible indicar varios sufijos concatenados; por ejemplo:

res/values-en-rUS/strings.xml

res/values-en-rUK/strings.xml

Pero cuidado, Android establece un orden a la hora de encadenar sufijos. Puedes encontrar una lista de estos sufijos en el apéndice C y en este enlace:

http://developer.android.com/guide/topics/resources/providing-resources.html

Para ver los sufijos disponibles, también puedes pulsar con el botón derecho sobre una carpeta de recursos y seleccionar New > Android resource file. Esta opción te permite crear un nuevo recurso y poner el sufijo deseado de forma y orden correctos.

Vídeo[tutorial]: Uso de recursos alternativos en Android

Ejercicio: Creando un layout para tabletas en Asteroides

Si ejecutas la aplicación Asteroides (o Mis Lugares) en una tableta, observarás que los botones son demasiado alargados (izquierda). Queremos que en este caso la apariencia sea similar a la mostrada a la derecha:

1. Crea un recurso alternativo a res/values/dimens.xml, que sea utilizado en pantallas de tamaño xlarge (7-10,5 pulgadas) en orientación land (apaisado). En este fichero define el siguiente valor:

2. Añade el mismo valor al recurso por defecto, pero esta vez con 30dp.

3. Modifica los ficheros res/layout/content_main.xml y content_main.xml (lan), reemplazando android:padding="30dp" por android:padding= "@dimen/margen_botones".

4. Verifica que la aplicación se visualiza correctamente en todos los tipos de pantalla, tanto en horizontal como en vertical.

Preguntas de repaso: Recursos alternativos

Enlaces de interés: Recursos alternativos

http://www.androidcurso.com/images/dcomg/ficheros/recursos_alternativos.pdf

2.7. Tipos de recursos y recursos del sistema

La definición de los recursos en Android es un aspecto muy importante en el diseño de una aplicación. Una de sus principales ventajas es que facilita a los diseñadores gráficos e introductores de contenido trabajar en paralelo con los programadores.

Añadir un recurso a nuestra aplicación es muy sencillo, no tenemos más que añadir un fichero dentro de una carpeta determinada de nuestro proyecto. Para cada uno de los recursos que añadamos el sistema crea, de forma automática, un id de recurso dentro de la clase R.

2.7.1. Tipos de recursos

Según la carpeta que utilicemos, el recurso creado será de un tipo específico. Pasamos a enumerar las carpetas y los tipos posibles:

Tabla 2: Tipos de recursos según carpeta en Android.

Veamos los tipos de recursos que encontramos dentro de la carpeta values:

Tabla 3: Tipos de recursos en carpeta values.

Aunque el sistema crea ficheros que aparecen en la columna de la izquierda de la tabla anterior y se recomienda definir los recursos de cadena dentro de strings.xml, hay que resaltar que no es más que una sugerencia de organización. Sería posible mezclar cualquier tipo de recurso de esta tabla dentro de un mismo fichero y poner a este fichero cualquier nombre.

Vídeo[tutorial]: Tipos de recursos en Android

2.7.2. Acceso a los recursos

Una vez definido un recurso, este puede ser utilizado desde un fichero XML o desde Java. A continuación se muestra un ejemplo desde XML:

<ImageView

android:layout_height="@dimen/alto"

android:layout_width="match_parent"

android:background="@drawable/asteroide"

android:text="@string/saludo"

android:text_color="@color/verde_opaco"/>

Para acceder a un recurso definido en los ejemplos anteriores, usaremos el siguiente código:

2.7.3. Recursos del sistema

Además de los recursos que podamos añadir a nuestra aplicación, también podemos utilizar una serie de recursos que han sido incluidos en el sistema.

Vídeo[tutorial]: Recursos del sistema en Android

Usar recursos del sistema tiene muchas ventajas. No consumen memoria en nuestra aplicación, al estar ya incorporados al sistema. Además, los usuarios están familiarizados con ellos. Por ejemplo, si utilizamos el recurso android.R.drawable.ic_menu_edit, se mostrará al usuario el icono: . Muy posiblemente, el usuario ya está familiarizado con este icono y lo asocia a la acción de editar. Otra ventaja es que los recursos del sistema se adaptan a las diferentes versiones de Android. Si se utiliza el tema android.R.style. Theme_Panel, este es bastante diferente en cada una de las versiones, pero seguro que estará en consonancia con el resto de estilos para esta versión. Lo mismo ocurre con el icono anterior. Este icono es diferente en algunas versiones, pero al usar un recurso del sistema nos aseguramos de que se mostrará el adecuado a la versión del usuario. Finalmente, estos recursos se adaptan siempre a las configuraciones locales.

Si yo utilizo el recurso android.R.string.cancel, este será “Cancelar”, “Cancel”, “取 消”, etc., según el idioma escogido por el usuario.

Para acceder a los recursos del sistema desde código, usaremos la clase android.R. Se usa la misma estructura jerárquica de clases. Por ejemplo, android.R.drawable.ic_menu_edit. Para acceder desde XML, utilizamos la sintaxis habitual pero comenzando con @android:. Por ejemplo, @android:drawable/ic_menu_edit.

Para buscar recursos del sistema tienes varias alternativas:

• Usa la opción de autocompletar de Android Studio.

• Emplea el buscador de recursos que se incluye en el editor de layouts.

• Usa la aplicación android.R para explorar los recursos del sistema.