Using styles and themes in Android

July 11, 2012
By

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.

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

EditText widget with the style "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.

The EditText widget inherts the style TextAppearance.Small

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.

Activity Screen with "jupiter" theme 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


How to hire me?

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


Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :



Tags: , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Be friend at g+

Subscribe for Lastest Updates

FBFPowered by ®Google Feedburner