Imagina Formación

Crea una tipografía personalizada en Android – Guía

Android
Intermedio
30'

En el siguiente tutorial vamos a cambiar la tipografía por defecto de nuestras aplicaciones. Android nos proporciona la fuente llamada Roboto. Podemos ver las características y descargar la tipografía desde la página oficial de desarrolladores de Android.

El tutorial es muy sencillo pero indispensable, ya que cada empresa suele pedirnos que utilicemos su tipografía corporativa.

Crearemos un nuevo proyecto llamado MyTypeface, donde cargaremos dos tipografías distintas. Una de ellas es la fuente libre y la segunda es una tipografía libre llamada actionjackson.

Llamamos al proyecto MyTypeface e indicamos un nombre de paquete. Dejaremos todas las demás opciones por defecto.

Eclipse nos creará una Activity y su correspondiente layout.

Una vez creado el proyecto MyTypeface crearemos una carpeta fonts dentro de assets. Dentro de ella insertaremos todas la tipografías de nuestro proyecto.

Podemos descargar las fuentes Folk Solid y actionJackson

Podemos utilizar ésta técnica desde la versión 1 de Android y no necesitamos ningún tipo de permiso para cargar las fuentes.

Vamos a modificar el layout de la actividad de forma que muestre dos textos que modificaremos desde el código de la actividad.

<RelativeLayout

android_layout_width="match_parent"
android_layout_height="match_parent" >

<TextView
android_id="@+id/text1"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_centerHorizontal="true"
android_layout_centerVertical="true"
android_text="text1"
tools_context=".MainActivity" />

<TextView
android_id="@+id/text2"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_below="@+id/text1"
android_layout_centerHorizontal="true"
android_text="text2" />

</RelativeLayout>

A continuación modificaremos nuestra Activity de la siguiente forma:

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends Activity {

/* Fuente textos */
private Typeface belrosFont;
private Typeface actionFont;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

belrosFont = Typeface.createFromAsset(getAssets(),
"fonts/Folksolid.otf");

actionFont = Typeface.createFromAsset(getAssets(),
"fonts/actionjackson.ttf");

TextView text1 = (TextView) findViewById(R.id.text1);
text1.setTypeface(belrosFont);
text1.setText("Hola Imagina");
text1.setTextSize(30);

TextView text2 = (TextView) findViewById(R.id.text2);
text2.setTypeface(actionFont);
text2.setText("Hola Imagina");
text2.setTextSize(30);
}
}

Podemos observar dos objetos Typeface en los que cargamos las fuentes que tenemos en la carpeta fonts. Cargamos la fuente de Belros mediante el método createFromAsset que nos proporciona la clase Typeface.

belrosFont = Typeface.createFromAsset(getAssets(), "fonts/Folksolid.otf");

Una vez cargada la fuente es muy sencillo utilizarla mediante el método setTypeface de los controles TextView, EditText, entre otros con texto.

text2.setTypeface(actionFont);

Si probamos ejecutar la aplicación nos encontraremos con una imagen como la siguiente.

¿Quieres un plan de formación personalizado?

*requerido

  • Responsable de los datos: IMAGINA WEB & MOBILE TECHNOLOGIES S.L.
  • Finalidad de los datos: Responder a la información solicitada, envío de boletines de noticias y ofertas.
  • Destinatarios: IMAGINA WEB & MOBILE TECHNOLOGIES S.L. No se cederán los datos a terceros.
  • Derechos: En cualquier momento puedes acceder, recuperar y borrar tu información.