martes, 26 de julio de 2011

Fuentes en Android – Android fonts

Por defecto, en todos los dispositivos Android vienen cargadas tres fuentes que podemos utilizar libremente en nuestras aplicaciones:
  • Sans
  • Serif
  • Monospace
Para cambiar la fuente utilizada en un texto podemos indicarlo directamente en el fichero xml que lo define. Por ejemplo, en nuestra aplicación, abrimos el fichero \res\layout\main.xml y en la definición del TextView incluimos la linea :
android:typeface=”sans” de forma que quede como sigue:

<TextView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    android:typeface="sans"
    />


Para probar con las diferentes fuentes definimos  varias entradas en nuestro fichero strings.xml (yo les he llamado ‘helloSans’, ‘helloSerif’ y ‘helloMonospace’) y a cada uno le pongo un contenido distinto. Después en el fichero main.xml defino un TextView por cada uno de ellos con una fuente distinta:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/helloSans"
    android:typeface="sans"
    />
<TextView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/helloSerif"
    android:typeface="serif"
    />
<TextView 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/helloMonospace"
    android:typeface="monospace"
    />   
</LinearLayout>


Al ejecutar la aplicación veremos los diferentes tipos de letra aplicados a cada uno de los campos:
 
Si queremos aplicar una fuente diferente a las que vienen por defecto en Android tendremos que conseguir el fichero .ttf (true type font) correspondiente (en la red encontrareís multiples páginas desde la que podreis descargar ficheros de este tipo).
Una vez conseguido debemos crear la carpeta ‘fonts’ dentro de ‘assets’ en nuestro proyecto y, dentro de ella copiaremos nuestro fichero .ttf. Yo haré la prueba con la fuente jokerman.ttf.
Defino una nueva entrada en strings.xml llamada ‘helloPoker’ y un nuevo campo TextView en main.xml, sin ponerle el atributo typeface, pero añadiendo un identificador para poder manejarlo desde nuestro programa. Debe quedar así:

<TextView 
    android:id="@+id/poker"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/helloPoker"
    />
Para asignar la nueva fuente al campo de texto deberemos empezar a tocar código fuente del fichero ‘AndroideNovatoActivity.java’ de la carpeta ‘src’ de forma que quede como sigue:

 
public class AndroideNovatoActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        // Defino la nueva fuente cargandola desde el fichero .ttf         
        Typeface miPropiaTypeFace = Typeface.createFromAsset(getAssets(), "fonts/jokerman.ttf");
        
        // Cargo en una variable tipo TextView el campo de la pantalla
        // identificado con el id poker.
        
        TextView helloPoker = (TextView)findViewById(R.id.poker);
        
        // Le aplico el nuevo tipo de letra
        helloPoker.setTypeface(miPropiaTypeFace);

    }
}
Si os aparecen algunas líneas subrayadas en rojo significa que debemos importar las clases corresondientes para manejar ese tipo de datos. Para solucionar este problema pulsamos a la vez las teclas Ctrl-Shift y la letra ‘O’ y Eclipse incluirá las líneas que hacen falta automáticamente al principio del programa.
Al ejecutar la aplicación veremos el nuevo campo con la nueva fuente cargada:

 
El uso de fuentes personalizadas tiene sus pegas como el tamaño que ocupan o posibles desajustes según la resolución del dispositivo en el que se utilice. Asimismo debemos tener en cuenta si la fuente utilizada permite su libre utilización o está sujeta a algún tipo de restricción legal.

Podeis encontrar un tutorial más avanzado aqui y algunas fuentes para probar en esta página.

Cuidaos.

1 comentario:

  1. Y si el texto que quiero cambiar no esta en un layout de este tipo, sino en el xml que define los rows de un ListView. Solo con el tipico findViewByID no se consigue.
    Un saludo

    ResponderEliminar