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:
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 17.
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 18.
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
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
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.
Según la carpeta que utilicemos, el recurso creado será de un tipo específico. Pasamos a enumerar las carpetas y los tipos posibles:
Carpeta identificador | Descripción |
res/drawable/R.drawable | Ficheros en bitmap (.png, .jpg o .gif). Ficheros PNG en formato Nine-patch (.9.png). Ficheros XML con descriptores gráficos (véase clase Drawable). |
res/mipmap/R.mipmap | Ficheros en bitmap (.png, .jpg o .gif). Estos gráficos no son rescaldados para adaptarlos a la densidad gráfica del dispositivo, si no que se buscará en las subcarpetas el gráfico con la densidad más parecida y se utilizará directamente. |
res/layout/R.layout | Ficheros XML con los layouts usados en la aplicación. |
res/menu/R.menu | Ficheros XML con la definición de menús, que podemos asignar a una actividad o a una vista. |
res/anim/R.anim | Ficheros XML que permiten definir animaciones Tween, también conocidas como animaciones de vista. |
res/animatorR.animator | Ficheros XML que permiten modificar las propiedades de un objeto a lo largo del tiempo (véase apartado “Animación de propiedades”). Solo desde la versión 3.0. |
res/xml/R.xml | Otros ficheros XML, como los ficheros de preferencias. |
res/raw/R.raw | Ficheros que se encuentran en formato binario. Por ejemplo, ficheros de audio o vídeo. |
res/values/ | Ficheros XML que definen un determinado valor para definir un color, un estilo, una cadena de caracteres, etc. Se describen en la siguiente tabla. |
Tabla 2: Tipos de recursos según carpeta en Android.
Veamos los tipos de recursos que encontramos dentro de la carpeta values:
Fichero por defecto identificador | Descripción |
strings.xmlR.string | Identifica cadenas de caracteres.<string name="saludo">¡Hola Mundo!</string> |
colors.xmlR.color | Un color definido en formato ARGB (alfa, rojo, verde y azul). Los valores se indican en hexadecimal en uno de los formatos: #RGB, #ARGB, #RRGGBB ó #AARRGGBB.<color name="verde_opaco">#0f0</color><color name=" red_translucido">#80ff0000</color> |
dimensions.xmlR.dimen | Un número seguido de una unidad de medida.px – píxeles; mm – milímetros; in – pulgadas; pt – puntos (= 1/72 pulgadas); dp – píxeles independientes de la densidad (= 1/160 pulgadas); sp – igual que dp, pero cambia según las preferencias de tamaño de fuente.<dimen name="alto">2.2mm</dimen><dimen name="tamano_fuente">16sp</dimen> |
styles.xmlR.style | Definen una serie de atributos que pueden ser aplicados a una vista o a una actividad. Si se aplican a una actividad, se conocen como temas.<style name="TextoGrande" parent="@style/Text"><item name="android:textSize">20pt</item><item name="android:textColor">#000080</ítem></style> |
R.int | Define un valor entero.<integer name="max_asteroides">5</integer> |
R.bool | Define un valor booleano.<bool name="misiles_ilimitados">true</bool> |
R.id | Define un recurso de id único. La forma habitual de asignar un id a los recursos es con el atributo id="@+id/nombre". Aunque en algunos casos puede ser interesante disponer de un id previamente creado, para que los elementos así nombrados tengan una determinada función. Este tipo de id se utiliza en las vistas TabHost y ListView.<item type="id" name="button_ok" /><item type="id" name="dialog_exit" /> |
R.array | Una serie ordenada de elementos. Pueden ser de strings, de enteros o de recursos (TypedArray).<string-array name="dias_semana"><item>lunes</item><item>martes</item></string-array><integer-array name="primos"><item>2</item><item>3</item><item>5</item></integer-array><array name="asteroides"><item>@drawable/asteroide1</item><item>@drawable/asteroide2</item></array> |
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
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:
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.
Tasuta katkend on lõppenud.