Using Themes and Styles in Android

In web design we have the concept of Styles and Themes. Styles like Cascading Style Sheets (CSS) define the values of the web controls attributes such as width, heigth, font color, background and so on. A style can be applied on several controls in several web pages.

Themes are used to group a set of styles to be applied on the whole web application. Themes (or sometimes skins) define the look of all control within the application.

Android introduces similar concepts by using Styles and Themes. A Style can be applied to views individually while a Theme is applied to a whole activity.

Styles:

Styles are defined as xml resources files in res/values directory of your project.

consider this definition of a TextView:

<TextView android_layout_width="fill_parent" 
 android_layout_height="wrap_content" 
 android_textColor="#FFF" 
 android_typeface="monospace" 
 android_text="First Text View"
 android_background="#00F" 
 />

this defines a text view with width and height equal to wrap_content, white font color, font type "monospace" and blue back ground.

if we want to have the same results using a style: we first create a xml file (call it styles.xml) in res/values directory and it would be like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="BlueLabel">
<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:background">#00F</item>
<item name="android:textColor">#FFF</item>
</style>
</resources>

then redefine the TextView like this:

<TextView android_text="First Text View"
 style="@style/BlueLabel" / >

and you will receive the same results.
the attributes in the <item>tag can be any layout property.

Inheriting Styles:
Styles in Android has an interesting feature which is the ability to inherit styles in a fashion similar to that in CSS. consider this example:

we have a style for a button like this:

<style name="ButtonStyle">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">15px</item>
<item name="android:typeface">serif</item>
</style>

the button will appear like this:

we can make this style inherit from BlueLabel defined previously by adding the parent attribute to the <style*gt; tag:

<style name="ButtonStyle" parent="BlueLabel">

then the button will be like this:

the button inherited the background color from the parent style.
another interesting feature in styles inheritance is the ability to inherit from the platform built-in styles defined in the android.R.style namespace. to know more about the platform styles check this link

or you can type in your editor (Eclipse) android.R.style and let the intelli-sense list you the complete list of platform styles, if you want to use them in your xml just replace the undrscores with a period like this:
Widget_Button becomes @android:style/Widget.Button.

In the previous button style example we will set the parent of the style to be @android:style/Widget.Button.Small
and the button will be like this:

Note: if you apply a style to a ViewGroup widget, its child widgets will not inherit that style.

Using Themes

you can apply styles as themes on an activity level or application level.

if you apply a theme on an activity level then all widgets within that activity will inherit from that theme.
to do so, open the AndroidManifest.xml and go the <activity> tag and add the android:theme attribute:

<activity android_name=".StylesDemo"
 android_label="@string/app_name" android_theme="@style/BlueLabel">

to apply a theme on the application level so that the style will be applied to all activities within your application, open the AndroidManifest.xml and go the <application> tag and add the android:theme attribute:

<application android_icon="@drawable/icon" android_label="@string/app_name" android_theme="@style/BlueLabel">

to set the theme of an activity programmatically call this line in the onCreate method

this.setTheme(R.style.BlueLabel);

Related Posts by Categories