Estilos y temas

Un estilo es una colección de propiedades que especifican la apariencia y el formato de una View o ventana. Un estilo puede especificar propiedades, como altura, relleno, color de fuente, tamaño de fuente, color de fondo y mucho más. Los estilos se definen en un recurso XML que está separado del XML que especifica el diseño.

En Android, los estilos comparten una filosofía similar a las hojas de estilo CSS del diseño web: permiten separar el diseño del contenido.

Por ejemplo, si usas un estilo, puedes tomar el siguiente XML de diseño:

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="@string/hello" />

Y convertirlo en esto:

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />

Todos los atributos relacionados con el estilo se quitaron del XML de diseño y se colocaron en una definición de estilo llamada CodeFont, que luego se usa con el atributo style. En la siguiente sección, podrás ver la definición para este estilo.

Un tema es un estilo que se aplica a toda una Activity o aplicación, y no a una View individual (como en el ejemplo anterior). Cuando un estilo se usa como un tema, cada vista de la actividad o aplicación usará todas las propiedades de estilo que admite. En una actividad, por ejemplo, puedes aplicar el mismo estilo de CodeFont como una tema y todo el texto de la actividad tendrá una fuente verde monospace.

Definición de estilos

Para crear un conjunto de estilos, guarda un archivo XML en el directoriores/values/ de tu proyecto. El nombre del archivo XML es arbitrario, pero debe llevar la extensión .xml y se debe guardar en la carpeta res/values/.

El nodo raíz del archivo XML debe ser <resources>.

Para cada estilo que desees crear, agrega un elemento <style> al archivo con un name que identifique exclusivamente al estilo (este atributo es obligatorio). Luego agrega un elemento <item> para cada propiedad del estilo con un name que declare la propiedad del estilo y un valor asociado (este atributo es obligatorio). El valor de <item> puede ser una string de palabra clave, un color hexadecimal, una referencia a otro tipo de recurso u otro valor según la propiedad del estilo. A continuación, se muestra un archivo de ejemplo con un solo estilo:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <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>
</resources>

Durante la compilación, cada componente secundario del elemento <resources> se convierte en un objeto de recurso para aplicaciones y el valor del atributo name en el elemento <style> puede hacer referencia a este componente. Un diseño XML puede hacer referencia a este estilo de ejemplo como @style/CodeFont (como se demostró en la introducción anterior).

El atributo parent del elemento <style> es opcional y especifica el ID de recurso de otro estilo que proporciona propiedades heredables al estilo actual. Si lo deseas, puedes anular las propiedades de estilo heredadas.

Recuerda que un estilo que desees usar como tema de una actividad o aplicación se define en XML de la misma forma en que se define un estilo para un objeto View. Un estilo, como el que se definió antes, se puede usar como un estilo para una vista individual, o como un tema para actividades o aplicaciones completas. Posteriormente, se describirá la manera de usar un estilo en una vista individual o en el tema de una aplicación.

Herencia

El atributo parent del elemento <style> te permite especificar un estilo que proporcionará propiedades heredables a tu estilo. Puedes usarlo para heredar propiedades de un estilo existente y, posteriormente, definir solo las propiedades que desees cambiar o agregar. Puedes heredar propiedades de estilos propios o incorporados a la plataforma (consulta Uso de estilos y temas de la plataforma más adelante para obtener información sobre cómo heredar estilos definidos en la plataforma Android). Por ejemplo, puedes heredar la apariencia predeterminada del texto que ofrece la plataforma Android y luego modificarla:

    <style name="GreenText" parent="@android:style/TextAppearance">
        <item name="android:textColor">#00FF00</item>
    </style>

Si deseas heredar estilos propios, no debes usar el atributo parent. En su lugar, solo debes indicar el nombre del estilo que desees heredar como prefijo del nombre del estilo nuevo (separados por un punto). Por ejemplo, para crear un estilo nuevo que hereda el estilo CodeFont definido anteriormente, pero cambiar el color a rojo, puedes especificar el estilo nuevo de la siguiente forma:

    <style name="CodeFont.Red">
        <item name="android:textColor">#FF0000</item>
    </style>

Observa que no hay ningún atributo parent en la etiqueta <style>. Sin embargo, como el atributo name comienza con el nombre de estilo CodeFont (un estilo que creaste tú mismo), el estilo hereda todas las propiedades de estilo de CodeFont. Después, este estilo anula la propiedad android:textColor para que el color sea rojo. Puedes hacer referencia a este estilo nuevo como @style/CodeFont.Red.

Si encadenas nombres con puntos, puedes continuar heredando de esta forma tantas veces como lo desees. Por ejemplo, puedes ampliar CodeFont.Red para que sea más grande:

    <style name="CodeFont.Red.Big">
        <item name="android:textSize">30sp</item>
    </style>

Primero, se heredan los estilos CodeFont y CodeFont.Red. A continuación, se agrega la propiedad android:textSize.

Nota: Esta técnica de heredar mediante el encadenamiento de nombres funciona para estilos definidos con tus propios recursos. No puedes heredar estilos incorporados en Android con este método. Para hacer referencia a un estilo incorporado, como TextAppearance, debes usar el atributo parent.

Propiedades de los estilos

Ahora que ya sabes definir un estilo, debes conocer los tipos de propiedades de estilo (definidos por el elemento <item>) que están disponibles. Probablemente, ya conozcas algunos, como layout_width y textColor. Sin lugar a dudas, hay muchas otras propiedades de estilo que puedes usar.

El mejor lugar donde puedes encontrar propiedades que sirvan para una View específica, es la referencia de clase correspondiente, que enumera todos los atributos XML admitidos. Por ejemplo, todos los atributos enumerados en la tabla de atributos XML de TextView se pueden usar en una definición de estilo para un elemento TextView (o una de sus subclases). Uno de los atributos que aparecen en la referencia es android:inputType. Normalmente, colocarías el atributo android:inputType en un elemento <EditText>, como se describe a continuación:

<EditText
    android:inputType="number"
    ... />

En su lugar, puedes crear un estilo para el elemento EditText que incluya esta propiedad:

<style name="Numbers">
  <item name="android:inputType">number</item>
  ...
</style>

Por lo tanto, el XML del diseño ahora puede implementar este estilo:

<EditText
    style="@style/Numbers"
    ... />

Tal vez parezca que este ejemplo simple requiere más trabajo, pero cuando agregas más propiedades de estilo y tienes en cuenta la capacidad de reutilizarlo en varios espacios, los beneficios pueden ser enormes.

Para conocer todas las propiedades de estilo disponibles, consulta la referencia R.attr. Ten en cuenta que no todos los objetos de vista aceptan los mismos atributos de estilo. En consecuencia, se recomienda consultar frecuentemente la clase View específica para conocer las propiedades de estilo admitidas. Sin embargo, si aplicas un estilo a una vista que no admita todas las propiedades del estilo, la vista aplicará solo aquellas propiedades que sean compatibles y simplemente ignorará las demás.

No obstante, algunas propiedades de estilo no son compatibles con ningún elemento de vista y solo se pueden usar como temas. Estas propiedades de estilo se aplican a toda la ventana y no a tipos de vista. Por ejemplo, las propiedades de estilo para un tema pueden ocultar el título de la aplicación, pueden ocultar la barra de estado o pueden cambiar el fondo de la ventana. Estos tipos de propiedades de estilo no pertenecen a ningún objeto View. Si deseas conocer estas propiedades específicas para temas, consulta la referencia R.attr y busca atributos que comiencen con window. Por ejemplo, windowNoTitle y windowBackground son propiedades de estilo que solo sirven cuando este se aplica como tema en una actividad o aplicación. Consulta la siguiente sección para obtener información sobre cómo aplicar un estilo como tema.

Nota: No olvides prefijar los nombres de las propiedades de cada elemento <item> con el espacio de nombres android:. Por ejemplo: <item name="android:inputType">.

Aplicación de los estilos y temas a la IU

Hay dos formas de establecer un estilo:

• En una vista individual: se agrega el atributo style a un elemento de vista en el XML de tu diseño.
• A una actividad o aplicación completa: se agrega el atributo android:theme al elemento <activity> o <application> en el manifiesto de Android.

Cuando aplicas un estilo a una View individual del diseño, las propiedades definidas por el estilo solo se aplican a dicha View. Si se aplica un estilo a un ViewGroup, los elementos View secundarios no heredarán las propiedades del estilo (solo usará las propiedades el elemento al que apliques directamente el estilo). Sin embargo, puedes aplicar un estilo para que sirva en todos los elementos View (si aplicas el estilo como tema).

Para aplicar una definición de estilo como tema, debes aplicar el estilo en una Activity o aplicación en el manifiesto de Android. Cuando lo hagas, cada View de la actividad o aplicación usará las propiedades que admita. Por ejemplo, si aplicas el estilo CodeFont de los ejemplos anteriores a una actividad, todos los elementos View que admitan las propiedades del estilo de texto usarán dichas propiedades. Las vistas ignorarán las propiedades que no admitan. Si una vista admite solo algunas propiedades, únicamente aplicará esas.

Aplicación de un estilo a una vista

Así se establece un estilo para una vista en el diseño de XML:

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />

Ahora, este TextView adoptará el estilo definido en el estilo CodeFont (consulta el ejemplo anterior, en la sección Definición de estilos).

Nota: El atributo style no usa el prefijo del espacio de nombres android:.

Uso de un tema en una actividad o aplicación

Si deseas establecer un tema para todas las actividades de tu aplicación, abre el archivo AndroidManifest.xml y edita la etiqueta <application> para que incluya el atributo android:theme con el nombre del estilo. Por ejemplo:

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

En cambio, si deseas usar un tema en una sola actividad de tu aplicación, agrega el atributo android:theme a la etiqueta <activity>.

Así como Android proporciona otros recursos incorporados, existen varios temas predefinidos que puedes usar para evitar tener que escribirlos tú mismo. Por ejemplo, puedes usar el tema Dialog para que tu actividad tenga la apariencia de un cuadro de diálogo:

<activity android:theme="@android:style/Theme.Dialog">

Si deseas que el fondo sea transparente, usa el tema Translucent:

<activity android:theme="@android:style/Theme.Translucent">

Si te gusta un tema, pero deseas modificarlo un poco, solo debes agregar el tema como parent de tu tema personalizado. Por ejemplo, puedes modificar el tema Light tradicional para usar tu propio color, como se muestra a continuación:

<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="android:Theme.Light">
    <item name="android:windowBackground">@color/custom_theme_color</item>
    <item name="android:colorBackground">@color/custom_theme_color</item>
</style>

Ten en cuenta que aquí el color se debe proporcionar como un recurso separado porque el atributo android:windowBackground solo admite una referencia a otro recurso; a diferencia de android:colorBackground, no puede recibir un literal de color.

Ahora usa CustomTheme en lugar de Theme.Light en el manifiesto de Android:

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

Selección de un tema según la versión de la plataforma

Las versiones más nuevas de Android cuentan con temas adicionales para aplicaciones. Además, puedes usar estos temas en dichas plataformas sin perder la compatibilidad con versiones anteriores. Puedes hacerlo a través de un tema personalizado que use la selección de recursos para alternar distintos temas principales, según la versión de la plataforma.

Por ejemplo, a continuación se muestra la declaración de un tema personalizado (solo se trata del tema Light predeterminado de las plataformas estándares). Se dispone en res/values de un archivo XML (por lo general, res/values/styles.xml):

<style name="LightThemeSelector" parent="android:Theme.Light">
    ...
</style>

Para que este tema use el nuevo tema holográfico cuando la aplicación se ejecute en Android 3.0 (nivel de API 11) o superior, puedes disponer una declaración alternativa para el tema en res/values-v11 de un archivo XML, pero el tema principal debe ser el tema holográfico:

<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
    ...
</style>

Usa este tema como cualquier otro; tu aplicación realizará automáticamente un cambio al tema holográfico en el caso de Android 3.0 o versiones posteriores.

En R.styleable.Theme, encontrarás una lista de los atributos estándares que puedes usar en los temas.

Para obtener más información sobre cómo proporcionar recursos alternativos, como temas y diseños según la versión de la plataforma u otra configuración del dispositivo, consulta el documento Provisión de recursos.

Uso de estilos y temas de la plataforma

La plataforma Android ofrece una amplia colección de estilos y temas que puedes usar en tus aplicaciones. Puedes encontrar una referencia de todos los estilos disponibles en la clase R.style. Para usar los estilos descritos allí, reemplaza todos los guiones bajos por un punto en el nombre del estilo. Por ejemplo, puedes aplicar el tema Theme_NoTitleBar con "@android:style/Theme.NoTitleBar".

Sin embargo, la referencia de R.style no está bien documentada y no describe los estilos en detalle. Por lo tanto, si consultas el código fuente de estos estilos y temas, entenderás mejor las propiedades de estilo que proporciona cada uno de ellos. Para obtener una mejor referencia de los estilos y temas de Android, consulta el siguiente código fuente:

• Estilos de Android (styles.xml)
• Temas de Android (themes.xml)

Estos archivos te permitirán aprender por medio de ejemplos. Por ejemplo, en el código fuente de los temas de Android, encontrarás una declaración para <style name="Theme.Dialog">. En esta definición, podrás ver todas las propiedades que se usan para aplicar estilos a diálogos del framework de Android.

Para obtener más información sobre la sintaxis de estilos y temas en XML, consulta el documento sobre recursos de estilos.

Si deseas obtener una referencia de los atributos de estilo que puedes usar para definir un estilo o tema (p. ej. “windowBackground” o “textAppearance”), consulta R.attr o la clase de vista respectiva para la cual crearás un estilo.