¿Qué son las imágenes 9-patch en Android?

Una cosa que descubrí hace poco en Android y que me gustó mucho fueron los archivos 9-patch. Ahora que los he descubierto no sé como he podido vivir sin ellos. Este tipo de archivos permite la creación de imágenes de fondo o botones a medida. Lo más interesante es que se escalan automáticamente por el lugar que nosotros le queramos y esto hace que podamos usarlo en cantidad de ocasiones, sobretodo ahora que en Android tenemos muchos dispositivos con resoluciones de pantalla diferentes.

Vamos a ver un ejemplo.

A continuación vemos el archivo 9-patch.

Este archivo lo he cogido de los recursos del SDK de Android. Como podéis ver en los recursos del SDK hay muchos archivos que tienen esas líneas alrededor, todos ellos tiene extensión ".9.png" y son archivo 9-patch. ¿Para que sirven estas líneas?

La línea izquierda y superior determinan la zona de la imagen que se puede expandir. Fijaos como si proyectos esas líneas sobre la imagen nos dará la zona de la imagen que podrá expandirse, y que en ningún momento pasa por las esquinas de la imagen ni por el pico del bocadillo. A continuación podemos ver que es la parte rayada la que se puede expandir.

La línea de la derecha y la de abajo no son obligatorias, aunque si recomendables, y determinan el padding (relleno) que tendrá el contenido de la imagen cuando la usemos como botón o como fondo.

Para entenderlo mejor veamos el siguiente ejemplo que he preparado.

Se ve claramente como funciona y lo fácil que es usarlo. Fijaos que el bocadillo siempre queda perfecto y ni los bordes redondeados ni el pico del bocadillo se deforman.

¿Cómo podemos crear nuestro propio 9-patch?

Primero crea la imagen con Gimp (puedes usar Photoshop o cualquier otro aunque son peores ;-)), luego carga la imagen en el programa "draw9patch" que tienes en el directorio "tools" del SDK.

Es en ese programa donde tendrás que pintar las líneas negras de 1 pixel que determinan el relleno y expansión del archivo 9-patch. Finalmente sólo tienes que guardar la imagen con extensión ".9.png".

Ya tienes preparada tu imagen. Sólo tienes que copiarla a los recursos del sistema y usarla como cualquier imagen dentro de tu programa, el sólo se encargará de expandirla y hacer el relleno.

¿Cómo he podido vivir sin esto hasta ahora?