Fuentes en XML

Android 8.0 (nivel de API 26) introduce una nueva función, Fuentes en XML, que permite utilizar las fuentes como recursos. Puedes añadir el archivo font en la carpeta res/font/ para agrupar fuentes como recursos. Estas fuentes se compilan en tu archivo R y están disponibles automáticamente en Android Studio. Puedes acceder a los recursos de fuentes con la ayuda de un nuevo tipo de recurso, font. Por ejemplo, para acceder a un recurso de fuente, utiliza @font/myfont, o R.font.myfont.

Para utilizar la función Fuentes en XML en dispositivos con Android 4.1 (nivel de API 16) y superior, utilice la biblioteca de soporte 26. Para obtener más información sobre el uso de la biblioteca de soporte, consulte la sección Uso de la biblioteca de soporte.

Para añadir fuentes como recursos, realice los siguientes pasos en Android Studio:

  1. Haga clic con el botón derecho del ratón en la carpeta res y vaya a Nuevo > directorio de recursos de Android.

    Aparece la ventana Nuevo directorio de recursos.

  2. En la lista Tipo de recurso, seleccione la fuente y, a continuación, haga clic en Aceptar.

    Nota: el nombre del directorio de recursos debe ser fuente.

    Añadir el directorio de recursos de fuentes

    Figura 1. Añadiendo el directorio de recursos de fuentes

  3. Agrega tus archivos de fuentes en la carpeta de fuentes.

    La estructura de carpetas de abajo genera R.font.dancing_scriptR.font.lobster, y R.font.typo_graphica.

    Añadir los archivos de fuentes en el directorio de recursos

    Figura 2. Añadir los archivos de fuentes en el directorio de recursos

  4. Haga doble clic en un archivo de fuentes para previsualizar las fuentes del archivo en el editor. Visualización del archivo de fuentes

    Figura 3. Vista previa del archivo de fuentes

Crear una familia de fuentes

Una familia de fuentes es un conjunto de archivos de fuentes junto con sus detalles de estilo y peso. En Android, puedes crear una nueva familia de fuentes como un recurso XML y acceder a ella como una sola unidad, en lugar de referenciar cada estilo y peso como recursos separados. Al hacer esto, el sistema puede seleccionar la fuente correcta basada en el estilo de texto que está tratando de utilizar.

Para crear una familia de fuentes, realice los siguientes pasos en Android Studio:

  1. Haga clic con el botón derecho en la carpeta font y vaya a Nuevo > Archivo de recursos de fuentes. Aparece la ventana Nuevo archivo de recursos.
  2. Ingrese el nombre del archivo y, a continuación, haga clic en Aceptar. El nuevo recurso de fuente XML se abre en el editor.
  3. Cierre cada archivo de fuente, estilo y atributo de peso en el elemento <font>. El siguiente XML ilustra la adición de atributos relacionados con las fuentes en el XML de recursos de fuentes:
    <?xml version="1.0" encoding="utf-8"?><font-family xmlns:android="http://schemas.android.com/apk/res/android"> <font android:fontStyle="normal" android:fontWeight="400" android:font="@font/lobster_regular" /> <font android:fontStyle="italic" android:fontWeight="400" android:font="@font/lobster_italic" /></font-family>
  4. Utilización de fuentes en diseños XML

    Utilice sus fuentes, ya sea un único archivo de fuentes o una fuente de una familia de fuentes, en un objeto TextView o en estilos. Para añadir fuentes al objeto TextView o en estilos, utilice el atributo fontFamily.

    Nota: Cuando se utiliza una familia de fuentes, el TextView cambia por sí solo, según sea necesario, para utilizar los archivos de fuentes de esa familia.

    Añadir fuentes a un TextView

    Para establecer una fuente para el TextView, haga una de las siguientes cosas:

  • En el archivo XML de diseño, establezca el atributo fontFamily al archivo de fuentes al que desea acceder.
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:fontFamily="@font/lobster"/>
  • Abra la ventana de propiedades para establecer la fuente para el TextView.
    1. Seleccione una vista para abrir la ventana Propiedades.

      Nota: La ventana de Propiedades sólo está disponible cuando el editor de diseño está abierto. Seleccione la pestaña Diseño en la parte inferior de la ventana.

    2. Despliegue la propiedad textAppearance y, a continuación, seleccione la fuente de la lista fontFamily.
    3. Seleccionando la fuente desde Propiedades

      Figura 4. Selección de la fuente desde la ventana de Propiedades

La vista previa del diseño de Android Studio, que se muestra en el panel más a la derecha de la Figura 5, permite previsualizar la fuente establecida en el TextView.

Visualización de las fuentes en la vista previa del diseño

Figura 5. Vista previa de las fuentes en la vista previa del diseño

Añadir fuentes al estilo

Abre el styles.xml, y establece el atributo fontFamily al archivo de fuentes al que quieres acceder.

  • <style name="customfontstyle" parent="@android:style/TextAppearance.Small"> <item name="android:fontFamily">@font/lobster</item></style>
  • Utilizar fuentes mediante programación

    Para recuperar fuentes mediante programación, llama al método getFont(int) y proporciona el identificador de recurso de la fuente que quieres recuperar. Este método devuelve un objeto Typeface. Aunque el sistema escoge el mejor estilo para ti a partir de la información de las fuentes, puedes utilizar el método setTypeface(android.graphics.Typeface, int) para establecer el tipo de letra con estilos específicos.

    Nota: El TextView ya lo hace por ti.

    Kotlin

    val typeface = resources.getFont(R.font.myfont)textView.typeface = typeface

    Java

    Typeface typeface = getResources().getFont(R.font.myfont);textView.setTypeface(typeface);

    Utilizando la biblioteca de soporte

    La biblioteca de soporte 26.0 proporciona compatibilidad con la función Fuentes en XML en dispositivos con Android 4.1 (nivel de API 16) y superior.

    Nota: cuando declare familias de fuentes en el diseño XML a través de la biblioteca de soporte, utilice el espacio de nombres de la aplicación para garantizar que sus fuentes se carguen.

    <?xml version="1.0" encoding="utf-8"?><font-family xmlns:app="http://schemas.android.com/apk/res-auto"> <font app:fontStyle="normal" app:fontWeight="400" app:font="@font/myfont-Regular"/> <font app:fontStyle="italic" app:fontWeight="400" app:font="@font/myfont-Italic" /></font-family>

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *