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 en secuencia. Todos los codelabs del curso se detallan en la página de destino de codelabs sobre los aspectos básicos de Kotlin para Android.

Introducción al diseño

El enfoque de esta serie de codelabs es uno de los aspectos más importantes del diseño de apps para Android. Los aspectos evidentes del diseño de la app son las vistas, el texto, los botones y la ubicación en la que se muestran, así como los colores y las fuentes que usan. Las indicios para que el usuario sepa qué hacer a continuación también son un aspecto esencial del diseño. Los usuarios deben poder distinguir rápidamente 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, si mueves los elementos y te enfocas en lo importante, puedes ayudar al usuario a comprender lo que sucede. En el caso de las pantallas simples, un buen diseño a menudo significa mostrar menos. Para pantallas con mucha información importante, un buen diseño hace que la información densa sea fácil de entender de un vistazo. A medida que trabajes en apps de Android, es posible que escuches este concepto llamado arquitectura de información (IA).

Otro nivel de diseño consiste en crear flujos de usuarios coherentes, o casos de uso, que les permitan a los usuarios realizar tareas. Esta forma de diseño se denomina diseño de experiencia del usuario (UXD) y algunos diseñadores se especializan en ella.

Si no tienes acceso a un diseñador, consulta las siguientes sugerencias para comenzar:

  • Definir los casos de uso Escribe lo que los usuarios deberían lograr con tu app y la forma de hacerlo.
  • Implementa un diseño. No lo adjuntes a tu primer borrador y haz que sea lo suficientemente bueno porque lo modificarás cuando veas cómo los usuarios reales interactúan con él.
  • Obtener comentarios. Busca personas con las que puedas hablar para probar tu app: tu familia, tus amigos o incluso las personas que acabas de conocer en un grupo de Google Developers. Pídeles que usen la app para ejecutar un caso de uso mientras miras contenido y toman notas detalladas.
  • Definir mejor Con toda esa información, mejora la app y vuelve a probarla.

A continuación, se incluyen otras preguntas que puedes hacerte al diseñar una experiencia genial en la app. En codelabs anteriores, aprendiste técnicas para abordar estos problemas:

  • ¿La app pierde su estado cuando el usuario rota su dispositivo?
  • ¿Qué sucede cuando el usuario abre la app? ¿El usuario ve un ícono giratorio de carga o los datos están listos en una caché sin conexión?
  • ¿La aplicación está codificada de una forma eficiente y garantiza que la aplicación esté siempre atenta al usuario?
  • ¿La app interactúa con los sistemas de backend de un modo que nunca presenta datos extraños, incorrectos o inactivos que se presentan al usuario?

A medida que trabajas en apps para un público más amplio, es fundamental que tus apps sean accesibles para tantos tipos de usuarios como sea posible. Por ejemplo:

  • Muchos usuarios interactúan con los sistemas informáticos de diferentes maneras. Muchos usuarios son daltónicos y es posible que los colores contrasten para otro. Muchos usuarios tienen discapacidades visuales, ya que necesitan usar lentes de lectura hasta el ceguero.
  • Algunos usuarios no pueden usar pantallas táctiles e interactúan con otros dispositivos de entrada, como botones.

El diseño adecuado es la manera más importante de lograr que los usuarios utilicen tu app.

Estos codelabs son demasiado cortos para enseñarte todo sobre el diseño para Android, pero te permitirán comenzar en una buena dirección y podrás seguir aprendiendo y desarrollando 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 que pasan datos
  • Cómo usar vistas y grupos de vistas para diseñar una interfaz de usuario (IU), como RecyclerView
  • Cómo usar componentes de arquitectura, incluido ViewModel, con la arquitectura recomendada a fin de crear una app eficiente y bien estructurada
  • Vinculación de datos, corrutinas y cómo procesar clics
  • Cómo conectarse a Internet y almacenar datos en caché de forma local con una base de datos Room
  • Cómo configurar las propiedades de las vistas
  • Cómo extraer y usar recursos de archivos de recursos XML

Qué aprenderás

  • Conceptos básicos sobre el sistema de estilos de Android
  • Cómo usar atributos, estilos y temas para personalizar la app

Actividades

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

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

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

La tercera pantalla es un buscador de GDG. GDG, o Google Developer Groups, son comunidades de desarrolladores que se enfocan en las tecnologías de Google, incluido Android. En los GDG de todo el mundo, se realizan reuniones, conferencias, eventos de estudio 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 en sus eventos. Los eventos de GDG son una forma excelente de conocer a otros desarrolladores de Android y de conocer las prácticas recomendadas de la industria que no encajaron en este curso.

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

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

Atributos de vista

  • Usa los atributos de vista a fin de configurar explícitamente atributos para cada vista. (Los atributos de vista no se pueden reutilizar, ya que los estilos sí lo son).
  • Puedes usar todas las propiedades que se pueden configurar mediante estilos o temas.

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

Estilos

  • Usa un estilo para crear una colección de información sobre estilo reutilizable, como el tamaño de la fuente o los colores.
  • Ideal para declarar pequeños conjuntos de diseños comunes usados en toda tu app.

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

Estilo predeterminado

  • Este es el estilo predeterminado que proporciona el sistema Android.

Temas

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

TextAppearance

  • Para aplicar estilos solo con atributos de texto, como fontFamily

Cuando Android modifica el estilo de una vista, aplica una combinación de temas, estilos y atributos que puedes personalizar. Los atributos siempre reemplazan cualquier cosa especificada en un estilo o tema. Además, los estilos siempre reemplazan todo lo que se especifica en un tema.

Las siguientes capturas de pantalla muestran la app de GDG-finder con tema claro (izquierda) y oscuro (derecha), además de tamaños de fuente y 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 darle estilo a los encabezados del texto del diseño de la app.

  1. Descarga y ejecuta la app de inicio de GDG-finder.
  2. Ten en cuenta 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. Observa que, para cada vista, los atributos de restricción y diseño de márgenes se configuran en la vista, ya que estos atributos tienden a 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.

    Te recordamos que sp significa píxeles independientes de la escala, que se ajustan mediante la densidad de píxeles y la preferencia de tamaño de fuente que el usuario establece en la configuración del dispositivo. Android determina el tamaño del texto que aparecerá en pantalla cuando lo dibuje. Usa siempre 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 mediante la configuración de 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 del lado derecho del editor de diseño. En la vista previa, verifica que el título sea gris y más grande que antes, como se muestra a continuación.

  1. Cambia el estilo del 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 vas a cambiar).
<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

  1. En este codelab, el objetivo es que el estilo de la app sea un poco divertido, pero que tenga una apariencia profesional, pero puedes darle el estilo que quieras. Prueba los siguientes atributos para la vista de texto subtitle. Usa la pestaña Vista previa para ver cómo cambia la apariencia de la app. Luego, quite 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 la app. Debería verse mejor.

Cuando usas fuentes con tu app, puedes enviar los archivos de fuente necesarios como parte del APK. Si bien es simple, no se recomienda, ya que hace que tu app tarde más en descargarse e instalarse.

Android permite que las apps descarguen fuentes en el tiempo de ejecución mediante la API de Fuentes para descargar. Si tu app usa la misma fuente que otra del dispositivo, Android solo descargará la fuente una vez, lo que ahorrará espacio de almacenamiento.

En esta tarea, usarás fuentes descargables para establecer la fuente de cada vista en 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 puedes 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 Resources, busca lobster o solo lo.
  2. En los resultados, selecciona Langosta dos.
  3. A la derecha, debajo del nombre de la fuente, selecciona el botón de selección Crear fuente descargable. 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 configurados en "preloaded_fonts". Esta etiqueta les indica a los Servicios de Google Play que esta app quiere usar fuentes descargadas. Cuando tu app se ejecuta y solicita la fuente Lobster Two, el proveedor de fuentes descarga la fuente de Internet, si la fuente 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 de esta app.
  2. Del mismo modo, el archivo res/fonts/lobster_two.xml tiene información sobre la fuente.
  3. Abre home_fragment.xml y observa en el código y la vista previa que la fuente de Lobster Dos se aplique al elemento 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 como se muestra a continuación. Para aplicar la nueva fuente de Langosta dos a todo el texto, deberás actualizar este tema.
  2. En la etiqueta <style>, observa el atributo parent. Todas las etiquetas de estilo pueden especificar una superior y heredar todos los atributos de nivel superior. El código especifica el objeto 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 quieras. 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, establece la familia de fuentes en lobster_two. Debes configurar android:fontFamily y fontFamily, ya que el tema superior usa ambos. Puedes verificar home_fragment.xml en la pestaña Design para obtener una vista previa de tus 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 desplázate hasta 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 de app.
<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"
  1. Ejecuta la app y verás que el atributo local de 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 primarios. Los atributos son ideales para aplicar estilos a una vista específica y agregar información de diseño, como márgenes, padding y restricciones, que suelen ser específicos de cada pantalla.

En el medio de la pirámide de jerarquía de estilos, se encuentran los estilos. Los estilos son grupos de atributos reutilizables 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 estilo

  1. Abre res/values/styles.xml.
  2. Dentro de la etiqueta <resources>, define un nuevo estilo 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 estilo como semánticos cuando los nombres. Selecciona un nombre de estilo para el que se usará el estilo, no según las propiedades que lo afectan. Por ejemplo, llama a este estilo Title, no a LargeFontInGrey. Cualquier título de tu app usará este estilo. Como regla general, los estilos de TextAppearance se llaman TextAppearance.Name, por lo que en este caso el nombre es TextAppearance.Title.

Al igual que un tema, el estilo puede tener este último. Sin embargo, esta vez, en lugar de extender un tema, el estilo amplía 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 estilo, 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. Definir otro estilo para los subtítulos Asígnale el nombre TextAppearance.Subtitle.
  2. Dado que la única diferencia con TextAppearance.Title estará en el tamaño del texto, haz de este estilo un elemento 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 el TextAppearance.Title estilo a la vista de texto title. Borra los atributos textSize y textColor.

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

Proyecto de Android Studio: GDGFinderStyles.
  • Usa temas, estilos y atributos en las vistas para cambiar su apariencia.
  • Los temas afectan el estilo de toda la app y vienen con muchos valores predeterminados para colores, fuentes y tamaños de fuentes.
  • Un atributo se aplica a la vista en la que se configuró el atributo. Usa atributos si tienes un estilo que se aplica solo a una vista, como relleno, 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, los botones o las vistas de texto.
  • Los temas y los estilos se heredan de su tema o estilo superior. Puede crear una jerarquía de estilos.
  • Los valores de atributos (que se establecen en las vistas) anulan los estilos. Los estilos anulan el predeterminado. Los estilos anulan los temas. Los temas anulan cualquier estilo 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 permite que las fuentes estén disponibles para los usuarios sin aumentar el tamaño de tu APK. Si deseas agregar una fuente descargable para una vista, sigue estos pasos:

  1. Selecciona la vista en la pestaña Design y elige More sources en el menú desplegable del atributo fontFamily.
  2. En el diálogo Resources, busca una fuente y selecciona el botón de selección Create Download font.
  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 la fuente 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 tareas para los alumnos que trabajan con este codelab como parte de un curso que dicta un instructor. Depende del instructor hacer lo siguiente:

  • Si es necesario, asigna la tarea.
  • Informa a los alumnos cómo enviar los deberes.
  • Califica las tareas.

Los instructores pueden usar estas sugerencias lo poco o lo que quieran, y deben asignar cualquier otra tarea que consideren apropiada.

Si estás trabajando en este codelab por tu cuenta, usa estas tareas para poner a prueba tus conocimientos.

Responde estas preguntas

Pregunta 1

¿Qué etiqueta se usa para definir temas?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

Question 2

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

▢ Especifica las restricciones de una vista.

▢ Especifica el color de fondo de los encabezados.

▢ Unifica el tamaño de fuente en todas las vistas.

▢ Especifica el color de texto de un grupo de vistas.

Pregunta 3

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

▢ Los temas se aplican a toda la aplicación, mientras que usted puede aplicar estilos a 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, mientras que el desarrollador los define.

Pregunta 4

Si una TextView de tu app tiene una Theme que establece el tamaño de la fuente en 12sp, un estilo definido que la 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, atenuación y colores

Para ver vínculos a otros codelabs de este curso, consulta la página de destino de codelabs sobre aspectos básicos de Kotlin para Android.