Styles & Themes

Styles and themes are specified in res/styles.xml. Themes are used for the overall appearance of the application, while styles are applied to specific views.

In most cases, you won't need more than one style file. If you use abstracted dimensions and image assets in your styles (as opposed to hard-coded values) combined with the qualifier system (all of which will be covered in depth in this chapter), it makes your views scalable.

You can inherit from other styles and themes. You can override attributes and add new ones in derived styles or when specifying view attributes in the layout file.

Styles

Styles allow you to abstract out view attributes into a centralized location to enable reuse.

Defining styles

In this example, I've defined a style called SquareButton that configures a height and width.

<style name="SquareButton">
    <item name="android:layout_width">50dp</item>
    <item name="android:layout_height">50dp</item>
</style>

Note: The syntax is a bit different from how you specify view attributes in your layouts, but they both use the same XML attributes.

Using styles

After you define a style, you can reference it in the XML layout by using the style attribute:

<!--Square button-->
<Button
    android:id="@+id/square_button"
    android:text="@string/SQUARE_BUTTON_TEXT"
    style="@style/SquareButton"/>

Note: style doesn't use the android namespace.

Themes

Themes provide a convenient way to apply style to an entire application or just an Activity.

This is useful because you can rapidly reskin your application by changing just a few lines of code.

To use a theme in your application, you specify it in the AndroidManifest.xml. You can either use Android's builtin themes (example below) or create your own.

<application
    android:label="@string/APP_NAME"
    android:icon="@drawable/icon"
    android:theme="android:Theme.Holo.Light.DarkActionBar"/>

If you want to customize a theme, you can extend an existing Android theme and adding attributes or override attributes as desired.

AndroidManifest.xml

<application
    android:label="@string/APP_NAME"
    android:icon="@drawable/icon"
    android:theme="@style/ApplicationTheme">

styles.xml

A theme is just a style. What makes it different is where you apply it!

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