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:

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

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

Note the following:

• - the required root node
• name – the required name for the style
• - 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:

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:

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:

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:

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:

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:

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 .

You can download the project files here 

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