Android Styles and Themes - Tutorial

Using styles and themes in Android

This tutorial describes how to create and use styles and themes in Android applications

---

Table of Contents

1. Styles and Themes

1.1. Android design principles

1.2. Styles

1.3. Inheritance

1.4. Referring attributes in the current theme

1.5. Themes

1.6. Best practice

2. Responsive design

2.1. Responsive design consideration

2.2. Margin points

3. Thank you

4. Questions and Discussion

5. Links and Literature

5.1. Source Code

5.2. Android Resources

5.3. vogella Resources

1. Styles and Themes

1.1. Android design principles

The Android design page contains advice for styling your application. You find the design page under the following URL: Android design page

This page also contains several downloadable resources, e.g. an icon set for the Android action bar.

1.2. Styles

Android allow you to define the look and feel, for example colors and fonts, of Android components in XML resource files. This way you have to set common style attributes only once in one central place.

If the entry in the resource file is used to style a view, it is typically referred to as a style, while if it is used for styling an activity or application it is typically called a theme /.

To define a style or a theme, save an XML file in the /res/values directory of your project. The root node of the XML file must be <resources> and you use a style tag that includes the name attribute. This tag contains than more or more item tags which define values for named attributes.

The following styles.xml XML file is an example for a style definition.

<?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 viastyle=”@style/text.

1.3. Inheritance

Styles (and themes) support inheritance by using the parent attribute of the style tag. This way the style inherits all settings from the parent style and can overwrite selected attributes.

1.4. Referring attributes in the current theme

Android lists all stylable standard attributes in the R.attr file. The reference for this file can be found online under the following URL: R.attr .

You can refer to individual attributes of the current Android theme via the ?android:attr notation. This notation means that you are referring to a style attribute in the currently active theme.

For example ?android:attr/listPreferredItemHeight means: "use the value defined by the attribute called listPreferredItemHeight in the current theme.

The following layout defines buttons 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="match_parent"
    android:layout_height="match_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> 

1.5. Themes

A theme is a style applied to an entire activity or application, rather than an individual View (as in the example above). The technique of defining a theme is the same as defining a style.

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> 

1.6. Best practice

It is considered best practice to inherit a platform style and to customize it. This way our application feels natural on the platform but can still distinguish itself.

Tip

You typically use resource-qualifiers to define which platform them you inherit. Inherit as of v14 theandroid:Theme.Holo.Light.DarkActionBar style, as of v11android:Theme.Holo.Light and android:Theme.Light for older versions.

2. Responsive design

2.1. Responsive design consideration

It is recommended that the application scales with the device. On a small screen only one fragment is shown, on a larger screen a second or even third fragment might be visible.

This approach is depicted by the following graphic.

2.2. Margin points

It is recommended to not use the screen width for text in case you are behind a certain with on a device, as this is not very friendly for the readers eyes. This is typically w1000dp.

A way to implement margin points is to use a res/values/dimens.xml file and define a dimension for the margins. Afterwards use resource qualifiers for the same file to define different margins for larger devices.