Customizing the overall App Style

This guide has been updated for Titanium SDK 3.3.0 which uses AppCompat to bring the ActionBar to Android 2.3.x

Android has a build-in theming system. Using this feature you can easily change the base color Android uses for its controls across your app, allowing you to provide better branding and personalization, while maintaining Android's UI and UX.

Android built-in themes are:

• Holo (Mostly Black and Cyan)
• Holo Light (Mostly White and Gray)
• Holo Light with Dark ActionBar (Like the previous with a dark gray ActionBar)

By following a couple simple steps, you can build your own themes and use them for your Titanium apps.

• Create theme at http://android-holo-colors.com/
  • Set Min SDK Version to <11, otherwise it'll generate HOLO resources that are not compatible with AppCompat.
  • Make sure you leave Switch, Switch JellyBean and Navigation Drawer as NO
  • Set compatibility to APPCOMPAT
  • For convenience and readability, give it a name that represents the color you're using, in this example I'm naming it Green
• Download zip
• Decompress and copy /res onto /platform/android/res
• Modify tiapp.xml to point to the new theme

Go from this

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

to this

<android xmlns:android="http://schemas.android.com/apk/res/android">
	<manifest>
	    	<application android:theme="@style/Green" />
    	    	<uses-sdk android:targetSdkVersion="19"/>
    </manifest>
</android>

Here your telling Titanium to add a custom manifest entry during the build process, in which you instruct Android to use your custom theme instead of the default one.

• SDK Version 11 is Android 3.0 (Honeycomb). This is the first version that supports Holo Themes.
• SDK Version 19 is Android 4.4 (KitKat). TargetSDK should always be the most recent SDK.

You can now run your app and all your controls should now be customized to the selected color.

Customizing the ActionBar Theme

Android also allows you to customize the ActionBar and ActionBar Tabs.

• Create theme at http://jgilfelt.github.io/android-actionbarstylegenerator

  • If you select Light - Dark ActionBar as your base theme, your minSdkVersion must be >= 14
  • For convenience and readability, give it a name that represents your app. In this example I'm naming it Myappname (use a single word with no punctuation)

• Download zip

• Decompress and copy /res to /platform/android

• Modify tiapp.xml to point to the new theme

Go from this

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

to this

<android xmlns:android="http://schemas.android.com/apk/res/android">
    <manifest>
        <application android:theme="@style/Theme.Myappname"/>
        <uses-sdk android:minSdkVersion="11"/>
        <uses-sdk android:targetSdkVersion="19"/>
    </manifest>
</android>

Notice that when compared to the previous example, we're only making one very small change of specifying that the android:theme to be used is a style and not a theme.

You can now run your app and ActionBar should now be customized to the selected color.

Using both ActionBar Theme and App Style in the same app

You'll first need to create the ActionBar Theme as before, like in the previous example let's assume its name is Myappname. Add it to the tiapp.xml just as before:

 		<application android:theme="@style/Theme.Myappname"/>

• Create the App Style just as before, and give it a name that represents the color, in this example Green.

• Download zip

• Decompress and merge the files onto /platform/android/res

• Now you'll have to modify the settings for the previous theme (Myappname) to use this new one (Green) as its parent

• Open /res/values/styles_myappname.xml

Change this

    <style name="Theme.Green" parent="@android:style/Theme.Holo.Light">

to

    <style name="Theme.Green" parent="@style/Green">

With this line, you have instructed your Myappname theme to use the Green style as its parent. The result will be both being used together in your app.

---