Índice
Un estilo es una colección de propiedades que especifican que aspecto ha de tener un objeto View o una ventana. Con los estilos podemos definir propiedades como la altura, relleno, color del texto, fondo etc. Los estilos en Android comparten la filosofía de las hojas de estílo en cascada (CSS), permitiendo separar el diseño del contenido.
Como podemos comprobar con este ejemplo, el código queda mucho más límpio usando estilos:
Sin estilos:
<textview android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#00FF00"
android:typeface="monospace"
android:text="@string/hello" />
Con estilos:
<textview style="@style/CodeFont"
android:text="@string/hello" />
Definiendo estilos
Los estilos se definen en un fichero de recursos distinto al layout, colocado en el directorio /res/values. Éstos ficheros no tienen porqué tener un nombre en concreto, pero por convención se suelen llamar styles.xml ó themes.xml
El nodo raiz de estos archívos debe ser .
Para cada estilo que queramos definir, hay que añadir un elemento ***
y un atributo name para ese estílo (es obligatorio), después, añadiremos un elemento <item> para cada propiedad del estilo, que debe tener obligatoriamente el atributo name que declara la propiedad del estilo y su valor. Los valores para <item> pueden ser una palabra clave, valor hexadecimal, una referencia a un recurso u otro valor dependiendo de la propiedad del estilo. Veamos un ejemplo:
<style name="CodeFont" parent="@android:style/TextAppearance.Medium">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#00FF00</item>
<item name="android:typeface">monospace</item>
</style>
En tiempo de compilación, los elementos se convierten en un recurso que podremos referenciar posteriormente mediante el atributo name del estilo, como vimos en el primer ejemplo (@style/CodeFont).
El atributo parent es opcional y especifica el ID de otro estilo del cual queremos heredar sus propiedades, pudiendo así sobreescribirlas.
Herencia
Como acabamos de ver, el atributo parent sirve para heredar propiedades de otros estilos, podemos heredar tanto de estilos del sistema como de los nuestros propios:
Del sistema:
<style name="GreenText" parent="@android:style/TextAppearance">
<item name="android:textColor">#00FF00</item>
</style>
De nuestros propios estilos:
<style name="CodeFont.Red">
<item name="android:textColor">#FF0000</item>
</style>
<style name="CodeFont.Red.Big">
<item name="android:textSize">30sp</item>
</style>
En este caso, no usamos el atributo parent, ya que estamos usando un estilo propio, también se puede apreciar que podemos heredar cuantas veces queramos, como es el caso de (CodeFont.Red.Big)
Aplicar estilos y temas a la interfaz gráfica
Hay dos formas de aplicar estilos a la UI:
- A una View individual, añadiendo el atributo style a un elemento del layout.
- A una aplicación o actividad completa, mediante el atributo android:theme del elemento
<activity> o <application>en el Android manifest.
Como vimos al principio, para aplicar un estilo a una View concreta usamos style=”@style/NombreDelEstilo
Para aplicar un tema a una actividad o aplicación usaremos:
<application android:theme="@style/CustomTheme">
</application>
Para aplicarlos sobre actividades, usamos:
<activity android:theme="@android:style/Theme.Dialog"></activity>
<activity android:theme="@android:style/Theme.Translucent"></activity>
En este caso, estos temas ya vienen predefinidos, y se ven así, respectivamente:
A continuación, dejo una captura del ejemplo que he hecho para esta entrada, que se puede descargar desde:
Para saber más acerca de los estilos y temas visite la página oficial: Applying Styles and Themes
Siguiente Tema: Programación Android: Recursos - Introducción
¿Has visto algún error?: Por favor, ayúdame a corregirlo contactando conmigo o comentando abajo.