Cómo usar FontAwesome en una aplicación Android

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

En este tutorial, te enseñaré cómo usar el paquete de iconos FontAwesome en un proyecto de Android. FontAwesome es un excelente método para ahorrar tiempo por varias razones.

En primer lugar, no tienes que preocuparte por las diferentes densidades de pantalla de los distintos teléfonos inteligentes. Si deseas usar archivos PNG, debes incluir en tu paquete al menos cuatro versiones diferentes de cada icono. No solo eso, en algunas pantallas HD ultradensas, es posible que tus iconos se vean granulados. Esto es algo que ciertamente quieres evitar. Sin embargo, con FontAwesome únicamente tienes que incluir un solo archivo TTF.

En segundo lugar, puedes confiar en uno de los conjuntos de iconos más ricos y completos disponibles de forma gratuita. Actualmente los usuarios ya están acostumbrados al estilo de FontAwesome, ya que se usa ampliamente en la web. No tienes que perder el tiempo buscando un conjunto de iconos que sea bonito, completo y gratuito para su uso comercial. No digo que estos conjuntos no existan, porque sí los hay, pero son bastante raros.

1. Cómo funciona FontAwesome

Tomemos un momento para entender cómo funciona FontAwesome. La idea detrás del paquete de iconos FontAwesome es simple, los iconos son tratados como caracteres. Quizá hayas notado que algunos caracteres exóticos son tratados como texto. Por ejemplo, puedes copiar y pegar fácilmente este carácter β o este carácter ∑. Incluso puedes hacer esto en un editor de texto simple. También es posible cambiar su tamaño y color. Eso se debe a que el navegador, y el editor de texto, ven estos caracteres como texto.

FontAwesome expande este concepto incluyendo una amplia gama de iconos. Puedes compararlo con un diccionario que asocia caracteres Unicode que no pueden ser escritos, y que no se usan, con un icono específico.

Echa un vistazo a la hoja de referencia de FontAwesome para ver de qué estoy hablando. Eliges un icono de la lista, tomas nota de su carácter Unicode, y lo usas en un TextView, indicándole a Android que lo muestre usando la fuente FontAwesome.

2. Importa el archivo de la fuente

Veamos un ejemplo. Descarga e importa el archivo TrueType FontAwesome en tu proyecto. Puedes descargar los recursos de FontAwesome desde GitHub.

Cuando descargas FontAwesome, recibes un archivo que incluye una variedad de archivos y carpetas. La mayoría de estos son útiles para proyectos web. Solamente nos interesa fontawesome-webfont.ttf, que se encuentra en la carpeta fonts.

En tu proyecto de Android, navega a app > src > main. El directorio main debe tener una carpeta llamada assets. Si no existe, entonces créala. En el directorio assets, crea otra carpeta, fonts, y agrega fontawesome-webfont.ttf a esta carpeta.

Ten en cuenta que el directorio fonts no es obligatorio. Puedes agregar el archivo de fuente de FontAwesome en el directorio assets, pero es conveniente tener archivos del mismo tipo en un directorio dedicado. Estarás listo para continuar siempre y cuando el archivo de fuente de FontAwesome esté ubicado en el directorio assets, o en un subdirectorio del mismo.

3. Crea una clase auxiliar

Ahora que ya has incluido con éxito el archivo de fuente de FontAwesome en tu proyecto de Android, es momento de usarlo. Vamos a crear una clase auxiliar para que esto sea más sencillo. La clase que vamos a usar es android.graphics.Typeface. La clase Typeface especifica la tipografía y el estilo intrínseco de una fuente. Esto se utiliza para especificar cómo se ve el texto cuando se dibuja (y cuando se mide).

Comencemos creando la clase auxiliar. Crea una nueva clase de Java y asígnale el nombre FontManager:

public class FontManager {

    public static final String ROOT = "fonts/",
    FONTAWESOME = ROOT + "fontawesome-webfont.ttf";
    
    public static Typeface getTypeface(Context context, String font) {
        return Typeface.createFromAsset(context.getAssets(), font);
    }    

}

Si quieres usar otros tipos de letra en tu proyecto, es fácil agregar otras fuentes a la clase auxiliar. La idea es similar:

yourTextView.setTypeface(FontManager.getTypeface(FontManager.YOURFONT));

Esto es todo lo que tenemos que hacer, pero podemos hacerlo mejor. Vayamos un poco más lejos. Usando el método anterior, necesitamos crear una variable para cada TextView que queramos usar como icono. Eso está bien. Pero, como programadores, somos flojos. ¿Cierto?

Los iconos a menudo están contenidos en un solo ViewGroup, por ejemplo en un RelativeLayout o en un LinearLayout. Podemos escribir un método que suba por el árbol de un padre XML dado y que sobrescriba recursivamente el tipo de letra de cada TextView que encuentre.

public class FontManager {

    // ...
    
    public static void markAsIconContainer(View v, Typeface typeface) {
        if (v instanceof ViewGroup) {
            ViewGroup vg = (ViewGroup) v;
            for (int i = 0; i < vg.getChildCount(); i++) {
                View child = vg.getChildAt(i);
                markAsIconContainer(child);
            }
        } else if (v instanceof TextView) {
            ((TextView) v).setTypeface(typeface);
        }
    }
    
}

Supongamos que tu archivo de diseño se ve más o menos así:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/icons_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1" />

</LinearLayout>

Para marcar las tres instancias de TextView como iconos, sobrescribimos el método onCreate y agregamos el siguiente fragmento de código:

Typeface iconFont = FontManager.getTypeface(getApplicationContext(), FontManager.FONTAWESOME);
FontManager.markAsIconContainer(findViewById(R.id.icons_container), iconFont);

4. Usa los iconos que desees

Ahora viene la parte divertida. Visita la página de FontAwesome en GitHub y revisa los iconos disponibles. Elige tres iconos que te gusten. Yo voy a elegir tres gráficos, el icono del gráfico de área, el icono del gráfico circular y el icono del gráfico de líneas.

En tu proyecto, navega a la carpeta values y crea un archivo nuevo, icons.xml. Este archivo servirá como diccionario, es decir, asociará el carácter Unicode vinculado a un icono específico con un nombre legible para las personas. Esto significa que necesitamos crear una entrada para cada icono. Así es como funciona.

<resources>
    <string name="fa_icon_areachart">&#xf1fe;</string>
    <string name="fa_icon_piechart">&#xf200;</string>
    <string name="fa_icon_linechart">&#xf201;</string>
</resources>

Puedes encontrar el código en la hoja de referencia de FontAwesome o en la página de detalles del icono que te interese.

El siguiente paso es hacer referencia a las entradas de tipo cadena en las instancias de TextView de tu diseño. Así es como se ve el resultado final:

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="@string/fa_icon_areachart" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="@string/fa_icon_piechart" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_weight="1"
        android:text="@string/fa_icon_linechart" />

Si abres el editor de diseño de Android Studio, verás que este no puede mostrar los iconos. Esto no es normal. Compila y ejecuta tu aplicación. Ahora deberás ver los iconos mostrados correctamente:

Son pequeños, ¿no? Es muy fácil cambiar el tamaño de los iconos. Todo lo que tienes que hacer es cambiar el atributo textSize. Cambiar el color del icono es igual de fácil. Edita el atributo textColor y habrás terminado.

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_weight="1"
    android:textSize="45sp"
    android:textColor="#9b59b6"
    android:text="@string/fa_icon_areachart" />

Como puedes ver, los iconos son claros y nítidos. Eso se debe a que los iconos de FontAwesome son desplegados en tiempo de ejecución. Estos son archivos vectoriales en vez de mapas de bits.

Conclusión

En este consejo rápido, te mostré cómo usar el conjunto de iconos FontAwesome en un proyecto de Android. FontAwesome es ampliamente conocido, muy rico y gratuito. El resultado se traduce en iconos claros y nítidos, incluso en pantallas de alta resolución. Como beneficio adicional, cambiar el tamaño o el color de un icono es tan simple como cambiar un atributo XML.