How to create themes for Android

The Android Style and Theme system is a complex and powerful system used to skin the appearance of Android applications. It defines the attributes for each view, while the Android XML system defines where each view appears on a given page.

The web system defines the hierarchy of View instances that make up the user interface, and each view’s position and size on the screen.

The theme system defines the default attributes for each View. The attributes are used by the View to do the actual on-screen rendering. Such attributes include text styles, text colors, background Drawable, and so on.

As the theme system can be overwhelming at first, it is easiest to start by extending an existing theme that is close to the desired appearance and tweaking individual attributes. Commonly used themes include the Holo theme, introduced with Honeycomb, and the original Android theme, Theme, both of which come in light and dark variants.

Creating a Custom Android Theme

To implement a custom theme create or edit MyAndroidApp/res/values/themes.xml and add the following (replacing MyCustomTheme with the correct class name):

Listing 1: Implementing a custom theme

<resources>
    ...
    <!-- Add these three lines. -->
    <style name="MyCustomTheme" parent="android:style/Theme">
        <item name="android:textColorPrimary">#ffff0000</item>
    </style>
    ...
</resources>

In web AndroidManifest.xml apply the theme to the activities we want to style. (Replace com.myapp.MyActivity with the appropriate value.):

Listing 2: Applying the theme to the activities

<activity
    android:name="com.myapp.MyActivity"
    ...
    <!-- Add this line. -->
    android:theme="@style/MyCustomTheme"
    />

Web new theme will be applied to web activity, and text is now bright red.

Figure 1: Red Text

Choosing a Theme to Extend

Android themes are rich mediums, and possess many attributes that affect the style of the user interface. We must define many of these attributes for proper operation. Because there are so many attributes, and many attributes must be defined prior to use, it is best to extend an existing theme.

The parent attribute of the <style> element controls which theme web custom theme will extend. There are four base Android themes that are excellent candidates for extension:

• Theme - This is the base Android theme introduced with the first version of Android. It is a dark theme with light text and works on all versions of Android.
• Theme.Light - This is a light variation of the base Theme. It displays dark text on a light background.
• Theme.Holo - This was the new Android theme introduced with Honeycomb. It features more “modern” styling, and it is only available on Android versions 3.0 and above.
• Theme.Holo.Light - This is a light variation of Theme.Holo.

Note: the Holo theme is not available on Android versions 2.3 and below. If we wish to customize the Holo theme and simultaneously support these lesser versions of Android, we will need to use the theme selector technique to use the appropriate theme on each version of the platform.

Colors

We can define colors for drawable resources and apply colors to theme attributes.

Defining Color Drawable Resources

If we wish to present Engage user interface themed with web application’s color, then we will first define web color as an Android resource. To define a custom color, create or edit MyAndroidApp/res/values/colors.xml, and add the following:

Listing 3: Defining the custom colour

<resources>
   ...
   <!-- Add this line. -->
   <color name="my_custom_color">#ff1a557c</color>
   ...
</resources>

Note: If web custom color has a dark value then we may wish to extend web custom version of Theme instead of Theme.Light.

Applying Colors to Theme Attributes

We can apply web color to some theme attributes, such as the window background and the primary text color, by adding elements to web custom theme. These attributes are defined in web styles.xml file. For example, to apply the custom color to the window background, add the following two elements to web custom theme, defined in MyAndroidApp/res/values/styles.xml file:

Listing 4: Applying colours to theme attributes

<resources>
   ...
   <style name="MyCustomTheme" ...>
      <!-- Add these two items. -->
      <item name="android:windowBackground">@color/my_custom_color</item>
      <item name="android:colorBackgroundCacheHint">@color/my_custom_color</item>
   </style>
   ...
</resources>

Figure 2: Blue Background

The first <item> controls the background Drawable of the window (a color is a type of Drawable.) The second sets the cache color hint, used by the provider list screen in the library, and other instances ofListView. The windowBackground attribute also accepts Android Drawable values. Drawables include XML defined gradients, XML defined colors, and images. If we use a non-solid-color Drawable for a background we must set android:colorBackgroundCacheHint to #00000000.

Other Kinds of Drawables

Drawables are the Android resources used to define the pixels drawn on the screen. There are many different kinds of drawable resources.

Selector Drawables

A selector is a Drawable which changes based on state. For example, createMyApplication/res/drawable/my_custom_selector.xml and add the following (replacing MyApplication and my_custom_selector as necessary):

Listing 5: Selector Drawables

<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@color/my_custom_color" android:state_pressed="true"/>
   <item android:drawable="@drawable/example"/>
</selector>

Now we can use this selector as the Drawable applied to the buttonStyle attribute in web custom theme and the buttons will change appearance based on their state:

Listing 6: Change of Buttons appearance

<resources>
   ...
       <style name="MyCustomButton" ...>
           <!-- Add this item. -->
           <item name="android:background">@drawable/my_custom_selector</item>
       </style>
   ...
</resources>

Gradient Drawables

Gradients are a great way to polish the appearance of an application and they are easy to define and use in an Android theme. For example, create MyApplication/res/drawable/my_gradient.xml and add the following (replace MyApplication and my_gradient.xml as appropriate):

Listing 7: Defining Gradient Drawables

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
 
   <gradient
       android:angle="270"
       android:startColor="#1a557c"
       android:endColor="#62c4e9"
       />
 
</shape>

Then, apply the gradient to the windowBackground attribute of web custom theme.

Listing 8: Applying the Gradient to the windowBackground attribute

<resources>
   ...
       <style name="MyCustomTheme" parent=...>
           ...
           <item name="android:windowBackground">@drawable/my_gradient</item>
           <item name="android:colorBackgroundCacheHint">#00000000</item>
       </style>
   ...
</resources>

Figure 3: Gradient Background

Theme Attributes

Themes offer a wide variety of attributes with which we can control the appearance of an Android activities user interface. Here is a short list of commonly used theme attributes we may wish to specify: (From the Android platform data/res/valus/attrs.xml)

• colorBackgroundCacheHint

This is a hint for a solid color that can be used for caching rendered views. This should be the color of the background when there is a solid background color; it should be null when the background is a texture or translucent. When a device is able to use accelerated drawing (thus setting state_accelerated), the cache hint is ignored and always assumed to be transparent. textAppearance

Default appearance of text: color, typeface, size, and style.

• textColorPrimary: The most prominent text color.
• textAppearanceLarge: Text color, typeface, size, and style for “large” text. Defaults to primary text color.
• textAppearanceMedium: Text color, typeface, size, and style for “medium” text. Defaults to primary text color.
• textAppearanceSmall: Text color, typeface, size, and style for “small” text. Defaults to secondary text color.
• buttonStyle: Normal Button style.
• listDivider: The drawable for the list divider.
• window Background: Drawable to use as the overall window background. As of Honeycomb, this may be a selector that uses state_accelerated to pick a non-solid color when running on devices that can draw such a bitmap with complex compositing on top at 60 fps. There are a few special considerations to use when setting this drawable:
• This information will be used to infer the pixel format for web window’s surface. If the drawable has any non-opaque pixels, web window will be translucent (32 bpp).
• If we want to draw the entire background, we should set this drawable to some solid color that closely matches that background (so the system’s preview of web window will match), and then in code manually set web window’s background to null so it will not be drawn.
• windowFrame: Drawable to use as a frame around the window.
• windowActionBar: Flag indicating whether this window should have an Action Bar in place of the usual title bar.
• alertDialogTheme: Theme to use for alert dialogs spawned from this theme.
• progressBarStyle: Default ProgressBar style. This is a medium circular progress bar.
• actionBarStyle: Reference to a style for the Action Bar.

Conclusion

In this article, we went through the process to create themes for Android devices. Hope this was useful.