La guía del desarrollador de Android para una mejor tipografía

...

La tipografía puede hacer una gran diferencia en el atractivo y la usabilidad de una aplicación, y ahora los desarrolladores de Android pueden usar tipos de letra del catálogo de Google Fonts. Es simple, eficiente y abre una gama de nuevas opciones tipográficas.

Todo desarrollador sabe que el diseño juega un papel importante en la experiencia del usuario: puede ser un factor crítico en el éxito o el fracaso de su aplicación. Aún así, siempre existe la tentación de usar fuentes predeterminadas, ya sea para avanzar con un lanzamiento, para evitar la complejidad de integrar fuentes personalizadas o simplemente para evitar el arte aparentemente arcano de la selección de tipos.

Afortunadamente, Android Studio ha facilitado la creación de una aplicación con una tipografía distintiva utilizando la nueva función de "Fuentes descargables". Esta función pone el catálogo completo de fuentes de Google a su alcance y facilita la personalización de la tipografía en JellyBean y versiones posteriores (SDK nivel 16+) con fuentes de Google gratuitas, confiables y de alta calidad.

Más allá de las mejoras estéticas, el uso de fuentes descargables también puede reducir el tamaño total de los archivos APK y disminuir el uso de memoria, ya que las fuentes descargadas se compartirán entre todas las aplicaciones. Su APK será más pequeño porque no necesita agrupar las fuentes por adelantado. Una vez que se descarga una fuente de Google Fonts para una aplicación, Android la guarda en el disco para que otras aplicaciones también puedan usarla sin almacenamiento adicional. Al igual que nuestra API web, que sirve las fuentes directamente a los sitios web, cuanto más las personas usen las fuentes de Google, mayores serán las ganancias de latencia al compartir.

En este tutorial, mejoraremos la tipografía de una aplicación de muestra cambiando la fuente estándar por algo con un rango de estilos más distintivo y dinámico del catálogo de Google Fonts. Usaremos una tipografía llamada Alegreya, que se conoce como una "superfamilia" porque ofrece una amplia gama de estilos, pesos y variantes. Usar una súper familia significa que tendremos muchas opciones tipográficas para ajustar la apariencia de nuestra interfaz.

La aplicación con la que trabajaremos es Plaid, de Nick Butcher, que es una fuente desplazable de artículos de noticias relacionados con Material Design. Estos se presentan como mosaicos de sangrado completo, que puede tocar o hacer clic para expandir a una página de "regate" con favoritos y estadísticas para "me gusta" y "vistas".

Este tutorial está destinado a desarrolladores, pero también explica algunas de las decisiones de "por qué" detrás del diseño, ¡así que agárrate a ambos sombreros!

Antes de comenzar

Instala Android Studio 3.0, luego clona el proyecto "Plaid" de Github y finaliza la compra b76937, la versión que usaremos para este tutorial:

git clone https://github.com/rsheeter/plaid.git;
plaid cd;
git checkout b76937;

Ahora abra el proyecto en Android Studio 3.0.

Para utilizar el proveedor de Google Fonts, debe tener instalado Google Play Services versión 12+. Si está trabajando con un dispositivo que está configurado para recibir actualizaciones, puede omitirlo; pero si usa un emulador lanzado a través de Android Studio, podría estar usando una versión anterior de Google Play Services. Para actualizar el dispositivo virtual Android desde Android Studio, siga estos pasos.

1. Cree un dispositivo virtual (Herramientas> Android> Administrador AVD) con Play Store, indicado por el icono en la columna Play Store:

2. Inicie un dispositivo virtual en Android Studio. Para abrir los "Controles extendidos", en el lado derecho de la pantalla del emulador, toque o haga clic en el icono final ... en la parte inferior del panel de botones vertical:

3. Seleccione Google Play y verifique el número de versión. Si está ejecutando 11.2 o inferior, toque o haga clic en el botón Actualizar. Esto debería llevarlo a Play Store, donde debería tocar o hacer clic en el botón verde Actualizar:

4. Ahora que ha actualizado a la versión 11.2 o superior, el dispositivo admitirá fuentes descargables.

Actualice la página Acerca de

Primero, vamos a actualizar la página Acerca de. El párrafo "cuerpo del texto" en la mitad inferior de la página está configurado actualmente en Roboto Regular, una fuente sin letra, mientras que el título (en la mitad superior) está configurado en Roboto Mono Regular. Cambiemos al tipo de letra serif Alegreya, un diseño enérgico y contemporáneo con un ritmo dinámico y variado inspirado en letras caligráficas. El sistema de tipo Alegreya es una "superfamilia", originalmente destinada a la literatura, e incluye familias hermanas serif y sans-serif.

El texto del título sirve como una "imagen de héroe", un gran gráfico que lleva a las personas a la página y establece un tono emocional. Esto utiliza las formas de las letras del título como una "máscara" que corta el primer plano verde menta para que una imagen pueda asomarse desde atrás. El cambio de Roboto Mono Regular a Alegreya Black proporcionará un área de superficie más grande para que esa imagen brille.

Aplicar estilo al texto "Acerca de la actividad"

Dado que el texto "Acerca de la actividad" actualmente requiere el estilo de texto "predeterminado", Roboto Regular, tendremos que configurar otro manualmente:

  1. Abra la aplicación / src / main / res / layout / about_plaid.xml
  2. Seleccione la pestaña Diseño
  3. En el panel Árbol de componentes, abra about_description
  4. En el panel Atributos, abra el menú desplegable fontFamily y seleccione Más fuentes ... (Puede que tenga que hacer clic en Ver todos los atributos para ver fontFamily)
  5. Seleccionar familia Alegreya
  6. Seleccionar estilo Regular
Siga los pasos 1–6 para diseñar el texto

Android Studio ha configurado nuestra aplicación para recuperar la fuente del "proveedor" de Google Fonts. Para hacerlo, realizó una serie de cambios en nuestro árbol de fuentes:

app / src / main / res / font / (más información)
Este nuevo directorio contiene archivos XML que describen recursos de fuentes. En este caso, proporciona instrucciones para cargar un tipo de letra del proveedor de fuentes de Google.

app / src / main / res / values ​​/ font_certs.xml (más información)
Para garantizar que las solicitudes de fuentes solo sean respondidas por terceros de confianza, este archivo especifica la firma del proveedor de fuentes.

app / src / main / res / values ​​/ preloaded_fonts.xml (más información)
Esta es una lista de fuentes para cargar temprano en el inicio de la aplicación. Corregido 12/04/2018; anteriormente indicó erróneamente que estas fuentes se cargan en el momento de la instalación.

app / src / main / AndroidManifest.xml: :
Esta es una lista de fuentes que el proveedor de fuentes de Google intentará cargar en el momento de la instalación (o actualización) de la aplicación.

Puede ver un ejemplo de diferencias para este paso en commit a1e711c.

Actualice la vista de texto recortado

El estilo de texto es actualmente Roboto Mono Regular. Cambiemos continuando donde lo dejamos en el paso anterior:

7. En la vista Diseño, seleccione "CutoutTextView"

8. Abra el menú desplegable "fontFamily" y seleccione "Más fuentes ..."

9. Seleccione la familia "Alegreya"

10. Seleccione el estilo "Negro"

11. (Para el paso 11, ver abajo)

Siga los pasos 7–11 para actualizar CutoutTextView

Si intentara esto ahora, la fuente seguiría siendo Roboto Regular, no Alegreya Black. La razón es que las fuentes declarativas se obtienen de forma asincrónica de forma predeterminada (más información). Al finalizar, el sistema intentará actualizar la fuente de un TextView usando setTypeface, pero esto fallará porque CutoutTextView no extiende TextView.

Sin embargo, CutoutTextView implementa la propiedad fontFamily (aquí). Si marcamos la búsqueda de fuente como bloqueante, entonces fontFamily estará lista cuando la solicitemos. Si no lo marcamos como bloqueo, el valor devuelto para fontFamily aún no será utilizable. (También podríamos codificar la búsqueda asíncrona nosotros mismos, pero guardemos eso para más adelante).

11. Abra app / src / main / res / font / alegreya.xml y alegreya-black.xml, luego agregue este atributo al final de los elementos :

aplicación: fontProviderFetchStrategy = "bloqueo"

¡Ahora pruébalo! (Puede ver un ejemplo de diferencias para este paso en commit f1c997)

Actualizar tamaño de texto

Eche un vistazo al texto "Acerca de". Es gris sobre un fondo gris algo más claro. Alegreya es un tipo de letra serif con alta "modulación de trazo", lo que significa que sus formas de letra varían ampliamente desde los puntos más gruesos hasta los más delgados. Algo contradictorio, esto conduce a un menor contraste visual en general. Las variaciones finas en una forma de letra pueden hacer que parezca borrosa, especialmente en tamaños pequeños.

Para mitigar este problema, aumentemos el tamaño del texto del párrafo de 16sp a 18sp. Esto aumentará el aparente contraste del texto contra su fondo.

TextView para about_plaid.xml usa un estilo llamado TextAppearance.About. Para cambiar el tamaño del texto de 16sp a 18sp, edite esta sección de app / src / main / res / values ​​/ styles.xml:

Puede ver un ejemplo de diferencias para este paso en github.com/rsheeter/plaid/commit/4dda25

Actualiza el título de la aplicación

A continuación, cambiaremos el título de nuestra aplicación buscando una fuente mediante programación. El título se encuentra actualmente en Roboto con la función OpenType "small caps" aplicada. También hemos utilizado un "seguimiento" adicional para espaciar las letras.

(Este detalle está tomado de una convención de tipografía de libros, donde los títulos de los capítulos a menudo se imprimen en minúsculas en la parte superior de las páginas. Para obtener más información sobre la tipografía, consulte el libro Shaping Text de Jan Middendorp)

La recuperación asíncrona fallará porque la barra Google no es una vista de texto, al igual que CutoutTextView no lo es. Además, la barra Google no implementa la propiedad fontFamily, por lo que no podemos establecer el bloqueo para solucionarlo.

En su lugar, intentemos buscar y asignar la fuente mediante programación. Inapp / src / main / java / io / plaidapp / ui / HomeActivity.java usa FontsContractCompat (referencia) para solicitar la fuente siguiendo estos cuatro pasos.

1. Necesitaremos un hilo para esperar la llegada de la fuente. Declare una variable para contenerla:

manipulador privado fontHandler;

2. Agregue un método para administrar el hilo de manejo de fuentes:

3. Agregue un método para aplicar un Tipo de letra (referencia) a la Barra de herramientas:

4. En onCreate, inicie una búsqueda asíncrona desde el proveedor de fuentes:

Cambiar a Alegreya Sans SC Black

Al revisar la página principal, observe que el título se ve demasiado delgado. Al igual que muchos tipos de letra serif, los trazos altamente modulados de Alegreya conducen a un menor contraste visual, especialmente cuando se compara con el sans-serif promedio.

Afortunadamente, Alegreya es una "súper familia" con variedades serif y sans en una variedad de pesos. Emparejar estas dos fuentes y usar pesos diferentes puede dar estructura a una interfaz, delineando la IU del contenido. Probemos Alegreya Sans Small Caps (SC.)

La variante de mayúsculas pequeñas de Alegreya es inherentemente más pequeña, pero podemos corregir esto aumentando su peso. Probemos con el peso Negro (900).

  1. Copie res / font / alegreya.xml para crear res / font / font / alegreya_sans_sc_black.xml
  2. Edite alegreya_sans_sc_black.xml para cambiar la aplicación: fontProviderQuery to name = Alegreya Sans SC & amp; weight = 900
  3. Edite res / values ​​/ preloaded_fonts.xml para agregar la nueva fuente:

4. Especifique la nueva consulta en HomeActivity.java:

Cambiar Alegreya Black a Bold

Eche otro vistazo al título en la página principal.

El peso negro es un poco demasiado fuerte aquí, así que vamos a marcarlo en negrita (700).

  1. Cambie el nombre de alegreya_sans_sc_black.xml a alegreya_sans_sc_bold.xml y edite para cambiar la aplicación: fontProviderQuery to name = Alegreya Sans SC & amp; weight = 700
  2. En HomeActivity.java, actualice la consulta:

Puede ver un ejemplo de diferencias para el estado final de la aplicación (usando Alegreya Sans SC Bold) en commit ac55478. Vea cómo se compara su proyecto.

Actualizar vista de regate

Para acceder a la vista de "driblar" en la aplicación, toque o haga clic en una tarjeta en la pantalla principal. Nuevamente, reemplacemos Roboto Mono Regular con Alegreya Black.

En app / src / main / res / layout / dribbble_shot_title.xml, observe que el título y la descripción están diseñados usando @ style / TextAppearance.DribbbleShotTitle y @ style / TextAppearance.DribbbleShotDescription. Encuéntrelos en app / src / main / res / values ​​/ styles.xml (pista: Ctrl + Click.) Ahora cambie la fuente:

Puede ver una diferencia de muestra para esto en commit 0e53b56.

Cambiar estilos numéricos

Solo hay una cosa más que mejorar en la vista de "regate".

Los botones "me gusta" y "vistas" usan lo que se llaman números de "estilo antiguo". Están diseñados para combinarse con letras latinas en minúsculas en párrafos de texto. Pero por sí solos, los números de estilo antiguo parecen fuera de lugar porque sus descendientes a veces cuelgan debajo de la línea de base del otro texto.

En cambio, usemos la función lnum. Esto le dice a la aplicación que use números de "revestimiento", que son más familiares porque están diseñados para tener la misma altura que las letras mayúsculas. (Obtenga más información de nuestros amigos en Typekit)

Mirando app / src / main / res / layout / dribbble_shot_description.xml podemos ver que los contadores de "me gusta" y "vistas" están diseñados por @ style / Widget.Plaid.InlineActionButton.

Encuentra @ style / Widget.Plaid.InlineActionButton en app / src / main / res / values ​​/ styles.xml (pista: Ctrl + Click).

Ahora agregue una instrucción para usar números de revestimiento para estos contadores:

Puede ver un ejemplo de diferencias para esto en commit 4dda25.

Conclusión

Después de aplicar estos simples cambios, mi bifurcación de la aplicación Plaid ahora tiene una tipografía más llamativa y funcional extraída de la biblioteca de fuentes gratuitas de código abierto de Google. Con la nueva función de fuentes descargables de Android, puede usar cualquier cosa en el directorio de fuentes de Google para personalizar la tipografía en su aplicación. Como ha visto en este tutorial, solo unos pocos cambios pueden marcar una diferencia real en la legibilidad y la experiencia del usuario. ¡Estamos emocionados de ver lo que haces!