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.

Práctica: Recursos alternativos en Mis Lugares

1. Ejecuta la aplicación 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 con pantalla pequeña, puedes observar que el resultado de la vista que acabas de diseñar en vertical, no queda todo lo bien que desearíamos.

    o   

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

3. Pulsa con el botón derecho sobre la carpeta res/layout y selecciona New > Layout resorce file. Aparecerá una ventana donde has de rellenar en File name: content_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 content_main.xml. El primero es el recurso por defecto mientras que el segundo es el que se uasrá 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.

   o  

5. Ejecuta de nuevo la aplicación y observa como la vista se ve de forma más adecuada en las dos orientaciones.

Solución:

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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" 
    android:padding="30dp"
    tools:context=".MainActivity" >
  <TextView 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/tituloAplicacion" 
    android:gravity="center" 
    android:textSize="25sp" 
    android:layout_marginBottom="20dp"/>
  <TableLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center" 
    android:stretchColumns="*">
    <TableRow> 
      <Button android:id="@+id/button01" 
         android:layout_height="wrap_content" 
         android:layout_width="match_parent" 
         android:text="@string/Arrancar"/>
      <Button android:id="@+id/button02" 
         android:layout_height="wrap_content" 
         android:layout_width="match_parent" 
         android:text="@string/Configurar"/>
    </TableRow>
    <TableRow> 
      <Button android:id="@+id/button03" 
         android:layout_height="wrap_content" 
         android:layout_width="match_parent" 
         android:text="@string/Acercade"/>
      <Button android:id="@+id/button04" 
         android:layout_height="wrap_content" 
         android:layout_width="match_parent" 
         android:text="@string/Salir"/>
    </TableRow>
  </TableLayout>
</LinearLayout> 

NOTA: Para conseguir que en un TableLayout, las columnas se ajusten a todo el ancho de la tabla poner  stretchColumns="*". stretchColumns="0" significa que asigne el ancho sobrante a la primera columna. stretchColumns="1" significa que asigne el ancho sobrante a la segunda columna. stretchColumns="*" significa que asigne el ancho 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, al 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 siguientes tres directorios:

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 Mis Lugares

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 introducestrings.xml como nombre de fichero. Mueve el cualificador Locale desde el marco de la izquierda a la derecha, pulsando el botón >>. En Language seleciona en: English, en Specific Region Only deja el valor Any 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.

5. Vamos a cambiar la configuración de idioma de un dispositivo Android. Para ello, accede a Ajustes del dispositivo (Settings) y selecciona la opción Mi dispositivo > Idioma e introducción. 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.

6. Observa cómo 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 como, al crear una aplicación, este icono se crea en cinco carpetas drawable 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 porque se actua 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 la Referencia recursos alternativos 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.

  video[Tutorial]  Uso de recursos alternativos en Android

Ejercicio paso a paso: Creando un Layout para tabletas en Mis Lugares

Si ejecutas la aplicación Asteroides en una tableta observarás que los botones son demasiado alargados:

Queremos que en este caso la apariencia sea similar a:

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

<resources>
    <dimen name="margen_botones">150dp</dimen>
</resources>

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: Pincha aquí para hacer un test.