Writing Styles and Themes on Android

December 3rd, 2011 by

Using reusable styles and themes to modify an Android application’s look is really easy and helps to not violate thy DRY (don’t repeat yourself) principle by typing styles in every single UI element again and again.

In the following tutorial we’re going to write and apply some simple styles and a finally theme to a simple Android application.

 

Prerequisites

The following environment is needed to follow this tutorial …

Creating a project and a ListActivity

First we’re creating a simple new Android project..

  • Create a new android project using Eclipse Project > New > Android Project
  • Create a new Activity named MyItemActivity that extends ListActivity
    package com.hascode.android;
     
    import android.app.ListActivity;
    import android.os.Bundle;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
     
    public class MyItemActivity extends ListActivity {
     private static final String[] ITEMS = { "First item", "Second item",
     "Third item", "Fourth item", "Fifth item", "Sixth item" };
     
     @Override
     public void onCreate(final Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
     ListView listView = getListView();
     listView.setAdapter(new ArrayAdapter<String>(this,
     android.R.layout.simple_list_item_1, ITEMS));
     }
    }
  • We’re filling our list view with some strings from a string array using an ArrayAdapter
  • Modify your main.xml and add a ListView with an id attribute android:id=”@android:id/list” .. this is what out ListActivity uses to resolve the ListView when getListView() is called
    <?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" >
     
     <ListView
     android:id="@android:id/list"
     android:layout_width="match_parent"
     android:layout_height="wrap_content">
     </ListView>
     
    </LinearLayout>
  • Running the application, our ListView looks like this

    Android ListView with default styles

    Android ListView with default styles

Now we’re ready to apply some styles to our view …

Writing and Applying Styles

Now to apply some styles to our list view …

  • In the first step we’re creating a new xml file named styles.xml in res/values/
    <?xml version="1.0" encoding="UTF-8"?>
    <resources>
     <style name="CustomListView" parent="@android:style/Widget.ListView">
     <item name="android:background">#2F3F66</item>
     <item name="android:fastScrollEnabled">true</item>
     </style>
    </resources>
  • What is important here? First of all we’ve created a custom style that extends its behaviour from the default list view’s style. In addition, we’re setting a new background color for the element and we’re enabling the fast scroll feature.
  • Last but not least we have to apply the style to an UI element e.g. modifying our ListView definition in the main.xml by setting a style-attribute
    <ListView
     android:id="@android:id/list"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     style="@style/CustomListView" >
    </ListView>
  • Running our application it now looks like this

    Android ListView with modified styles

    Android ListView with modified styles

What can be styled?

Everything in android.R.styleable and android.R.attr can be a part of a style and the already existing styles can be found in android.R.style.

Writing and Applying a Theme

The good news is that we don’t have to learn anything new here .. themes are also just styles …

  • First we’re modifying our main.xml and removing the style attribute here
  • In addition we’re modifying our styles.xml to this
    <?xml version="1.0" encoding="UTF-8"?>
    <resources>
        <style name="CustomTheme" parent="@android:style/Theme.Black">
            <item name="android:listViewStyle">@style/CustomListView</item>
            <item name="android:textViewStyle">@style/CustomTextView</item>
     
        </style>
        <style name="CustomListView" parent="@android:style/Widget.ListView">
            <item name="android:background">#2F3F66</item>
            <item name="android:fastScrollEnabled">true</item>
        </style>
        <style name="CustomTextView" parent="@android:style/Widget.TextView">
            <item name="android:typeface">monospace</item>
            <item name="android:shadowColor">#000000</item>
            <item name="android:shadowRadius">2.</item>
            <item name="android:shadowDx">4</item>
            <item name="android:shadowDy">4</item>
        </style>
    </resources>
  • We’ve defined two styles here for our ListView and for TextViews. In addition we’ve defined a theme that extends its features from the Theme “Black” and assigns the styles to all ListViews and TextViews.
  • Finally we’re applying the theme to our application by adding an android:theme attribute to the application element in our AndroidManifest.xml
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="com.hascode.android"
        android:versionCode="1"
        android:versionName="1.0" >
     
        <uses-sdk android:minSdkVersion="8" />
     
        <application
            android:icon="@drawable/ic_launcher"
            android:label="@string/app_name" android:theme="@style/CustomTheme">
            <activity
                android:label="@string/app_name"
                android:name=".MyItemActivity" >
                <intent-filter >
                    <action android:name="android.intent.action.MAIN" />
     
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
        </application>
    </manifest>
  • When we’re running our application now it should look like this

    Android ListView with theme applied

    Android ListView with theme applied

Tutorial Sources

I have put the source from this tutorial on my Bitbucket repository – download it there or check it out using Mercurial:

hg clone https://bitbucket.org/hascode/android-theme-tutorial

Resources

android-theme-tutorial

Tags: , , ,

Search
Categories