Aspectos básicos de Kotlin para Android 10.1: Estilos y temas

Este codelab es parte del curso Conceptos básicos de Kotlin para Android. Aprovecharás al máximo este curso si trabajas con los codelabs de forma secuencial. Todos los codelabs del curso se enumeran en la página de destino de los codelabs de Android Kotlin Fundamentals.

Introducción al diseño

En esta serie de codelabs, nos enfocaremos en uno de los aspectos más importantes del desarrollo para Android: el diseño de apps. Los aspectos obvios del diseño de la app son las vistas, el texto y los botones, y su ubicación en la pantalla, así como los colores y las fuentes que usan. Las sugerencias para el usuario sobre qué hacer a continuación también son un aspecto esencial del diseño. Los usuarios deben poder saber de un vistazo lo que están viendo, lo que es importante y lo que pueden hacer.

Compara las dos pantallas que se muestran a continuación. Ten en cuenta que, al mover elementos y enfocar la atención en lo importante, puedes ayudar al usuario a comprender lo que sucede. En el caso de las pantallas simples, un buen diseño suele significar mostrar menos información. En el caso de las pantallas con mucha información importante, un buen diseño hace que la información densa se comprenda de un vistazo. A medida que trabajes en apps para Android, es posible que escuches este concepto llamado arquitectura de la información (AI).

Otro nivel de diseño es la creación de flujos de usuarios coherentes, o casos de uso, que permiten a los usuarios completar tareas. Esta forma de diseño se llama diseño de experiencia del usuario (UXD), y algunos diseñadores se especializan en ella.

Si no tienes acceso a un diseñador, aquí tienes algunas sugerencias para comenzar:

  • Define casos de uso. Escribe lo que los usuarios deberían lograr con tu app y cómo hacerlo.
  • Implementa un diseño. No te aferres a tu primer borrador y solo haz que sea "suficientemente bueno", ya que lo cambiarás después de ver cómo interactúan los usuarios reales con él.
  • Obtén comentarios. Busca a cualquier persona a la que puedas convencer para que pruebe tu app: tu familia, tus amigos o incluso personas que acabas de conocer en un Google Developer Group. Pídele que use tu app para realizar un caso de uso mientras lo observas y tomas notas detalladas.
  • ¡Definir mejor! Con toda esa información, mejora la app y, luego, vuelve a probarla.

Estas son algunas otras preguntas que debes hacerte cuando diseñes una excelente experiencia en la app. En los codelabs anteriores, aprendiste técnicas para abordar estos problemas:

  • ¿La app pierde su estado cuando el usuario rota el dispositivo?
  • ¿Qué sucede cuando el usuario abre la app? ¿El usuario ve un indicador de carga o los datos están listos en una caché sin conexión?
  • ¿La app está codificada de manera eficiente y garantiza que siempre responda al tacto del usuario?
  • ¿La app interactúa con los sistemas de backend de una manera que nunca genera datos extraños, incorrectos o inactivos que se le presentan al usuario?

A medida que trabajas en apps para públicos más grandes, es fundamental que tus apps sean accesibles para la mayor cantidad posible de tipos de usuarios. Por ejemplo:

  • Muchos usuarios interactúan con los sistemas informáticos de diferentes maneras. Muchos usuarios son daltónicos, y los colores que contrastan para un usuario pueden no funcionar para otro. Muchos usuarios tienen problemas de visión, desde la necesidad de usar anteojos para leer hasta la ceguera.
  • Algunos usuarios no pueden usar pantallas táctiles y, en cambio, interactúan a través de otros dispositivos de entrada, como botones.

Un buen diseño es la forma más importante de lograr que los usuarios usen tu app.

Estos codelabs son demasiado cortos para enseñarte todo sobre el diseño para Android, pero te ayudarán a comenzar en la dirección correcta y podrás seguir aprendiendo y desarrollándote por tu cuenta.

Conocimientos que ya deberías tener

Debes estar familiarizado con lo siguiente:

  • Cómo crear apps con actividades y fragmentos, y navegar entre fragmentos pasando datos
  • Usar vistas y grupos de vistas para diseñar una interfaz de usuario (IU), incluido RecyclerView
  • Cómo usar los componentes de la arquitectura, incluido ViewModel, con la arquitectura recomendada para crear una app eficiente y bien estructurada
  • Vinculación de datos, corrutinas y cómo controlar los clics
  • Cómo conectarse a Internet y almacenar datos en caché de forma local con una base de datos de Room
  • Cómo establecer las propiedades de la vista
  • Cómo extraer recursos en archivos de recursos XML y usarlos desde ellos

Qué aprenderás

  • Conceptos básicos del sistema de diseño de Android
  • Cómo usar atributos, estilos y temas para personalizar tu app

Actividades

  • Mejora el diseño de una app de inicio con atributos de vistas, estilos y temas

La app de inicio de GDG-finder se basa en todo lo que aprendiste hasta ahora en este curso.

La app usa ConstraintLayout para diseñar tres pantallas. Dos de las pantallas son solo archivos de diseño que usarás para explorar los colores y el texto en Android.

La tercera pantalla es un buscador de GDG. Los GDG, o Grupos de Google Developers, son comunidades de desarrolladores que se enfocan en las tecnologías de Google, incluido Android. Los GDG de todo el mundo organizan reuniones, conferencias, Study Jams y otros eventos.

A medida que desarrolles esta app, trabajarás en la lista real de GDG. La pantalla del buscador usa la ubicación del dispositivo para ordenar los GDG por distancia.

Si tienes suerte y hay un GDG en tu región, puedes visitar el sitio web y registrarte para asistir a sus eventos. Los eventos de GDG son una excelente manera de conocer a otros desarrolladores de Android y aprender las prácticas recomendadas de la industria que no se incluyeron en este curso.

En las siguientes capturas de pantalla, se muestra cómo cambiará tu app desde el comienzo hasta el final de este codelab.

Android proporciona un sistema de diseño enriquecido que te permite controlar la apariencia de todas las vistas de tu app. Puedes usar temas, estilos y atributos de vista para afectar el diseño. En el siguiente diagrama, se resume la precedencia de cada método de diseño. El diagrama de pirámide muestra el orden en que el sistema aplica los métodos de diseño, de abajo hacia arriba. Por ejemplo, si configuras el tamaño del texto en el tema y, luego, lo configuras de manera diferente en los atributos de la vista, los atributos de la vista anularán el diseño del tema.

Atributos de vista

  • Usa atributos de vista para establecer atributos de forma explícita para cada vista. (Los atributos de vista no son reutilizables, como sí lo son los estilos).
  • Puedes usar todas las propiedades que se pueden configurar a través de estilos o temas.

Se usa para diseños personalizados o únicos, como márgenes, padding o restricciones.

Estilos

  • Usa un estilo para crear una colección de información de diseño reutilizable, como el tamaño de la fuente o los colores.
  • Es útil para declarar conjuntos pequeños de diseños comunes que se usan en toda la app.

Aplicar un estilo a varias vistas, anulando el estilo predeterminado Por ejemplo, usa un diseño para crear encabezados o un conjunto de botones con un diseño coherente.

Estilo predeterminado

  • Este es el diseño predeterminado que proporciona el sistema Android.

Temas

  • Usa un tema para definir los colores de toda tu app.
  • Usa un tema para establecer la fuente predeterminada de toda la app.
  • Se aplica a todas las vistas, como las vistas de texto o los botones de selección.
  • Se usa para configurar propiedades que puedes aplicar de manera coherente en toda la app.

TextAppearance

  • Para aplicar diseño solo con atributos de texto, como fontFamily

Cuando Android aplica un diseño a una vista, aplica una combinación de temas, diseños y atributos que puedes personalizar. Los atributos siempre anulan cualquier especificación de un tema o estilo. Además, los estilos siempre reemplazan cualquier elemento especificado en un tema.

En las siguientes capturas de pantalla, se muestra la app de GDG-finder con el tema claro (izquierda) y un tema oscuro (derecha), así como con una fuente y tamaños de encabezado personalizados. Esto se puede implementar de varias maneras, y aprenderás algunas de ellas en este codelab.

En esta tarea, usarás atributos para definir el estilo de los encabezados del texto en el diseño de la app.

  1. Descarga y ejecuta la app de inicio de GDG-finder.
  2. Observa que la pantalla principal tiene mucho texto con formato uniforme, lo que dificulta saber de qué se trata la página y qué es importante.
  3. Abre el archivo de diseño home_fragment.xml.
  4. Ten en cuenta que el diseño usa ConstraintLayout para posicionar elementos dentro de un ScrollView.
  5. Ten en cuenta que, para cada vista, los atributos de diseño de restricción y margen se configuran en la vista, ya que estos atributos suelen personalizarse para cada vista y pantalla.
  6. En la vista de texto title, agrega un atributo textSize para cambiar el tamaño del texto a 24sp.

    Recuerda que sp significa píxeles independientes de la escala, que se ajustan según la densidad de píxeles y la preferencia de tamaño de fuente que el usuario establece en la configuración del dispositivo. Android calcula qué tan grande debe ser el texto en la pantalla cuando lo dibuja. Siempre usa sp para los tamaños de texto.
<TextView
       android:id="@+id/title"
...

android:textSize="24sp"
  1. Establece el textColor de la vista de texto title en gris opaco. Para ello, configúralo en un valor aRGB de #FF555555. 
<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"
  1. Para abrir la pestaña Preview en Android Studio, selecciona View > Tool Windows > Preview o haz clic en el botón vertical Preview en el borde derecho del editor de diseño. En la vista previa, verifica que el título esté en gris y sea más grande que antes, como se muestra a continuación.

  1. Aplica un estilo al subtítulo para que tenga el mismo color que el encabezado, con una fuente más pequeña, 18sp. (El valor alfa predeterminado es FF, opaco. Puedes omitir el valor alfa si no lo cambias.
<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

  1. En este codelab, el objetivo es diseñar la app para que sea un poco caprichosa y, a la vez, se vea profesional, pero puedes diseñarla como quieras. Prueba los siguientes atributos para la vista de texto subtitle. Usa la pestaña Preview para ver cómo cambia la apariencia de tu app. Luego, quita estos atributos.
<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"
  1. No olvides deshacer los atributos textAllCaps, textStyle y background de la vista subtitle antes de continuar.
  2. Ejecuta tu app, que ya debería verse mejor.

Cuando usas fuentes con tu app, puedes enviar los archivos de fuente necesarios como parte de tu APK. Si bien es simple, esta solución no se recomienda, ya que hace que la descarga e instalación de tu app demoren más.

Android permite que las apps descarguen fuentes en el tiempo de ejecución con la API de Downloadable Fonts. Si tu app usa la misma fuente que otra app en el dispositivo, Android solo la descarga una vez, lo que ahorra espacio de almacenamiento del dispositivo.

En esta tarea, usarás fuentes descargables para establecer la fuente de cada vista de tu app que use el tema.

Paso 1: Aplica una fuente descargable

  1. Abre home_fragment.xml en la pestaña Design.
  2. En el panel Component Tree, selecciona la vista de texto title.
  3. En el panel Attributes, busca el atributo fontFamily. Puedes encontrarlo en la sección All Attributes o simplemente buscarlo.
  4. Haz clic en la flecha desplegable.
  5. Desplázate hasta Más fuentes y selecciónala. Se abrirá la ventana Resources.

  1. En la ventana Recursos, busca lobster o solo lo.
  2. En los resultados, selecciona Lobster Two.
  3. A la derecha, debajo del nombre de la fuente, selecciona el botón de selección Create downloadable font. Haz clic en OK.
  4. Abre el archivo de manifiesto de Android.
  5. Cerca de la parte inferior del manifiesto, busca la nueva etiqueta <meta-data> con los atributos name y resource establecidos en "preloaded_fonts". Esta etiqueta indica a los Servicios de Google Play que esta app quiere usar fuentes descargadas. Cuando se ejecuta tu app y solicita la fuente Lobster Two, el proveedor de fuentes descarga la fuente de Internet si aún no está disponible en el dispositivo.
<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>
  1. En la carpeta res/values, busca el archivo preloaded_fonts.xml, que define el array que enumera todas las fuentes descargables para esta app.
  2. Del mismo modo, el archivo res/fonts/lobster_two.xml contiene información sobre la fuente.
  3. Abre home_fragment.xml y observa en el código y la vista previa que la fuente Lobster Two se aplica al title TextView y, por lo tanto, al título.

  1. Abre res/values/styles.xml y examina el tema AppTheme predeterminado que se creó para el proyecto. Actualmente, se ve de la siguiente manera: Para aplicar la nueva fuente Lobster Two a todo el texto, deberás actualizar este tema.
  2. En la etiqueta <style>, observa el atributo parent. Cada etiqueta de estilo puede especificar un elemento superior y heredar todos sus atributos. El código especifica el Theme definido por las bibliotecas de Android. El tema MaterialComponents que especifica todo, desde cómo funcionan los botones hasta cómo dibujar barras de herramientas. El tema tiene valores predeterminados razonables, por lo que puedes personalizar solo las partes que desees. La app usa la versión Light de este tema sin la barra de acciones (NoActionBar), como puedes ver en la captura de pantalla anterior.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>
  1. Dentro del estilo AppTheme, configura la familia de fuentes en lobster_two. Debes establecer android:fontFamily y fontFamily, ya que el tema principal usa ambos. Puedes marcar home_fragment.xml en la pestaña Diseño para obtener una vista previa de los cambios.
<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>
  1. Vuelve a ejecutar la app. La nueva fuente se aplica a todo el texto. Abre el panel lateral de navegación y muévete a las otras pantallas. Verás que la fuente también se aplica allí.

Paso 2: Aplica el tema al título

  1. En home_fragment.xml, busca la vista de texto title, que tiene el atributo para la fuente lobster_two. Borra el atributo fontFamily y ejecuta la app. Como el tema establece la misma familia de fuentes, no hay cambios.
  2. Vuelve a colocar un atributo fontFamily diferente en la vista de texto title:
    app:fontFamily="serif-monospace"
    Asegúrate de que esté en el espacio app.
<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"
  1. Ejecuta la app y verás que el atributo local para la vista anula el tema.
  1. Quita el atributo fontFamily de la vista de texto title.

Los temas son ideales para aplicar temas generales a tu app, como una fuente predeterminada y colores principales. Los atributos son ideales para aplicar un diseño a una vista específica y agregar información de diseño, como márgenes, padding y restricciones, que suelen ser específicos para cada pantalla.

En el medio de la pirámide de jerarquía de estilos, se encuentran los estilos. Los estilos son "grupos" reutilizables de atributos que puedes aplicar a las vistas que elijas. En esta tarea, usarás un estilo para el título y el subtítulo.

Paso 1: Crea un diseño

  1. Abre res/values/styles.xml.
  2. Dentro de la etiqueta <resources>, define un nuevo diseño con la etiqueta <style>, como se muestra a continuación.
<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

Es importante pensar en los nombres de los estilos como semánticos cuando los asignas. Selecciona un nombre de estilo según el uso que se le dará, no según las propiedades que afecta. Por ejemplo, llama a este estilo Title, no algo como LargeFontInGrey. Cualquier título de tu app usará este estilo. Como convención, los estilos TextAppearance se denominan TextAppearance.Name, por lo que, en este caso, el nombre es TextAppearance.Title.

El estilo tiene un elemento principal, al igual que un tema puede tener un elemento principal. Sin embargo, esta vez, en lugar de extender un tema, el estilo extiende un estilo, TextAppearance.MaterialComponents.Headline6. Este es un estilo de texto predeterminado para el tema MaterialComponents, por lo que, si lo extiendes, modificas el estilo predeterminado en lugar de comenzar desde cero.

  1. Dentro del nuevo diseño, define dos elementos. En un elemento, establece textSize en 24sp. En el otro elemento, establece textColor en el mismo gris oscuro que se usó antes. 
 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>
  1. Define otro estilo para los subtítulos. Asígnale el nombre TextAppearance.Subtitle.
  2. Como la única diferencia con TextAppearance.Title será el tamaño del texto, haz que este estilo sea secundario de TextAppearance.Title.
  3. Dentro del estilo Subtitle, establece el tamaño del texto en 18sp. Este es el estilo completo:
<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

Paso 2: Aplica el estilo que creaste

  1. En home_fragment.xml, agrega TextAppearance.Aplica el estilo Title a la vista de texto title. Borra los atributos textSize y textColor.

    Los temas anulan cualquier diseño de TextAppearance que establezcas. (El diagrama de pirámide al comienzo del codelab muestra el orden en el que se aplica el diseño). Usa la propiedad textAppearance para aplicar el diseño como un TextAppearance, de modo que la fuente establecida en Theme anule lo que establezcas aquí.
<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"
  1. También agrega el estilo TextAppearance.Subtitle a la vista de texto subtitle y borra los atributos textSize y textColor. También debes aplicar este estilo como un textAppearance para que la fuente establecida en el tema anule lo que estableciste aquí.
<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"
  1. Ejecuta la app y verás que el texto ahora tiene un estilo coherente.

Proyecto de Android Studio: GDGFinderStyles
  • Usa temas, estilos y atributos en las vistas para cambiar su apariencia.
  • Los temas afectan el diseño de toda la app y vienen con muchos valores predeterminados para colores, fuentes y tamaños de fuente.
  • Un atributo se aplica a la vista en la que se configura. Usa atributos si tienes un diseño que se aplica a una sola vista, como padding, márgenes y restricciones.
  • Los estilos son grupos de atributos que pueden usar varias vistas. Por ejemplo, puedes tener un estilo para todos los encabezados de contenido, botones o vistas de texto.
  • Los temas y los estilos heredan de su tema o estilo principal. Puedes crear una jerarquía de estilos.
  • Los valores de los atributos (que se establecen en las vistas) anulan los estilos. Los diseños anulan el diseño predeterminado. Los diseños anulan los temas. Los temas anulan cualquier diseño establecido por la propiedad textAppearance.

  • Define estilos en el archivo de recursos styles.xml con las etiquetas <style> y <item>.
<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

El uso de fuentes descargables hace que las fuentes estén disponibles para los usuarios sin aumentar el tamaño de tu APK. Para agregar una fuente descargable a una vista, haz lo siguiente:

  1. Selecciona la vista en la pestaña Diseño y, luego, Más fuentes en el menú desplegable del atributo fontFamily.
  2. En el diálogo Recursos, busca una fuente y selecciona el botón de opción Crear fuente descargable.
  3. Verifica que el manifiesto de Android incluya una etiqueta de metadatos para las fuentes precargadas.

Cuando la app solicita una fuente por primera vez y esta aún no está disponible, el proveedor de fuentes la descarga de Internet.

Documentación para desarrolladores de Android:

Otros recursos:

En esta sección, se enumeran las posibles actividades para el hogar para los alumnos que trabajan en este codelab como parte de un curso dirigido por un instructor. Depende del instructor hacer lo siguiente:

  • Si es necesario, asigna una tarea.
  • Comunicarles a los alumnos cómo enviar las actividades para el hogar.
  • Califica las actividades para el hogar.

Los instructores pueden usar estas sugerencias en la medida que quieran y deben asignar cualquier otra actividad para el hogar que consideren apropiada.

Si estás trabajando en este codelab por tu cuenta, usa estas actividades para el hogar para probar tus conocimientos.

Responde estas preguntas:

Pregunta 1

¿Qué etiqueta se usa para definir temas?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

Pregunta 2

¿Cuál de las siguientes opciones NO es un buen uso de los estilos?

▢ Especifica las restricciones de una vista.

▢ Especificar el color de fondo de los encabezados

▢ Unificar el tamaño de fuente en todas las vistas

▢ Especificar el color de texto para un grupo de vistas

Pregunta 3

¿Cuál es la diferencia entre los temas y los estilos?

▢ Los temas se aplican en toda la app, pero los estilos se pueden aplicar en vistas específicas.

▢ Los temas no se pueden heredar de otros temas, pero los estilos sí pueden heredarse de otros estilos.

▢ Los estilos no se pueden heredar de otros estilos, pero los temas sí pueden heredarse de otros temas.

▢ El sistema Android proporciona los temas, pero el desarrollador define los estilos.

Pregunta 4

Si un TextView en tu app tiene un Theme que establece el tamaño de la fuente en 12sp, un estilo definido que lo establece en 14sp y un atributo fontSize de 16sp, ¿cuál es el tamaño de la fuente que se muestra en la pantalla?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

Comienza la siguiente lección: 10.2: Material Design, dimens, and colors

Para obtener vínculos a otros codelabs de este curso, consulta la página de destino de los codelabs de Conceptos básicos de Kotlin para Android.