Los estilos y los temas en Android te permiten separar los detalles del diseño de tu app de la IU estructura y comportamiento similares a las hojas de estilo en el diseño web.
Un estilo es una colección de atributos que especifica la apariencia de una sola
View
Un estilo puede especificar atributos
como el color y el tamaño de fuente, el color de fondo y mucho más.
Un tema es una colección de atributos que se aplican a toda una app, actividad o vista jerarquía, no solo en una vista individual. Cuando aplicas un tema, cada vista de la app o la actividad aplica cada uno de los atributos del tema que admite. Los temas también pueden aplicar estilos a elementos que no son vistas, como la barra de estado y el fondo de la ventana.
Los estilos y los temas se declaran en un
archivo de recursos de estilo en
res/values/
, generalmente con el nombre styles.xml
.
![](https://developer.android.com/static/training/material/images/material-themes_2x.png?authuser=9&hl=es)
Figura 1: Dos temas aplicados a la misma actividad:
Theme.AppCompat
(izquierda) y Theme.AppCompat.Light
(derecha).
Temas versus estilos
Los temas y los estilos tienen muchas similitudes, pero se usan para diferentes propósitos. Los temas y estilos tienen la misma estructura básica, un par clave-valor que asigna los atributos a recursos.
Un estilo especifica atributos para un tipo de vista determinado. Por ejemplo, un estilo podría especificar los atributos de un botón. Cada atributo que especificas en un estilo es un atributo que puedes definir el archivo de diseño. La extracción de todos los atributos de un estilo facilita su uso y mantenimiento en varios widgets.
Un tema define una colección de recursos con nombre a los que pueden hacer referencia los estilos, los diseños,
widgets, etcétera. Los temas asignan nombres semánticos, como colorPrimary
, a Android.
de Google Cloud.
Los estilos y los temas se diseñaron para trabajar en conjunto. Por ejemplo, puedes tener un estilo que especifique
que una parte de un botón es colorPrimary
y otra parte
colorSecondary
Las definiciones reales de esos colores se proporcionan en el tema. Cuándo
el dispositivo entra en modo nocturno, tu aplicación puede pasar de su "luz" tema a su "oscuro" tema,
cambiar los valores de todos esos nombres de recursos. No es necesario cambiar los estilos, ya que
los estilos usan los nombres semánticos y no definiciones de colores específicas.
Para obtener más información sobre cómo los temas y los estilos funcionan juntos, consulta la entrada de blog Diseños de Android: temas versus estilos.
Cómo crear y aplicar un estilo
Para crear un diseño nuevo, abre el archivo res/values/styles.xml
de tu proyecto. Para
para cada diseño que quieras crear, sigue estos pasos:
- Agrega un elemento
<style>
con un nombre que identifique el estilo de forma exclusiva. - Agrega un elemento
<item>
para cada atributo de estilo que quieras definir. Elname
en cada elemento especifica un atributo que usarías de otro modo como un atributo XML en tu . El valor del elemento<item>
es el valor de ese atributo.
Por ejemplo, supongamos que defines el siguiente estilo:
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="GreenText" parent="TextAppearance.AppCompat"> <item name="android:textColor">#00FF00</item> </style> </resources>
Puedes aplicar el estilo a una vista de la siguiente manera:
<TextView style="@style/GreenText" ... />
Cada atributo especificado en el estilo se aplica a esa vista si esta lo acepta. La vista ignora los atributos que no acepta.
Sin embargo, en lugar de aplicar un estilo a vistas individuales, por lo general, aplicar estilos como tema para toda tu app, actividad o colección de como se describe en otra sección de esta guía.
Cómo extender y personalizar un estilo
Cuando crees tus propios estilos, siempre extiende un estilo existente del framework o del soporte
para mantener la compatibilidad con los estilos de IU de la plataforma. Para extender un estilo, especifica
estilo que deseas extender con el atributo parent
. Luego, puedes anular la configuración
atributos de estilo y agregar nuevos.
Por ejemplo, puedes heredar la apariencia de texto predeterminada de la plataforma de Android y modificarla como sigue:
<style name="GreenText" parent="@android:style/TextAppearance"> <item name="android:textColor">#00FF00</item> </style>
Sin embargo, siempre debes heredar los estilos de tu app principal de la biblioteca de compatibilidad de Android. Los estilos de la
La biblioteca de compatibilidad ofrece compatibilidad optimizando cada estilo para los atributos de IU disponibles en
cada versión. Los estilos de la biblioteca de compatibilidad a menudo tienen un nombre similar al estilo de la plataforma,
pero con AppCompat
incluido.
Para heredar estilos de una biblioteca o de tu propio proyecto, declara el nombre del estilo superior
sin la parte @android:style/
que se muestra en el ejemplo anterior. Por ejemplo:
En el siguiente ejemplo, se heredan estilos de apariencia de texto de la biblioteca de compatibilidad:
<style name="GreenText" parent="TextAppearance.AppCompat"> <item name="android:textColor">#00FF00</item> </style>
También puedes heredar estilos, excepto los de la plataforma, extendiendo la extensión de un estilo
nombre con una notación de puntos, en lugar de usar el atributo parent
Es decir, prefija el
con el nombre del estilo que deseas heredar, separados por un punto. Tú
generalmente solo haces esto cuando extiendes tus propios estilos, no los estilos de otras bibliotecas. Por ejemplo:
El siguiente estilo hereda todos los estilos de GreenText
del ejemplo anterior.
y, luego, aumenta el tamaño del texto:
<style name="GreenText.Large"> <item name="android:textSize">22dp</item> </style>
Puedes seguir heredando estilos como este tantas veces como quieras encadenando más y nombres de usuario.
Para saber qué atributos puedes declarar con una etiqueta <item>
, consulta el archivo
atributos" en las diferentes referencias de clase. Compatibilidad con todas las vistas
Atributos XML de la base
View
y muchas vistas agregan sus propios atributos especiales. Por ejemplo, el
Atributos XML de TextView
incluyen el
android:inputType
que puedes aplicar a una vista de texto que recibe entradas, como un
Widget EditText
.
Cómo aplicar un estilo como un tema
Puedes crear un tema de la misma manera en que creas estilos. La diferencia es cómo lo aplicas:
en lugar de aplicar un estilo con el atributo style
en una vista, aplicas un tema con
el atributo android:theme
en la etiqueta <application>
o en un
<activity>
en el archivo AndroidManifest.xml
.
Por ejemplo, aquí se muestra cómo aplicar el Material Design "oscuro" de la biblioteca de compatibilidad de Android tema a toda la aplicación:
<manifest ... > <application android:theme="@style/Theme.AppCompat" ... > </application> </manifest>
Aquí se muestra cómo aplicar el tema "claro" a una sola actividad:
<manifest ... > <application ... > <activity android:theme="@style/Theme.AppCompat.Light" ... > </activity> </application> </manifest>
Cada vista de la app o actividad aplica los estilos que admite de los definidos en la un tema determinado. Si una vista solo admite algunos de los atributos declarados en el estilo, se aplicará solo esos atributos e ignora los que no admite.
A partir de Android 5.0 (nivel de API 21) y la biblioteca de compatibilidad de Android v22.1, también puedes especificar
el atributo android:theme
a una vista del archivo de diseño. Esto modifica el tema de
esa vista y cualquier vista secundaria, lo que es útil para modificar las paletas de colores de los temas de una
parte de la interfaz.
Los ejemplos anteriores muestran cómo aplicar un tema como Theme.AppCompat
que es
que proporciona la biblioteca de compatibilidad de Android. Sin embargo, es preferible personalizar el tema para que se ajuste
la marca de tu app. La mejor manera de hacerlo es extender estos estilos de la biblioteca de compatibilidad y
anular algunos de los atributos, como se describe en la siguiente sección.
Jerarquía de estilos
Android ofrece una variedad de maneras de establecer atributos en tu app para Android. Por ejemplo: puedes establecer atributos directamente en un diseño, aplicar un estilo a una vista, aplicar un tema a un diseño incluso establecer atributos de forma programática.
Cuando elijas cómo diseñar tu app, ten en cuenta la jerarquía de estilos de Android. En general, usa temas y estilos en la medida de lo posible para mantener la coherencia. Si especificas los mismos atributos en varios lugares, la siguiente lista determina qué atributos se aplican en última instancia. La lista es ordenados de mayor a menor prioridad.
- Aplicación de estilo a nivel de carácter o párrafo mediante intervalos de texto a derivadas de
TextView
. - Aplicación de atributos de manera programática.
- Aplicar atributos individuales directamente a una vista
- Aplicación de un estilo a una vista.
- Estilo predeterminado.
- Aplicar un tema a una colección de vistas, una actividad o toda tu app
- Aplicación de un estilo determinado específico de la vista, como la configuración de una
TextAppearance
en unTextView
.
![](https://developer.android.com/static/guide/topics/ui/images/text-multiple-styles.png?authuser=9&hl=es)
Figura 2: El estilo de un span
anula el de una textAppearance
TextAppearance
Una limitación es que puedes aplicar un solo estilo a un View
. En una
TextView
, sin embargo, también puedes especificar un
TextAppearance
atributo
que funcione de manera similar a un estilo, como se muestra en el siguiente ejemplo:
<TextView ... android:textAppearance="@android:style/TextAppearance.Material.Headline" android:text="This text is styled via textAppearance!" />
TextAppearance
te permite definir un estilo específico de texto y dejar el estilo de una
View
disponible para otros usos. Sin embargo, ten en cuenta que si defines algún atributo de texto
directamente en View
o en un estilo, esos valores anulan la
TextAppearance
valores.
TextAppearance
admite un subconjunto de atributos de estilo que TextView
para todas las plataformas de Google. Para ver la lista completa de atributos, consulta
TextAppearance
Algunos atributos TextView
comunes que no se incluyen son lineHeight[Multiplier|Extra]
, lines
, breakStrategy
y hyphenationFrequency
.
TextAppearance
funciona a nivel de caracteres y no a nivel del párrafo, por lo que
no se admiten los atributos que afectan a todo el diseño.
Personaliza el tema predeterminado
Cuando creas un proyecto con Android Studio, se aplica un tema de Material Design a tu app de la siguiente manera:
de forma predeterminada, como se define en el archivo styles.xml
de tu proyecto. Este estilo de AppTheme
extiende un tema de la biblioteca de compatibilidad e incluye anulaciones para los atributos de color que se usan.
por elementos clave de la IU, como la barra de la app y la
botón de acción flotante, si se utiliza. Entonces,
puedes personalizar rápidamente el diseño del color de tu app actualizando los colores proporcionados.
Por ejemplo, tu archivo styles.xml
es similar al siguiente:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
En realidad, los valores de estilo son referencias a otras
recursos de color, definidos en el
el archivo res/values/colors.xml
del proyecto. Ese es el archivo que editas para cambiar los colores.
Consulta la
Descripción general de los colores de Material Design
para mejorar la experiencia del usuario con colores dinámicos y colores personalizados adicionales.
Cuando conozcas tus colores, actualiza los valores en res/values/colors.xml
:
<?xml version="1.0" encoding="utf-8"?> <resources> <!-- Color for the app bar and other primary UI elements. --> <color name="colorPrimary">#3F51B5</color> <!-- A darker variant of the primary color, used for the status bar (on Android 5.0+) and contextual app bars. --> <color name="colorPrimaryDark">#303F9F</color> <!-- a secondary color for controls like checkboxes and text fields. --> <color name="colorAccent">#FF4081</color> </resources>
Luego, puedes anular cualquier otro estilo que desees. Por ejemplo, puedes cambiar la configuración fondo de pantalla de la siguiente manera:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> ... <item name="android:windowBackground">@color/activityBackground</item> </style>
Para ver una lista de atributos que puedes usar en tu tema, consulta la tabla de atributos en
R.styleable.Theme
Al agregar
estilos para las vistas de tu diseño, también puedes encontrar atributos mirando los "atributos XML"
en las referencias de clase de vista. Por ejemplo, todas las vistas admiten
Atributos XML de la base View
class.
La mayoría de los atributos se aplican a tipos específicos de vistas, mientras que algunos se aplican a todas las vistas. Sin embargo,
algunos atributos de tema enumerados en
R.styleable.Theme
se aplican a la
la ventana de actividad, no las vistas del diseño. Por ejemplo, windowBackground
cambia la
el fondo de la ventana, y windowEnterTransition
define una animación de transición para usar cuando
se inicia la actividad. Para obtener más información, consulta Inicio
una actividad con una animación.
La biblioteca de compatibilidad de Android también proporciona otros atributos que puedes usar para personalizar tu tema.
extendido de Theme.AppCompat
, como el atributo colorPrimary
que se muestra en
en el ejemplo anterior. Estos se ven mejor en el
archivo attrs.xml
de la biblioteca.
También hay diferentes temas disponibles en la biblioteca de compatibilidad que quizás quieras ampliar
en lugar de los que se muestran en el ejemplo anterior. El mejor lugar para ver los temas disponibles es
el
archivo themes.xml
de la biblioteca.
Cómo agregar estilos específicos de una versión
Si una nueva versión de Android agrega atributos de tema que deseas usar, puedes agregarlos a tu tema.
sin perder la compatibilidad
con versiones anteriores. Solo necesitas otro archivo styles.xml
guardado en un directorio values
que incluye la
versión del recurso
calificador:
res/values/styles.xml # themes for all versions res/values-v21/styles.xml # themes for API level 21+ only
Debido a que los estilos del archivo values/styles.xml
están disponibles para todas las versiones,
tus temas en values-v21/styles.xml
pueden heredarlos. Esto significa que puedes evitar
Duplicar estilos comenzando con una “base” tema y, luego, extenderlo a la versión específica
estilos.
Por ejemplo, para declarar transiciones de ventana para Android 5.0 (nivel de API 21) y versiones posteriores, debes
para usar atributos nuevos. Por lo tanto, tu tema base en res/values/styles.xml
puede verse de la siguiente manera:
esto:
<resources> <!-- Base set of styles that apply to all versions. --> <style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/primaryColor</item> <item name="colorPrimaryDark">@color/primaryTextColor</item> <item name="colorAccent">@color/secondaryColor</item> </style> <!-- Declare the theme name that's actually applied in the manifest file. --> <style name="AppTheme" parent="BaseAppTheme" /> </resources>
Luego, agrega los diseños específicos de la versión en res/values-v21/styles.xml
, de la siguiente manera:
<resources> <!-- extend the base theme to add styles available only with API level 21+ --> <style name="AppTheme" parent="BaseAppTheme"> <item name="android:windowActivityTransitions">true</item> <item name="android:windowEnterTransition">@android:transition/slide_right</item> <item name="android:windowExitTransition">@android:transition/slide_left</item> </style> </resources>
Ahora, puedes aplicar AppTheme
en tu archivo de manifiesto, y el sistema selecciona los estilos
disponibles para cada versión del sistema.
Si quieres obtener más información sobre el uso de recursos alternativos para diferentes dispositivos, consulta Proporcionar recursos alternativos
Cómo personalizar estilos de widget
Cada widget del framework y de la biblioteca de compatibilidad tiene un estilo predeterminado. Por ejemplo, cuando
diseñar tu app con un tema de la biblioteca de compatibilidad, una instancia de
Button
tiene el estilo
Estilo Widget.AppCompat.Button
. Si quieres aplicar un estilo de widget diferente a un
puedes hacerlo con el atributo style
en tu archivo de diseño. Por ejemplo, el
siguiente aplica el estilo de botón sin bordes de la biblioteca:
<Button style="@style/Widget.AppCompat.Button.Borderless" ... />
Si deseas aplicar este estilo a todos los botones, puedes declararlo en la sección de
buttonStyle
de la siguiente manera:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item> ... </style>
También puedes extender los estilos de widget, al igual que extender cualquier otro estilo, y, luego, aplicar el estilo de widget personalizado a tu diseño o tema.
Recursos adicionales
Para obtener más información sobre los temas y estilos, consulta los siguientes recursos adicionales:
Entradas de blog
- Diseños de Android: temas frente a estilos
- Diseños de Android: Atributos comunes del tema
- Diseños de Android: prioriza los atributos de tema