Custom Theme in Android

Theming is useful when you need to apply a consistent custom look throughout the app. There are two ways you can do this in Android:

  1. Style: Define styles and then apply them to the widgets in layout XML. This can still be a lot of work since you have to apply the styles to each widget.
  2. Theme: Create a theme where you use the styles and then associate a theme at the application level. This will apply the styles throughout the app.

The way you define styles and theme depend on if your project is using the support library. Here I will describe the way things are done using the native SDK (not using support library).


You can define the styles in res/values/styles.xml. For example:

    <style name="labelStyle">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">#00FF00</item>

Now, you can use the style with a widget in a layout XML.

<TextView android:text="@string/hello_world" 
    style="@style/labelStyle" />

You can override some of the style attribute at the individual widget level. For example, here we change the text color.

<TextView android:text="@string/hello_world" 
    style="@style/labelStyle" />


A theme applies styles at application level. This way you don’t have to set style for each widget.

You can define a theme in res/values/styles.xml. It’s strongly recommended that you derive your theme from a standard theme. That way you can just override what you need.

The theme below specifies the action bar background, title style and text view (label) style.

    <style name="AppTheme" parent="android:style/Theme.Holo.Light">
        <!-- Customize your theme here. -->
        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:windowBackground">@color/background</item>
        <item name="android:textViewStyle">@style/labelStyle</item>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
        <item name="android:background">#FF0000</item>
        <item name="android:titleTextStyle">@style/titleStyle</item>
    <!-- ActionBar title styles -->
    <style name="titleStyle">
        <item name="android:fontFamily">sans-serif-condensed</item>
        <item name="android:textColor">#FFFFFF</item>
    <!-- TextView styles -->
    <style name="labelStyle">
        <item name="android:typeface">monospace</item>
        <item name="android:textColor">#00FF00</item>

    <color name="background">#cfcfcf</color>

Then, register your theme at the application level. Open AndroidManifest.xml and set the theme:

        android:theme="@style/AppTheme" >

Individual widgets can override the theme by having their own style or directly setting properties like color and font.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s