Estilos y temas

Si tienes experiencia con el diseño de páginas web, habrás advertido grandes similitudes entre HTML y el diseño de layouts. En los dos casos se utiliza un lenguaje de marcado y se trata de crear diseños independientes del tamaño de la pantalla donde se visualizarán. En el diseño web resultan clave las hojas de estilo en cascada (CSS), que permiten crear un patrón de diseño y aplicarlo a varias páginas. Cuando diseñes los layouts de tu aplicación, vas a poder utilizar unas herramientas similares conocidas como estilos y temas. Te permitirán crear patrones de estilo que podrán ser utilizados en cualquier parte de la aplicación. Estas herramientas te ahorrarán mucho trabajo y te permitirán conseguir un diseño homogéneo en toda tu aplicación.

  video[TutorialEstilos y Temas en Android

Los estilos

Un estilo es una colección de propiedades que definen el formato y apariencia que tendrá una vista. Podemos especificar cosas como tamaño, márgenes, color, fuentes, etc. Un estilo se define en ficheros XML,  diferente al fichero XML Layout que lo utiliza.

Veamos un ejemplo. El siguiente código:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="Un texto" />

Es equivalente a escribir:

<TextView
    style="@style/MiEstilo"
    android:text="Un texto" />

Habiendo creado en el fichero res/values/styles.xml con el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="MiEstilo"
     parent="@android:style/TextAppearance.Medium">
       <item name="android:layout_width">match_parent</item>
       <item name="android:layout_height">wrap_content</item>
       <item name="android:textColor">#00FF00</item>
       <item name="android:typeface">monospace</item>
   </style>
</resources>

Observa como un estilo puede heredar todas las propiedades de un padre (parámetro parent)y a partir de estas propiedades realizar modificaciones.

Heredar de un estilo propio

Si vas a heredar de un estilo definido por ti no es necesario utilizar el atributo parent  Por el contrario, puedes utilizar el mismo nombre de un estilo ya creado y completar el nombre con un punto más un sufijo.Por ejemplo:

<style name="MiEstilo.grande">
     <item name="android:textSize">18pt</item>
</style>

Crearía un nuevo estilo que sería igual a MiEstilo más la nueva propiedad indicada. A su vez puedes definir otro estilo a partir de este:

<style name="MiEstilo.grande.negrita">
     <item name="android:textStyle">bold</item>
</style>

Práctica: Creando un estilo 

1. Abre el proyecto Asteroides o Mis Lugares (dependiendo del curso).

2. Crea un nuevo estilo con nombre EstiloBoton. Para ver las propiedades que puedes modificar te recomendamos que consultes la "Referencia de la clase View". Para un botón puedes definir los atributos de View, TextView y Button. Otra alternativa consiste en seleccionar un botón en el editor visual de vistas y en la ventana Properties buscar las propiedades disponibles:

3. Aplícalo al primer botón del layout.

4. Crea un nuevo estilo con nombre EstiloBoton.Alternativo. Este ha de modificar alguno de los atributos anteriores y añadir otros, como padding.

5. Aplícalo al segundo botón del Layout.

6. Visualiza el resultado.

Los temas

Un tema es un estilo aplicado a toda una actividad o aplicación, en lugar de a una vista individual. Cada elemento del estilo solo se aplicará a aquellos elementos donde sea posible. Por ejemplo, CodeFont solo afectará al texto.

Para aplicar un tema a toda una aplicación edita el fichero AndroidManifest.xml y añade el parámetro android:theme en la etiqueta <application>:

<application android:theme="@style/MiTema">

También puedes aplicar un tema a una actividad en concreto:

<activity android:theme="@style/MiTema">

Además de crear tus propios temas vas a poder utilizar algunos disponibles en el sistema. Puedes encontrar una lista de todos los estilos y temas disponibles en Android en:http://developer.android.com/reference/android/R.style.html

Ejercicio paso a paso: Aplicando un tema del sistema

1. Abre el proyecto Mis Lugares

2. Aplica a la actividad principal el tema @style/Theme.AppCompat.Dialog tal y como se acaba de mostrar.

3. Visualiza el resultado. Este tema es utilizado en cuadros de dialogo. No parece muy adecuado para nuestra actividad.

4. Deshaz el cambio realizado en este ejercicio.

Práctica: Modificando el tema  por defecto de la aplicación

1.    Abre el proyecto Asteroides o Mis Lugares.

2.    Abre el fichero res/values/styles.xml (recurso por defecto).

3.    Observa como se define el estilo AppTheme que será usado como estilo por defecto en la aplicación. Hereda de Theme.AppCompat.Light.DarkActionBar y solo define los colores principales usados en la apliación. Añade las líneas subrayadas para persolalizar un par de aspectos:

  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="android:typeface">serif</item>
    <item name="android:textColor">#0000FF</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

4.    Ejecuta la aplicación para visualizar el resultado.

5.    Modifica otros atrivutos y comprueba el resultado.

Preguntas de repaso: Estilos y temas