Android / Recursos alternativos para Layouts

Bienvenidos sean a este post, como dijimos en el post anterior, existen distintos tipos de dispositivos en Android y nuestras apps deben estar preparadas para los distintos tipos de pantallas, distintos tipos de modos e incluso distintos idiomas, por suerte Android ya tiene algunas herramientas para poder facilitarnos las adaptaciones en los distintos modos, en este post vamos a ver varios ejemplos.

Para este post comenzaremos creando un nuevo proyecto con las siguientes caracteristicas:

• Dispositivos: Phone and Tablet
• Actividad: Empty Activity
• Nombre: MasLayouts
• Nombre de paquete: org.example.maslayouts
• API Minimo: API 14 (Android 4.0)

Una vez generado nuestro nuevo proyecto procederemos a modificar el archivo activity_main.xml con el siguiente codigo:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_weight="2"
        android:textAlignment="center" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Boton 01"
        android:layout_weight="1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Boton 02"
        android:layout_weight="1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Boton 03"
        android:layout_weight="1" />

    <Button
        android:id="@+id/button4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Boton 04"
        android:layout_weight="1" />

</LinearLayout>

En este nuevo codigo primero estableceremos el tipo de layout como LinearLayout, le establecimos que su orientacion sea vertical mediante esta linea:

android:orientation="vertical"

Despues estableceremos cinco elementos, el primero sera un TextView que mostrara la frase Hello World! pero con dos particularidades:

android:layout_weight="2"
android:textAlignment="center"

En este caso estableceremos un peso (weight) de 2 y usamos a la propiedad textAlignment como center, despues agregaremos cuatro botones donde todos tendran el peso de 1, por ultimo usamos en todo los elementos las siguientes propiedades:

android:layout_width="match_parent"
android:layout_height="wrap_content"

En este caso le indicamos a cada elemento que tome todo el ancho de la pantalla y para la altura que tome el valor que tenga disponible, si lo probamos veremos lo siguiente

Hasta aca tenemos todo muy lindo y hermoso pero que sucede cuando giramos la pantalla, para probar esto en nuestro emulador debemos apretar el siguiente boton

Con esto lo haremos rotar hacia la izquierda, una vez rotado nos quedara de la siguiente forma

Como pueden ver, no queda muy lindo esteticamente, ahora vamos a ver como mejorar esto.

Primero vamos a ir hasta res/layout donde haremos click con el boton derecho y elegiremos new->Layout resource file

Una vez seleccionado nos aparecera el siguiente cuadro

Aca asignaremos activity_main como File Name, no se preocupen por el nombre repetido, luego deben buscar en Available Qualifiers al elemento Orientation una vez seleccionado pulsan el boton >> para incorporarlo y pasaran al siguiente cuadro

Aca deben seleccionar en Screen Orientation a Landscape (apaisado), una vez seleccionado pulsan Ok y debera quedar un archivo nuevo como se ve en la siguiente imagen

Por esto les dije que no se preocupen por el nombre porque el mismo editor se encarga de editarlo para aclararlo que sera utilizado cuando la pantalla este apaisada (landscape), ahora vamos a seleccionar y pasar a rellenar el mismo, para ello vamos a reemplazar el codigo generado por el siguiente:

land\activity_main.xml

<?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:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:layout_weight="1"
        android:textAlignment="center" />

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Boton 01"
                android:layout_weight="1" />

            <Button
                android:id="@+id/button2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Boton 02"
                android:layout_weight="1" />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <Button
                android:id="@+id/button3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Boton 03"
                android:layout_weight="1" />

            <Button
                android:id="@+id/button4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Boton 04"
                android:layout_weight="1" />

        </TableRow>
    </TableLayout>

</LinearLayout>

En este caso utilizamos un LinearLayout muy similar al del post anterior en este primero ponemos nuestro TextView de la otra vista, deben copiar el bloque correspondiente al TextView y pegarlo, luego agregamos un TableLayout y por medio de TableRow hicimos dos filas, en la primera pusimos el boton 01 y el boton 02, al igual que el otro elemento copiamos los bloques del otro archivo y lo pegamos entre los primeros tags de TableRow, para la otra fila hacemos exactamente lo mismo pero para boton 03 y boton 04, si lo compilamos y probamos deberemos verlo de la siguiente manera

Si bien quedo mas presentable que el primer caso todavia no nos quedo bien pero para ello vamos a modificar la siguiente linea del TextView

android:textAlignment="center"

Vamos a reemplazarla por esta linea:

android:gravity="center"

Esta linea no alinea solamente el texto de central sino que nos da la posibilidad de poder ubicar cualquier elemento (imagen, boton, etc) en el centro correcto del layout, siempre que sea LinearLayout, si lo probamos obtendremos una salida semejante a la siguiente

Como pueden ver quedo mucho mejor, y con todo esto logramos algo fundamental tener dos tipo de layouts independientes dependiendo de como este ubicado el dispositivo, tambien nosotros podemos modificar el archivo strings.xml, como vimos en este post para tener en un solo lugar todos los textos y ubicarlos dependiendo el layout o reutilizarlos, por ejemplo los nombres de los botones, en este caso no lo hice para no complicarlo de mas y tambien queria mostrar otro metodo de modificar nuestro texto pero con un simple cambio se puede hacer con la mejor practica.

Ahora vamos a ver otro ejemplo practico, en este caso vamos a ver como se utiliza varios idiomas, volvamos a nuestra app y vayamos sobre la carpeta values, esta en res/values, y vamos a hacer click con el boton derecho y elegir nuevamente New->values resource file

Y nos abrira el siguiente cuadro

En este cuadro definiremos el nombre del archivo (File Name) como strings, no se preocupen por el nombre ahora veremos porque, despues deberan seleccionar en Available Qualifiers al elemento Locale, una vez seleccionado presionan el boton >> y pasara al siguiente cuadro

Aca en el cuadro Language elijan en: English y dejen Any Region pero si quieren usar alguna region especifica deben seleccionar la misma sino dejen la seleccionada por defecto y pusan Ok, una vez hecho esto nos generara el siguiente archivo

Ahora tendremos dos tipos de archivos strings.xml, este archivo se encarga de guardar todos los textos de nuestra app (si asi lo configuramos) y a su vez ahora vamos a tener el mismo archivo pero para el idioma ingles, figura con la abreviacion (en) al costado como se ve en la imagen, si hubiera mas idiomas aparecerian con la abreviatura correspondiente entre parentesis, ahora si abrimos el archivo nos aparecera de la siguiente manera

<?xml version="1.0" encoding="utf-8"?>
<resources ></resources>

Es decir un archivo XML vacio pero Android sabe que todo el contenido estara destinado al idioma ingles, cuando ejecutemos la app entenderan. Ahora vamos a ingresar un dato dentro de este archivo:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">More Layouts</string>
</resources>

En esta simple linea definimos el nombre de nuesta app en Ingles, salvamos todos las modificaciones hechas y probemos nuestra app, al ejecutarla si la configuracion del equipo virtual esta en español aparecera asi

Salimos de la app, en el mismo equipo virtual vamos al panel de control y seleccionamos Custom Locale, y el idioma es Español, aparecera asi

Ahora busquen la opcion de en-english y seleccionenla

Pulsan la opcion SELECT ‘EN’ y si vuelven a la app, sin cerrar el equipo virtual, les aparecera de la siguiente forma

Aca les muestro un video de ejemplo pero en lugar de usar Custom Locale utilizo Settings como en cualquier equipo

Hoy hemos visto como trabajar con dos tipos de layouts distintos para dos tipos de vistas de un equipo movil, estas son portrait (retrato) y landscape (apaisada), hemos  visto como organizarlas y ser independientes, esto tambien se podria adaptar para otro tipos de dispositivos, un reloj o un televisor por ejemplo, donde las acciones serian las mismas pero solo cambiamos el entorno para ajustarlo mejor al tipo de pantalla sin afectar las demas y por ultimo hemos visto como tener archivos con los textos de nuestra app (string.xml) en otro lenguaje para automaticamente ajustarlo cuando se cambie el lenguaje en el dispositivo o sea uno distinto al de nuestro pais permitiendo mayor accesibilidad a la app. Espero les haya sido util, sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.