A style is a set of properties that specify the look and format of a View or window; a style can specify properties such as height, font color... it can be defined with XML.

Android styles share a similar philosophy with style sheets, allowing you to separate design from content.

For example, we can transform:

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

Into:

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

All attributes related to styles have been removed from the layout XML and placed into a style definition called CodeFont, which is applied below using the style attribute. A theme is a style applied to an entire activity or application, instead of a single View (like the previous example). When a style is applied as a theme, every view in the activity or application will have the style's properties.

For example, you can apply the same CodeFont style as a theme for an activity, and then all text within this activity will have a simple green font.

Therefore, they are very similar to CSS: children inherit styles, such as typography, color...

The theme is automatically applied to all components, whereas styles are not. The theme can be applied per activity or per application, so it is defined through the Android manifest. If you apply a style on top of the theme, the style takes precedence.

To define it, you use an XML file located in resources.

The file name can be whatever you want; the root is resources.

To create a set of styles, you need to place an XML file in the project's res/values/ directory, with any name you like.

For each style you want to create, you need to add a <style> element to the file with a name that uniquely identifies the style. Next, you need to add an <item> element for each property of this style, with a name declaring the style property and a value to associate with it. The value for the <item> can be a keyword string, a hexadecimal color, a reference to another resource type, or another value depending on the style property.

For example:

<?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>

Styles can be modified programmatically. We will need to set an identifier.

We can take a style and set TextAppearance as its parent; in this example, we have the android:textColor item where we modify the color.

All children of <resources> create an application resource object at compile time, which can be referenced by the <style> name.

The parent attribute in the <style> element is optional and specifies the resource ID of another style from which this style should inherit properties. You can then override the inherited style properties if you want.

A style meant to be used as an activity or application theme is defined in XML in the exact same way as a style for a view. A style like the one defined earlier can be applied as a style for a single view or as a theme for an entire activity or application.

An example of style inheritance:

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

In the case of inheriting from a custom style, the syntax is slightly different:

<style name="CodeFont.Rojo">
<item name="android:textColor">#FF0000</item>
</style>
<style name="CodeFont.Rojo.Gran">
<item name="android:textSize">30sp</item>
</style>

This allows creating a custom style named CodeFont of type Red, and then we have a subtype.

To apply the style, we use style and pass it the style reference. If we want to do it for the entire application, it has to be at the theme level; many packaged styles define a theme.

Therefore, there are two ways to configure a style:

  • For an individual view, by adding the style attribute to a View element in the layout XML.
  • For an entire activity or application, by adding the android:theme attribute to the <activity> or <application> element in the Android manifest.
<TextView android:text="@string/hello" />
<application android:theme="@style/CustomTheme">
<activity android:theme="@android:style/Theme.Dialog">

Android also offers built-in resources; there are many predefined themes that can be used to avoid writing your own.

<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>

In this case, to create a theme, you inherit from an existing theme and make the desired modifications.

In Android, Theme.Light is a light theme; with Android Studio you can easily view themes and see predefined colors. Styles are created in the same way as view styles, but using standard colors.

Example.