Androideity

Programación android en español, tutoriales, documentación, noticias, smartphones, tablets, programación android, aplicaciones android

Personalizar los tipos de letra en Android

| | 19 Comentarios

Los dispositivos con Android vienen con una colección de fuentes estándar entre la cuáles encontramos a Droid Sans, Droid Sans Mono and Droid Serif. Estas tipografías fueron diseñadas para que se muestren de manera óptima en pantallas “pequeñas” como las de los teléfonos. Frecuentemente trabajaremos con estas fuentes que además podemos manipular a través de los atributos XML que Android nos provee.

Sin embargo, habrá veces en las que sea necesario usar fuentes personalizadas para alcanzar propósitos especiales. Así que a través de este post vamos a conocer cómo podemos darle ese toque personalizado a nuestras aplicaciones Android.

 

Atributos de estilos para fuentes en Android

Para ir entrando en materia, me gustaría dar un repaso de los atributos XML que podemos utilizar para darle estilo al texto que se despliega en los componentes de nuestra interfaz de usuario. Los ejemplos que vamos a mostrar los haremos en un nuevo proyecto Android utilizando el archivo main.xml del directorio res > layout.

 

Atributo Typeface

Como lo mencioné al inicio de este post, existen tres tipos de letra por default conocidas como la familia Droid que contiene tres fuentes: sans, monospace y serif. Así podemos especificar cada una de ellas como el valor del atributo android:typeface en la declaración un elemento en el que queramos que aplique  dicho formato, como por ejemplo en un TextView. Para observar el resultado visual de cada opción veamos el ejemplo:

Este es el código que vamos a incluir en el archivo main.xml creando tres TextView para definir una fuente distinta en cada uno.

Cuando ejecutemos el ejemplo, podemos ver la diferencia en el estilo de fuente de cada TextView.

 

Atributo TextStyle

El atributo android:textStyle lo utilizamos para darle énfasis al texto que queremos mostrar. Los valores que podemos definir son: normal, bold, italic y bold|italic.

De nueva cuenta tenemos el código que irá en el archivo main.xml definiendo un atributo android:textStyle con valor diferente en cada TextView:

Y el resultado visual al ejecutarlo:

 

Atributo TextSize

Como su nombre lo indica, el atributo android:fontSize define el tamaño que tendrá la fuente en la aplicación. La definición del valor para este atributo se conforma de un número de punto flotante seguido de una unidad de medida, que pueden ser: sp (scaled pixels), px (pixels), dp (density-independent pixels), in (inches), mm (millimeters). Regularmente puedes utilizar los sp como unidad ya que de esta forma el tamaño de la fuente se puede ampliar dependiendo de las configuraciones que haga el usuario.

Agregamos otras tres TextView con diferentes tamaños de fuentes 10sp, 15sp y 25 sp.

Con lo cual tendremos el resultado siguiente:

Atributo TextColor

Para el atributo android:textColor debemos definir el valor en formato RGB hexadecimal con la opción de añadir un valor para el canal alpha, parecido a cuando trabajamos con CSS. Los formatos que podemos utilizar son los siguientes:

  • #RGB
  • #ARGB
  • #RRGGBB
  • #AARRGGBB

Hay que mencionar que también podemos definir un color en un archivo XML como recurso y mandarlo a llamar con la notación @color/nombreDelColor. Esta práctica puede serte útil cuando por ejemplo tienes 50 TextView cuyo color de letra está en rojo (apuntando a un color como recurso) y de repente el cliente te dice que siempre lo quiere con un tono de rojo distinto al que has definido. En los casos en los que no hayas separado bien tus recursos seguro te llevará un par de minutos; si por el contrario separaste todo muy bien, sólo tendrás que modificar el código del color en tu archivo XML y eso actualizará los 50 TextView en no más de 30 segundos.

Para este ejemplo yo he creado un archivo llamado color.xml dentro del directorio res > values como te muestro a continuación:

Definimos dos TextView, uno con el color verde en RGB y el segundo con un valor de 50 para su canal alpha.

El resultado visual es el siguiente:

Atributo Shadow

En Android existen tres diferentes atributos que podemos utilizar para agregarle sombra al texto:

  • android:shadowColor: el color de la sombra del texto en formato RGB.
  • android:shadowRadius: especifica el radio de la sombra con un número de punto flotante.
  • android:shadowDx y android:shadowDy para indicar el desplazamiento de la sombra en los ejes X y Y respectivamente a través de un número de punto flotante.

Hay que destacar que en el caso de este atributo, los valores numéricos que se le asignan no van acompañados por ninguna unidad, son factores meramente arbitrarios.

 

Utilizando fuentes personalizadas en nuestras aplicaciones

Pasemos ahora a conocer el proceso que hay que seguir para incluir fuentes personalizadas y darle así un toque único a tus aplicaciones. Para el ejemplo, vamos a incluir una fuente llamada Gloria Hallelujah (sólo para este caso demostrativo). Una vez descargada de este link, copiaremos el archivo TTF dentro del directorio assets de nuestro proyecto Android (en caso de que el directorio no exista, lo creamos).

Una vez hecho esto agregamos un TextView en nuestro archivo main.xml asignándole el atributo android:id de la siguiente manera:

De esta forma podremos manipular el TextView desde el código Java y asignarle la fuente Gloria Hallelujah por medio del método setTypeFace() como te muestro a continuación:

La clase Typeface tiene un método estático llamado createFromAsset(), que toma un objeto de tipo AssetManager como primer parámetro y el nombre o ruta del archivo TTF como segundo parámetro. En este ejemplo estamos utilizando el asset manager por default que retorna el método getAssets() y escribimos el nombre de nuestro archivo tal cual pues se encuentra físicamente en la raíz del directorio assets del proyecto Android. Finalmente, con nuestro objeto de tipo Typeface creado lo pasamos de parámetro cuando mandamos a llamar al método setTypeface() del objeto TextView.

En caso de que guardemos otros tipos de archivos dentro del directorio assets, es recomendable utilizar directorios internos para una mejor organización de nuestros recursos.

Corremos el ejemplo y este será el resultado que obtendremos:

 

Consejos finales

El resultado quedó bastante cool, sin embargo hay ciertas consideraciones que debes tomar en cuenta cuando trabajas con fuentes personalizadas:

  1. Algunos tipos de fuente podrían no soportar caracteres especiales como los acentos y tildes en el idioma español. Te recomiendo que antes de elegir tus fuentes analices el idioma que utilizará tu aplicación y los caracteres que vas a utilizar para evitar errores de compatibilidad.
  2. El tamaño en que vayas a manejar los textos en tu aplicación. Es bien sabido que algunos tipos de fuentes por default son grandes a comparación de otros, por eso, si vas a utilizar varias fuentes personalizadas cuida mucho este aspecto para evitar resultados visuales inesperados.
  3. La licencia de la fuente que queramos utilizar. No se te olvide que hay algunos tipos de fuentes que te puedes encontrar en la web cuya licencia prohíbe su uso en aplicaciones con fines comerciales. No descuides este punto ya que el respeto al trabajo ajeno es la paz.

 

Espero que con este artículo puedas mejorar el diseño de tus aplicaciones, si quieres leer acerca de otro tema orientado al desarrollo o diseño en Android, contáctanos para que estemos publicando material de referencia en el blog.

Este post fue escrito basado en una interpretación de un artículo en idioma inglés llamado Quick Tip: Customize Android Fonts escrito por Hannes Holste del sitio Mobile Tuts+. Se le agradece al autor por su valioso aporte.

 

Descárgate el código fuente de este tutorial:

¿Te fue útil este post? ¡Compártelo!


Comparte este post

Acerca de: Condesa

Desarrolladora de aplicaciones Android, freelance, apasionada de la tecnología, y precursora del crecimiento tecnológico en México.

Sígueme en Twitter

Leer todos mis artículos

También puede interesarte

Comentarios de este artículo

  • Pingback: Controles de selección en Android: Listas | Androideity

  • iñaki arroyo

    Gracias…. sencillo y muy util.

  • richisk8

    graciasss

  • RCP

    Gracias. Realmente interesante para los que estamos arrancando con el diseño para Android. Tengo una pregunta a la que no consigo encontrar solución: ¿Cómo podría hacer para cambiar la fuente de todos los TextView de una única vez sin tener que hacerlo para cada view de mi interfaz?

    Salu2 y gracias de nuevo

    • condesa

      Hola RPC,

      Hasta ahorita que estaba editando el post vi tu comentario.

      Agregué esa parte ya dentro del post, pero bueno, en general, necesitas separar tus recursos de color en un archivo XML para que desde el atributo android:textColor de tu widget mandes a llamar la referencia a dicho color, por ejemplo: @color/rojo.

      Saludos :)

      • Mancofre_20

        me podrías ayudar con mi duda que plante mas arriba Gracias muy buena las presentaciones

  • jeanfranco gutierrez

    gracias condesa dracula

  • napaca

    muchas gracias por tus aportes me han sido de gran ayuda para mi primera aplicacion

  • Mancofre_20

    hola tengo una duda como puedo trabajar el graphicala layout de manera horizontal(girarlo).
    Ya logre de que la aplicación se vea de manera horizontal al emularse , pero no e podido voltear el .xml en el eclipse, no se como hacerlo, para así trabajar mejor con la palette y apreciar visualmente como va quedando la aplicación sin emularlo. Gracias

    • condesa

      Hola,

      Si te refieres a voltear el visor de Eclipse. En la vista tienes unos combo boxes en la parte superior que puedes utilizar para ver la vista aunque creo que eso no tiene que ver con el tema de este post :/

      Espero que te sea de utilidad, saludos.

  • galegiña

    los elementos de mi layout textview, listview, … se tratan a traves de una hoja de estilos ¿sabes como puedo aplicar el tipo de letra deseado a un style en su id typeFace?

  • Thechemicalb0y

    Excelente Post ! Me gustaría que hicieran uno para explicar como incluir la licencia (gratis?) para la fuente Roboto en un projecto. O un post con lo relacionado a las licencias de las aplicaciones, para no tener problemas : )

  • Gato Montés

    Muy bueno el post, pero no entiendo cómo llego a aplicar el “fontsize” que es lo que necesito. !!! Gracias

  • Fernan fortich

    Hola. quiero Saber como puedo acelerar la transición de una marquesina..??

  • Abinadi Mena

    excelente aporte saludos desde ciudad de Guatemala

  • Chovis

    Hola tengo una duda, si quiero aplicar el estilo de fuente personzalizado para todo mi layout, que es lo que tengo que cambiar?

  • sergio

    hola he intentado seguir este tutorial, pero me da un error en el typeface. Me podrías ayudar a encontrarlo?? Muchas gracias

    • Rafael Alejandro Navarro Herna

      A la carpeta de “fonts” renombrala por “assets” y en el código Java cambia esto:
      “fonts/GillSansMT.ttc”
      por esto:
      “GillSansMT.ttc”

      Saludos!

  • Mariolilla

    Hola, tengo un problema cuando quiero cambiar el tipo de letra me da errores con el customFont, custom… como puedo solucionarlo?

    Gracias.