Android Styles and Themes tutorial

  • Written by  Clive

Keep up with the fashion:  Using Styles and Themes in your apps

styleAndThems icon

Styles specify the look and feel of individual views, like text views and buttons.

Styles help you to:

  • have a consistent look and feel across your app
  • use less code because you define the style once and then use it over and over
  • easily update the look and feel of your app. All the styling code is in one place. Just edit the style and it will change the look and feel of all the views using that style

Themes are simply Styles applied to an app or to individual activities.

I like your Style

Styles contain a collection of View properties and their values. You then apply the style to a View.

The possible properties that you can include are listed as the XML Attributes for each View in the documentation. For example, here’s a link to the TextView’s XML Attributes. These would apply to all TextView’s and their subclasses.

Check the documentation for all available style properties (R.attr).  Note that not all the View objects accept the same style attributes. Look for the View that you’re interested in to see which style properties are supported for that View.

Some style properties can only be applied as a Theme as they apply to a Window and not a View. You can find them in the R.attr reference. Look for attributes beginning with window.

Here’s an example:

Android custom Theme

Styles with Window property styles must be applied as a Theme

Note the following:

  • windowBackground – we apply the drawable as the background to the Window (the views appear in the Window)
  • windowNoTitle – a flag indicating that the title should not be shown in this Window
  • windowFullscreen – a flag indicating that this Window should fill the entire screen

You need to apply MyCustomTheme as a Theme in the manifest.

Defining your Style

You define the style as a resource in a resource file. The root node of the file must be <resources>. You can name the file anything you like but it must have the .xml extension and must be saved in the res/values folder.

You can have a number of styles, each containing the properties with their values that you specify as items.

Here’s an example:

Android custom styles

Create your styles in a resource file then apply the style using its name attribute

Note the following:

  • <resources> - the required root node
  • <style> - add a style element for each style
  • name – the required name for the style
  • <item> - add an item element for each style property
  • parent – a style resource. It refers to another style which your style can inherit properties from
    • use it if you want to inherit style properties from the Android platform styles
    • you don’t have to use it if you’re inheriting from your own styles. Just chain your styles together
  • TextBorder.Normal.Large.Blue – an example of chained styles without using the parent element

Applying a Style to a View

You can’t apply styles programmatically although you can set individual View properties.

You can apply styles to Views in your XML layout files.

Each style is converted into an application resource when your app compiles. You can then access the style resource using this format @style/name.

Here’s an example:

Android custom styles apply in xml layout

Applying a custom style in your XML layout file

Note the following:

  • @style/TextBorder.Normal.Large.Blue – refers to one of our custom styles

Here’s another example:

Android custom styles apply in xml layout system Style

Applying an Android platform style in your XML layout

Note the following:

  • ?android:attr/textAppearanceSmall – refers to a style attribute in the currently active Theme

Your last Will and Testament: Inheritance

Your style can inherit the properties from other styles. You can then customise these properties or add new ones of your own.

The best practice is to inherit a platform style and then customise it to suite your needs.

  • You must use the parent attribute if you’re inheriting from the Android platform styles
  • You don’t need the parent attribute if you’re inheriting from your own styles. Just chain your styles together

Here’s an example:

Android custom  Style inheritance

Use the parent attribute if you’re inheriting style properties from the Android platform styles. Simply chain your custom styles together if you want to inherit style properties from them

Note the following:

  • use the parent attribute to inherit style properties from the platform styles. Your style will inherit all the properties of the parent’s style. You can add new properties or change the values of the parent’s properties
  • chain your custom styles together if you want to inherit styles from them. Your style will inherit all the properties of these styles. You can add new properties or change the values of the chained styles properties

Applying a Style to a ViewGroup

Note that if you apply a style to a ViewGroup, its children do not inherit that style.

Here’s an example:

Android custom  Style inheritance screenshot viewgroup

The child LinearLayout does not inherit the style applied to the parent LinearLayout

The above screenshot shows an activity’s layout. The layout consists of two LinearLayout’s:

  • the parent LinearLayout’s background is grey
  • the child LinearLayout’s background is purple

We apply a style to the parent layout. The style specifies a layout margin of 50dp on all four sides, seen as the white border in the above screenshot.

The style has no effect on the child LinearLayout. As you can see, it does not have a margin.

Here’s a link to all the Android platform Styles.

What’s DisneyLand got to do with it? Themes

A Theme is simply a style applied to an application or to an activity.

You must apply the Theme in the AndroidManifest.xml file:

Android custom  apply theme in manifest

You can apply the Theme to an app as well as its individual activities in the AndroidManifest.xml file

It comes with the package: Android’s Themes

Android requires all devices running Android 4.0 (ICS and above) to include the Holo theme. If your app targets these devices, then you can safely design your apps to use the Holo theme. Naturally you can customise it or create your own theme if you wish.

The Holo theme comes in two basic flavours:

  • Holo Light
  • Holo Dark

Device manufacturers are also free to include their own Themes on their devices in addition to the Holo theme. As of API level 14, these are referred to as DeviceDefault Themes.

Android determines the default theme based on the app’s targetSdkVersion. The Themes it uses as a default depend on the API level:

  • 11 and below - @android:style/Theme
  • 11 to 13 - @android:style/Theme.Holo
  • 14 and above - @android:style/DeviceDefault

Some manufacturers may include their own default theme. Some don’t.

If you don’t specify a Theme when targeting API Level 14 and above then your app may use the device default theme (if there is one) else it will use the Holo theme.

Choosing a Theme

When deciding on a Theme for your app, pick a System Theme that best suits your required look and feel. You can also customise it to better fit your needs.

It’s a good idea to have separate folders for your themes and Styles – it makes it easier to maintain your code:

Android custom  style and theme res/values folders

Have dedicated folders for your Styles and Themes

Different Themes for different versions

You can use different themes on devices running different Android versions.

Create different values folders for each API Level that you want to support and place the different themes (use the same file name) in the appropriate folder. The System will choose the correct theme at runtime:

  • res/values/my_themes.xml – the default theme
  • res/values-v10/my_themes.xml – the theme to be used for devices running API Level 10 and above
  • res/values-v14/my_themes.xml – the theme to be used for devices running API Level 14 and above

In our tutorial app, we have separate themes for:

  • API Level 10 – which shows the title in the window
  • API Level 14 – which does not show the title in the window

If you run the app, you should see the appropriate theme chosen for the different API Levels.

Here’s a link to all the Android platform Themes.

Also, check out Derek Banas's fantastic youtube tutorial on Styles and Themes.

I hope that you have found this tutorial helpful.

This project was created using Android Studio.

You can download the project files here Download icon

Are you using Eclipse or another IDE? Here's how you can use this project's Android Studio files.