¿Qué es 9-Patch?

Es una clase que permite crear una imagen de bits dividida en nueve o más secciones. Básicamente permite la creación de gráficos que escalaran a la forma que el usuario defina cuando el contenido agregado dentro de esta imagen exceda los límites.

Muchas veces nos ha podido ocurrir que tenemos una imagen con bordes redondeados o con muchos detalles y que cuando la estiramos, esta imagen se transforma en una imagen con distorsión o borrosa. Esto podríamos evitarlo si usamos 9-Patch. Un ejemplo de imágenes que utilizan 9-Patch son los botones estándar de Android, estos botones deben estirarse a diferentes tamaños de acuerdo al contenido que contenga.

Un gráfico 9-Patch es una imagen PNG común y corriente que incluye 1px extra de bordes y que debe ser guardada como .9.png. El borde es usado para definir las zonas elásticas de la imagen. Los bordes superior e izquierdo son usados como guías para escalar la imagen, mientras que los bordes derecho e inferior son usados como guías para definir el área donde se ingresará el texto.

Es importante anotar que las imágenes 9-Patch no se reducen, solo se estiran, por lo que lo mejor es crear la imagen en el tamaño más pequeño que vamos a utilizar. Y también es importante anotar que el borde debe ser de un color negro (#000000), de otra forma, no nos funcionará correctamente 9-Patch.

El SDK trae una herramienta para convertir una imagen a 9-Patch de una forma fácil, llamada Draw 9-Patch. Esta herramienta se encuentra en el directorio /tools/ en nuestro directorio donde tenemos el SDK, solo necesitamos abrir el programa ( que se llama draw9patch ) y hacer Drag & Drop de la imagen a la cual deseamos convertir en un 9-Patch.

Si ingresamos una imagen .png, la herramienta automáticamente la cargará con un espacio de 1px alrededor en el que puedas dibujar los bordes necesarios para crear las zonas escalables.

¿Cómo utilizar 9-Patch?

Daré por hecho que ya tienen una imagen que desean convertir a 9-Patch y también que la convirtieron a 9-Patch con Draw 9-Patch o con alguna de las decenas de herramientas que se encuentran con una búsqueda en Google. Si aún no tienen una imagen y no tienen dotes artísticos suficientes para crear una ( mi caso ), pueden descargar esta que dan los amigos de draw9patch.com y convertirla a 9-Patch.

Bueno, ahora que tenemos nuestra imagen .9.png, lo que haremos será importarla a nuestro proyecto. Esto es, ponerla en la carpeta de drawables e ir a nuestro layout a la vista en XML.

Lo que haremos será crear un botón (si no lo tenemos creado) y agregarle una propiedad de más llamada android:background cuyo valor será: @drawable/nombre_imagen. Un ejemplo de como me quedó a mi el botón.

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/texto_ejemplo"
    android:background="@drawables/boton">

Si convirtieron bien la imagen a 9-Patch, deberían estar viendo su botón de forma correcta en el editor WYSIWYG que trae Android Studio o Eclipse (el ejemplo lo probé en Android Studio y funciona a la perfección). Y prueben con cadenas de texto de diferentes longitudes para que vean como se acomoda la imagen a su necesidad.

PD: No solo funciona con cadenas de texto. También funciona con imágenes y demás. Hay unos ejemplos muy geniales que pueden buscar en Google si lo desean.