Estilos y temas

Posted by : Unknown domingo, 3 de agosto de 2014

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 serán visualizados. En el diseño web resulta 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[Tutorial] Estilos 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"?>

parent="@android:style/TextAppearance.Medium">

<item name="android:layout_width">match_parent</item>

<item name="android:layout_height">wrap_content</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 EstiloTexto.

3. Aplícalo al título que aparece en el Layout activity_ main.xml

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

5. Aplícalo a todos los botones 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ámetroandroid:theme en la etiqueta application:

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

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