In Android, styles provide a simple mechanism to change look and appearance of the widgets which is equivalent to CSS in web. If we need to change the appearance of a single view ( edittext, textview, button ) then styles are used. If we need to change the appearance of the all the views in an activity or an application, then themes are used.
In this article, the application is developed in Eclipse 3.7.2 and tested in Android API version 10 ( 2.3.3 )
How to define a style and apply to a view?
Style definitions are written in an XML file and stored in the directory “res/values”. The xml file can have arbitrarily any name. The root element of the xml file will be named as resources.
The given below figures shows an EditText widget with the style “venus” applied.
Figure 1 : EditText widget with the style "venus"
The definition of the style “venus” is given below :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ora">#FFBB33</color>
<style name="venus">
<item name="android:textColor">@color/ora</item>
<item name="android:inputType">text</item>
<item name="android:textStyle">bold|italic</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
</resources>
The given below code shows how to apply the style on an edittext widget.
<EditText
android:id="@+id/edit_text"
style="@style/venus"
android:text="@string/venus"
/>
In a layout file, a style is applied on a widget using “style” property.
Style inheritance in Android
We can create a new style from an existing style using inheritance. In the given below example, the edittext widget uses a style name “venus.center” which is being inherited from the style “venus”. Here “venus.center” will have all the properties of “venus” and the properties defined in “venus.center”.
Figure 2 : EditText widget with the style "venus.center"
The definition of the style “venus.center” (res/values/styles.xml) is given below
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ora">#FFBB33</color>
<style name="venus" >
<item name="android:textColor">@color/ora</item>
<item name="android:inputType">text</item>
<item name="android:textStyle">bold|italic</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="venus.center">
<item name="android:gravity">center</item>
</style>
</resources>
The given below code shows how to apply an inherited style on a widget :
<EditText
style="@style/venus.center"
android:text="@string/venus_center"
/>
Inheriting Android’s Styles
In the previous section “Style Inheritance in Android”, we have seen that, how to create a new style from the existing user defined style. In this section, we will see how to inherit styles defined by Android. For inheriting Android defined styles, we will make use the property “parent” in the “style” element.
In the given below figure, the edittext widget inherits Android’s “TextAppearance.Small” style.
Figure 3 : EditText widget with the style TextAppearance.Small
The definition of the style “system” ( res/values/styles.xml ) is given below :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="ora">#FFBB33</color>
<style name="venus" >
<item name="android:textColor">@color/ora</item>
<item name="android:inputType">text</item>
<item name="android:textStyle">bold|italic</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="venus.center">
<item name="android:gravity">center</item>
</style>
<style name="system" parent="@android:style/TextAppearance.Small">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
</resources>
The given below code shows how to apply an inherited style on an edittext widget:
<EditText
style="@style/system"
android:text="@string/system"
/>
How to create and apply a theme?
A theme is nothing but a style which is applied on activities or application. Or in other terms, a style applied on an activity or an application is called a theme.
The given below is an activity screen with the theme ( style ) “jupiter” applied.
Figure 4 : Activity Screen with "jupiter" theme applied
An updated version of res/values/styles.xml file is given below with the “jupiter” style defined:
<?xml version="1.0" encoding="utf-8"?>
<resources
xmlns:android="http://schemas.android.com/apk/res/android">
<color name="ora">#FFBB33</color>
<color name="blue">#0099CC</color>
<style name="venus" >
<item name="android:textColor">@color/ora</item>
<item name="android:inputType">text</item>
<item name="android:textStyle">bold|italic</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="venus.center">
<item name="android:gravity">center</item>
</style>
<style name="system" parent="@android:style/TextAppearance.Small">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
</style>
<style name="jupiter" parent="@android:style/Theme">
<item name="android:textColor">@color/blue</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<!-- set default widget styles -->
<item name="android:buttonStyle">@style/Button</item>
<item name="android:editTextStyle">@style/EditText</item>
</style>
<style name="Button" parent="@android:style/Widget.Button">
<item name="android:textColor">@color/blue</item>
</style>
<style name="EditText" parent="@android:style/Widget.EditText">
<item name="android:textColor">@color/blue</item>
</style>
</resources>
Note : It is important to note that, the textColor property of EditText and Button are set via editTextStyle and buttonStyle properties respectively.
Now let us see how to apply the theme “jupiter” to an activity. In order to apply a theme to an activity add the property android:theme with its value as @style/jupiter to the activity element of the AndroidManfiest.xml file. If you want to apply this theme to the entire application, add the property android:theme to the application element of the AndroidManifest.xml.
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="in.wptrafficanalyzer.stylesthemesdemo"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="10" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".JupiterActivity"
android:label="@string/app_name"
android:theme="@style/jupiter"
>
<intent-filter>
<action android:name="in.wptrafficanalyzer.stylesthemesdemo.Jupiter" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
</application>
</manifest>
Download the Application
Reference
http://developer.android.com/guide/index.html
I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in
You can hire me on hourly basis or on project basis for Android applications development.
For hiring me, please mail your requirements to info@wptrafficanalyzer.in.
My other blogs
store4js.blogspot.com
Ready to test your knowledge in Android? Take this quiz :
