18. Styles and Themes

18.1. Styles

Styles in Android allow to define the look and feel of Android application in external files. Styles can get assigned to Views.
You can define styles in XML and assign them to these elements. This way you only have to set common attributes once and can later change the look in one central place.
To define a style, save an XML file in the /res/values" directory of your project. The root node of the XML file must be <resources> .
The following "styles.xml" XML file would be created in the "/res/xml" folder.

    
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="text">
        <item name="android:padding">4dip</item>
        <item name="android:textAppearance">?android:attr/textAppearanceLarge</item>
        <item name="android:textColor">#000000</item>
    </style>
    <style name="layout">
        <item name="android:background">#C0C0C0</item>
    </style>
</resources>
   

You assign the style attribute to your elements, for example to the text elements via style=”@style/text”.

18.2. Attributes

You can also refer to individual attributes of Android styles. For example the following will define button with the Android 4.0 button style.

    
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        style="?android:attr/buttonBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/Button01"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Show" />

        <Button
            android:id="@+id/Button02"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Change" />
    </LinearLayout>

    <EditText
        android:id="@+id/myView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >

        <requestFocus />
    </EditText>

</LinearLayout>
   

18.3. Themes

A theme is a style applied to an entire Activity or application, rather than an individual View (as in the example above).
The next example show how to define your own Theme while extending a platform theme.

    
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="MyTheme" parent="android:Theme.Light">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@color/translucent_red</item>
        <item name="android:listViewStyle">@style/MyListView</item>
    </style>

    <style name="MyListView" parent="@android:style/Widget.ListView">
        <item name="android:listSelector">@drawable/ic_menu_home</item>
    </style>

</resources>
   

18.4. Android Design Page

How to design your Android application is described on the Android Design Pages, which can be found here http://developer.android.com/design/index.html .
This page also contains several downloadable resources, e.g. an Icon set for the ActionBar.