En este tutorial, os voy a enseñar cómo utilizar el paquete de iconos FontAwesome en un proyecto de Android. FontAwesome es un gran ahorro de tiempo por varias razones.
En primer lugar, no tienes que preocuparte por las distintas resoluciones de pantalla en los smartphones. Si deseas utilizar archivos PNG, debes incluir en tu paquete al menos cuatro versiones diferentes de cada icono. Y no sólo eso, en algunas pantallas de alta definición, tus iconos pueden pixelar. Esto es algo que sin duda querrás evitar, ¿verdad?. Con FontAwesome, sin embargo, sólo hay que incluir un único archivo TTF.
En segundo lugar, puedes confiar en uno de los conjuntos de iconos disponibles de forma gratuita más completos. De hecho, los usuarios están acostumbrados al estilo de FontAwesome, ya que es ampliamente utilizado en la web. No tienes porqué perder el tiempo buscando un conjunto de iconos bonitos y libres para uso comercial.
Cómo funciona FontAwesome
Vamos a entender en un momento cómo funciona FontAwesome. La idea detrás del paquete de iconos FontAwesome es simple, los iconos son tratados como caracteres. Puedes haber notado que algunos caracteres exóticos son tratados como texto. Por ejemplo, puedes fácilmente copiar y pegar este carácter β o este otro Σ. Inclusos puede hacerlo en un simple editor de texto. También es posible cambiar su tamaño y color. Esto es porque el navegador y el editor de texto consideran estos caracteres como texto.
FontAwesome amplía este concepto mediante la inclusión de una amplia gama de iconos. Se puede comparar a un diccionario que hace coincidir caracteres Unicode que no se pueden escribir, y que no se utilizan, con iconos específicos.
Echa un vistazo al cheatsheet de FontAwesome para que veas de lo que estoy hablando. Elige un icono de la lista, toma nota de su carácter Unicode y utilizalo en un TextView, diciendole a Android que lo renderice utilizando la fuente FontAwesome.
Importa la fuente
Vamos a echar un vistazo a un ejemplo. Descarga e importa el archivo TrueType FontAwesome en tu proyecto. Puede descargar los assets de FontAwesome desde GitHub.
Al descargar FontAwesome, obtendrás un archivo que incluye una serie de archivos y carpetas. La mayor parte de los cuales son solamente útiles para proyectos web. A nosotros solo nos interesa el fontawesome-webfont.ttf, que se encuentra en la carpeta de fonts.
En tu proyecto Android, vete a app > src > main. El directorio main debe incluir una carpeta llamada assets. Si no existe, entonces créala. En el directorio assets, crea otra carpeta fonts, y añade fontawesome-webfont.ttf a esta carpeta.
Ten en cuenta que el directorio fonts no es obligatorio. Puedes añadir el archivo de fuentes de FontAwesome en el directorio assets, pero es conveniente tener todos los archivos del mismo tipo en un único directorio.
Crea una clase helper
Ahora que has incluido con éxito la fuente FontAwesome en tu proyecto Android, es el momento de usarlo. Vamos a crear una clase helper para hacer esto más sencillo. La clase que vamos a utilizar es android.graphics.Typeface. La clase Typeface especifica el tipo de letra y el estilo de una fuente. Esto se utiliza para especificar cómo aparece el texto cuando se dibuja.
Vamos a empezar por la creación de la clase helper. Crea una nueva clase de Java y llámala 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 deseas utilizar otros tipos de letra en tu proyecto, es fácil añadir otras fuentes a la clase helper. Se haría de este modo:
yourTextView.setTypeface(FontManager.getTypeface(FontManager.YOURFONT));
Esto es todo lo que necesitamos hacer, pero podemos hacerlo mejor. Vamos a llegar un poco más lejos. Utilizando el método anterior, vamos a crear una variable para cada TextView que queremos usar como un icono. Esta bien. Pero, como programadores, somos perezosos. ¿Verdad?
Los iconos a menudo se encuentran en un único ViewGroup, tales como RelativeLayout o LinearLayout. Podemos escribir un método que escale el árbol de un padre XML dado y de forma recursiva anular 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);
}
}
}
Asumamos que el layout se vea tal que 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 TextView como iconos, reemplaza el método onCreate y agrega el siguiente fragmento de código:
Typeface iconFont = FontManager.getTypeface(getApplicationContext(), FontManager.FONTAWESOME); FontManager.markAsIconContainer(findViewById(R.id.icons_container), iconFont);
Utiliza los iconos que desees
Ahora viene la parte divertida. Visita la página de GitHub de FontAwesome y navega por todos los iconos disponibles. Elige tres iconos que te gusten. Personalmente voy a elegir, el icono de gráficos, el icono gráficos de sectores, y el icono gráficos de barras.
En tu proyecto, ve a la carpeta values y crea un nuevo archivo llamado icons.xml. Este archivo servirá como un diccionario, es decir, hará coincidir el carácter Unicode asociado con un icono específico. Esto significa que tenemos que crear una entrada para cada icono. Así es como funciona.
<resources>
<string name="fa_icon_areachart"></string>
<string name="fa_icon_piechart"></string>
<string name="fa_icon_linechart"></string>
</resources>
Puedes encontrar el código en el cheatsheet de FontAwesome o en la ficha del icono que te interese.
El siguiente paso es hacer referencia a las cadenas en las instancias TextView de tu layout. Así es como se vería 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" />
Fuente: code.tutsplus.com