Android – Create custom themes for your Apps

After Google released the UI design guide for Android, (http://developer.android.com/design/index.html) a lot of Android developers have started using the inbuilt themes to make impressive UI designs for their apps.

While these themes offer a very clean UI design for the App, sometimes there are instances where we want to customize these elements on the basis of the overall look & feel of our app.

Also, with the new wizard based methods of creating UI elements like the Action Bar & adding navigation types like Tabs, Swipe etc in Android 4.0+. It is very common to see themes like Holo being applied to apps for Android ICS & JellyBean (API 14 +) .

Note – The Swipe & Tabs are only available for Android 4.0 + while the ActionBar can be used for Android 2.2+ using backward compatible libraries. 

Now, I really like the “Blue” color being used in the themes, but there are lot of times that I wish to change this color and create my custom theme for the App.

To do this, we first create our own theme that inherits from either of the themes.Lets start by editing  style.xml in the values folder (res/values). If it is missing you can create that file in the values folder.

By default it looks like

<resources>
 <style name="AppTheme" parent="android:Theme.Light" />
</resources>

Right now, we are using a theme “AppTheme” which is inheriting all the attributes from Theme.Light.Lets define a new style Theme.MyAppTheme

<resources>
   <style name="Theme.MyAppTheme" parent="android:style/Theme.Holo.Light">   
   </style> 
</resources>

Now that we have our theme that inherits Theme.Holo.Light , lets make sure we assign our application the new theme in our manifest -

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.myapp.themetest"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.MyAppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

If you run your app , it will look like

Let’s change the color for the Action Bar

<resources xmlns:android="http://schemas.android.com/apk/res/android">

   	<style name="Theme.MyAppTheme" parent="android:style/Theme.Holo.Light">
         <item name="android:actionBarStyle">@style/Theme.MyAppTheme.ActionBar</item>
    </style>
    
   <style name="Theme.MyAppTheme.ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#FF4444</item>
    </style>

The Action Bar becomes red

<item name="android:actionBarStyle">@style/Theme.MyAppTheme.ActionBar</item>

This line defines a new item for the ActionBarStyle that refers to a our custom style rather than the default style in the parent theme.

<style name="Theme.MyAppTheme.ActionBar"  parent="android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#FF4444</item>
    </style>

Then, we define a custom style for the ActionBar with parent as  “android:style/Widget.Holo.Light.ActionBar” and we change the background color using the attribute “android:background”.

We can also use a drawable for the background, this is useful when making an App that displays a logo.Now let’s change the ActionBar Title text color –

<resources>

   	<style name="Theme.MyAppTheme" parent="android:style/Theme.Holo.Light">
         <item name="android:actionBarStyle">@style/Theme.MyAppTheme.ActionBar</item>
    </style>
    
   <style name="Theme.MyAppTheme.ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#FF4444</item>
         <item name="android:titleTextStyle">@style/Theme.MyAppTheme.ActionBar.TitleTextStyle</item>
    </style>

   <style name="Theme.MyAppTheme.ActionBar.TitleTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">#fff</item>
    </style>
   
</resources>

Now let’s match the Pager Title Strip color to our custom theme. Rather than creating a style, we will go to the layout for our main activity ie activity_main.xml and set the background color to “#CC0000″

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v4.view.PagerTitleStrip android:id="@+id/pager_title_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#CC0000"
        android:textColor="#fff"
        android:paddingTop="4dp"
        android:paddingBottom="4dp" />

</android.support.v4.view.ViewPager>

So , we have got a customized ActionBar with a matching Pager Title Strip. Now lets add a button to the views and see how it looks

public static class DummySectionFragment extends Fragment {
        public DummySectionFragment() {
        }

        public static final String ARG_SECTION_NUMBER = "section_number";

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
        
            Button bt = new Button(getActivity());
                 
            Bundle args = getArguments();
            bt.setText("Button "+Integer.toString(args.getInt(ARG_SECTION_NUMBER)));
           
            return bt;
        }
    }

If you notice, the different states of the button, they don’t match our “Red” theme instead they still have the “Blue” color.

To fix this , we will define a new item in our custom Style

<item name="android:buttonStyle">@style/Theme.MyAppTheme.Widget.Holo.Button</item>

And then create our style for the buttons

<resources xmlns:android="http://schemas.android.com/apk/res/android">

   	<style name="Theme.MyAppTheme" parent="android:style/Theme.Holo.Light">
         <item name="android:actionBarStyle">@style/Theme.MyAppTheme.ActionBar</item>
         <item name="android:buttonStyle">@style/Theme.MyAppTheme.Widget.Holo.Button</item>
    </style>
    
   <style name="Theme.MyAppTheme.ActionBar" parent="android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">#FF4444</item>
         <item name="android:titleTextStyle">@style/Theme.MyAppTheme.ActionBar.TitleTextStyle</item>
    </style>

   <style name="Theme.MyAppTheme.ActionBar.TitleTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">#fff</item>
    </style>
     
   <style name="Theme.MyAppTheme.Widget.Holo.Button" parent="android:style/Widget.Button">
        <item name="android:background">@color/home_button_bg</item>
        <item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
        <item name="android:textColor">#fff</item>
        <item name="android:minHeight">48dip</item>
        <item name="android:minWidth">64dip</item>
    </style>
    
</resources>

To change the background we will use an item

<item name="android:background">@color/home_button_bg</item>

I have created a selector for the button states , you can do this by creating a folder “color” in the res directory along with an xml file home_button_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/home_button_pressed" />
    <item android:drawable="@color/home_button_normal" />
</selector>

Next, we will create “colors.xml” in the values folder, where we define our custom colors for the states.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="home_button_normal">#4e4e4e</color>
    <color name="home_button_pressed">#FF5F5F</color>
</resources>

This is the project structure I have

On similar lines, you can create your own custom themes & style different elements inherited from the parent theme. To know more about the elements that can be customized, you can go to the Graphical Layout Editor and then select the parent theme

Then select Open Theme.Holo.Light Declaration to see the elements for the theme.

That’s all folks !