Android SDK: Exploring Styles and Themes

Styles and themes are time-saving ways to create a consistent look and feel across your Android application. In this tutorial, I’ll cover everything you need to know to apply these useful concepts to your own project. Starting with a quick introduction, this tutorial then demonstrates how to work with the styles and themes that are predefined by the Android platform. Finally, I will walk you through the process of creating your own, both from scratch and by using inheritance.

What Are Styles and Themes?

Styles and themes are essentially the same thing: a collection of properties. These properties can be anything from button color to the “wrap content” attribute or the size of your text. The crucial difference is how they’re applied to your project:

• A style is applied to a View.
• A theme is applied to individual activities or an entire application.

Why Should I Use Themes and Styles?

Implementing styles and themes has several benefits.

1. Efficiency: If you’re going to be using the same collection of attributes throughout your application, defining them in advance turns this:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="#ff0000ff"
     android:textStyle="italic"
    android:typeface="serif"
    android:text="@string/disclaimer" />

Into this:

<TextView
    style="@style/disclaimerFont"
    android:text="@string/disclaimer" />

2. Consistency: Defining a style or theme helps to ensure a consistent look and feel.
3. Flexibility: When you inevitably come to tweak your UI, you only need to touch the code in one location. This change is then automatically replicated, potentially across your entire application. Styles and themes give you the freedom to quickly and easily update your UI, without touching previously-tested code.

Step 1: Create a Custom Style

Defining and referencing custom styles in Android is similar to using string resources, so we’ll dive straight in and implement a custom style.

Open the res/values/styles.xml file. This is where you’ll define your styles.

Ensure the styles.xml file has opening and closing “resource” tags:

<resources>
</resources>

Give your style a unique identifier. In this tutorial, we’ll use “headline”:

<style name="headline">

Add your attributes and their values as a list of items.

<item name="android:textStyle">bold</item>

Once you’ve finished adding items, remember the closing tag:

</style>

This is the custom style we’ll use in this tutorial:

<resources>
  	<style name="headline">
   	<item name="android:layout_width">fill_parent</item>
   	<item name="android:layout_height">wrap_content</item>
    	<item name="android:typeface">monospace</item>
    	<item name="android:textColor">#ff0000ff</item>
            <item name="android:textStyle">bold</item>
            <item name="android:textSize">20dp</item>
   </style>
</resources>

Step 2: Apply Your Style

Applying a style to a View is easy. Open your layout file, and then locate the View and add:

 <TextView
       	style="@style/headline"
   android:text="Hello, world!" />

Tip: Note the missing ‘android:’ XML prefix. This prefix is omitted because the “headline” style isn’t defined in the android namespace.

Boot up the emulator and take a look at your custom style in action.

Step 3: Examine the Predefined Styles

You’ve seen how easy it is to define and apply a custom style, but the Android platform features plenty of predefined styles, too. You can access these by examining the Android source code.

1. Locate the Android SDK installed on your hard drive and follow the path: platforms/android/data/res/values
2. Locate the ‘styles.xml’ file inside this folder. This file contains the code for all of Android’s predefined styles.

Step 4: Apply a Default Style

Pick a style to apply. In this example, we’ll use the following:

Return to your layout file, and add the following to your View:

 <TextView
        android:id="@+id/textView1"
         style="@android:style/TextAppearance.StatusBar.EventContent.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />

Experiment with other default styles to see what different effects can be achieved.

Step 5: Create a themes.xml File

Now that you’re familiar with custom and default styles, we’ll move onto themes. Themes are very similar to styles, but with a few important differences.

Before we apply and define some themes, it’s a good idea to create a dedicated themes.xml file in your project’s “Values” folder. This is especially important if you’re going to be using both styles and themes in your project.

To create this file:

1. Right-click on the “Values” folder.
2. Select “New”, followed by “Other”.
3. In the subsequent dialog, select the “Android XML Values File” option and click “Next”.
4. Enter the filename “themes” and select “Finish”.

Step 6: Apply a Default Theme

Unlike styles, themes are applied in the Android Manifest, not the layout file.

Pick a theme to work with by opening the ‘themes’ file in platforms/android/data/res/values and scrolling through the XML code. In this example, we’ll use the following:

Open the Android Manifest file. Depending on the desired scope of your theme, either apply it to:

A single activity:

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

Or the entire application:

<application android:theme="@android:style/Theme.NoTitleBar"

Finally, check how this looks in the emulator:

Step 7: Cut Corners Using Inheritance

Although you can define custom themes from scratch, it’s usually more efficient to extend one of the Android platform’s predefined themes using inheritance. By setting a “parent” theme, you implement all of the attributes of the predefined theme, but with the option of re-defining and adding attributes to quickly create a tailor-made theme.

1. In values/themes.xml, set the unique identifier as normal, but specify a “parent” theme to inherit from.

 <style name="PinkTheme" parent="android:style/Theme">
     </style>

Tip. Check platforms/android/data/res/values/themes for parent themes to extend.

2. Define each attribute that’s being added or modified. In this example we’re implementing the default ‘Theme’ but with a new font colour:

 <style name="PinkTheme" parent="android:style/Theme">
        <item name="android:textColorPrimary">#FF69B4</item>
    </style>

3. Open the Android Manifest and locate either the application or activity tag.
4. Apply your theme:

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

5. As always, check your work in the emulator:

---

Conclusion

In this tutorial, we covered using the Android platform’s predefined styles and themes as well as creating your own. If you want to learn more about what’s possible with themes and styles, the easiest way is to spend some time browsing through the corresponding files in the platforms/android/data/res/values folder. Not only will this give you an idea of the different effects that can be achieved, but it’s also a good way to find parents that can be extended using inheritance.