Imagenes, Colores y Dimensiones en Android

En esta nueva entrega aprenderemos a declarar colores indagando un poco en los formatos validos para declararlos, mostrar imágenes, hacer referencias a dimensiones para definir el tamaño de una imagen o de texto y haré una recomendación de un programa que nos puede ayudar a escoger colores en su forma hexadecimal y a un sitio de imágenes.

Creamos un nuevo proyecto (Target 1.6 en mi caso) y lo primero que haremos sera mostrar una imagen en toda la pantalla, para esto usaremos una imagen de un sitio llamado opengameart que nos provee de gráficos que podemos usar libremente(o cumpliendo pequeñas condiciones) y en este caso los gráficos del sitio se orientan a los videojuegos. La imagen que necesitamos esta aqui y la debemos de poner dentro de la carpeta drawable (target 1.5) o drawable-mdpi (target 1.6 o superior) dependiendo de el target que hayan elegido. Ahora modificaremos nuestro main.xml de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 <ImageView android:src="@drawable/desertpreview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />
</LinearLayout>

Tenemos un ImageView que es elemento que usamos para mostrar imágenes y con el atributo src indicamos el origen de la imagen que queremos mostrar. Hay que notar que NO debemos poner la extensión del archivo sea cual sea, así que en lugar de indicar desertpreview.png solo indicamos desertpreview. Ejecutamos nuestro MainActivity.java(o como le hayan puesto a su actividad principal) y obtenemos lo siguiente:

Mostrando una imagen.

Es posible que a algunos les marque un error a la hora de pegar la imagen en la carpeta drawable(-mdpi) y esto es porque solo podemos nombrar nuestros recursos con minúsculas de la a-z y números del 1-9 asi que debemos cambiar el nombre del archivo a desertpreview.png en lugar de desertPreview.png.

Ahora procederemos a crear algunos colores y la manera en que lo haremos sera creando un archivo de recursos llamado colors.xml (res/values/colors.xml) donde definiremos varios colores. Veamos el codigo:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="rojo_opaco">#f00</color>
    <color name="rojo_translucido">#80FF0000</color>
    <color name="verde">#1E00FF00</color>
    <color name="naranja">#3Cff9900</color>
    <color name="negro">#D2000000</color>
</resources>

En este código lo que hacemos es definir varios colores con el elemento color y lo hacemos de manera hexadecimal teniendo varias opciones para hacerlo: #RGB, #ARGB, #RRGGBB y #AARRGGBB donde:

A = canal alfa; transparencia que queremos (00 transparencia total - FF sin transparencia).

R =  canal rojo.

G =  canal verde.

B = canal azul.

Cada canal puede tomar valores entre 0-9 y a-f (mayúsculas o minúsculas) que en total suman 16 valores diferentes(base hexadecimal), 0 representa el valor mínimo mientras que F representa el máximo. Las diferencias entre las formas de declarar colores radican en 2 cosas: si tienen canal alfa o no y la cantidad de bits que manejan. Por ejemplo la ultima forma usa 8 bits para cada canal, acumulando un total de 32 bits o lo que es lo mismo, un dato primitivo de tipo entero (int). ¿Y esto que tiene que ver con el uso de colores? pues que podemos obtener una gama de colores mas extensa si usamos mas bits o por el contrario si queremos ahorrar espacio en nuestra aplicación o no requerimos de demasiados colores podemos usar los tipos #RGB y #ARGB para lograr este fin. En general usaremos #AARRGGBB.

Ahora añadimos esta linea de codigo entre los atributos del ImageView:

android:tint="@color/rojo_opaco"

Usamos tint para teñir la imagen de color rojo opaco, volvemos a ejecutar MainActivity y lo que ahora veremos en pantalla sera solo el color ya que este tiene transparencia nula (valor F ) y por lo tanto cubre a la imagen. Usemos ahora el rojo translucido que tiene  un poco de transparencia, reemplazamos la linea anterior por esta:

android:tint="@color/rojo_translucido"

Al correr el programa veremos lo siguiente:

Imagen con un tinte rojo.

Los invito a que prueben los otros colores que creamos o que hagan pruebas declarando sus propios colores. En lo personal me he valido de la aplicación para Android Magic Color Picker para encontrar algunos de los colores o tambien pueden consultar una paleta de colores aqui.

Dejando de lado las imágenes pasaremos a crear algunas dimensiones para fijar varios tamaños predefinidos con el fin de ilustrar como crear un archivo que guarde recursos de tipo dimensión, donde las medidas validas son:  dp, sp, pt, px, mm y in (dp y sp son los recomendados pues no dependen del dispositivo). El procedimiento es similar al de los colores, dentro de la carpeta res/values creamos un archivo llamado dimens.xml donde guardaremos todas nuestras dimensiones.

Quiero aclarar que tanto el archivo colors.xml y dimens.xml son nombres sugeridos en la documentación oficial pero podemos llamar de cualquier manera los archivos en los que guardamos recursos. dimens.xml quedará de la siguente manera:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="ancho">60dip</dimen>
    <dimen name="alto">60dip</dimen>
    <dimen name="pequeño">20sp</dimen>
    <dimen name="mediano">35sp</dimen>
    <dimen name="grande">50sp</dimen>
</resources>

dimen es el elemento con el que creamos una dimensión, le damos un nombre con el que sera identificado y definimos el tamaño que guardara. Ahora cambiaremos el main.xml que teníamos antes por el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/desertpreview"
    >
 <TextView android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:textSize="@dimen/pequeño"
        android:textColor="@color/negro"
        android:text="@string/texto"/>
 <TextView android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:textSize="@dimen/mediano"
        android:textColor="@color/rojo_opaco"
        android:text="@string/texto"/>
 <TextView android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:textSize="@dimen/grande"
        android:textColor="@color/rojo_translucido"
        android:text="@string/texto"/>
 <ImageView android:background="@drawable/ic_launcher"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"/>
 <ImageView android:background="@drawable/ic_launcher"
         android:layout_width="@dimen/ancho"
         android:layout_height="@dimen/alto"/>
</LinearLayout>

Lo que hemos hecho aquí es ponerle un fondo al LinearLayout con el atributo background, luego declaramos 3 TextView en los cuales definimos el tamaño del texto (textSize) usando referencias a nuestras dimensiones, de nueva cuenta usamos los colores creados anteriormente para definir el color del texto (textColor) y también hago una referencia a la cadena "texto" que contiene "CDG Android" . Por ultimo tenemos 2 ImageView con la misma imagen fuente (el icono default para la aplicación) pero la segunda tiene el ancho y alto definido con dimensiones en lugar de con wrap_content. El resultado no es muy estético pero ilustra algunos conceptos:

Eso es todo por esta ocasión, en una próxima entrada manipularemos los colores e imágenes mediante código para completar lo aprendido, espero les sirva el tutorial.