How to customise the Titanium Android Tab Bar (and other elements)

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

The Appcelerator documentation does have all the information for you but if it’s too much to take in, here you go:

1. Generate the Tab Bar styles you want here: http://jgilfelt.github.io/android-actionbarstylegenerator/ [If you want black font, choose Light; if you want white font, choose Dark; if you want any other colour, you’ll have to edit the XML file yourself based on the instructions here]

2. Click Download

3. Copy the “res” folder in the ZIP you downloaded to projectRoot/platform/android/ (i.e. it should be a sibling of the app folder not inside it)

4. Put this inside your tiapp.xml but replace “StyleName” with the style name you entered on the github.io link above:

<android xmlns:android=”http://schemas.android.com/apk/res/android”>
<manifest>
<application android:theme=”@style/Theme.StyleName”/>
<uses-sdk android:targetSdkVersion=”17″/>
</manifest>
</android>

5. Clean & Build

That should get you started.

If you want to theme other elements, you’ll need to use the Android Holo Colors Generator and if you want to combine the Android Holo Colors with an ActionBar Style (above), read the Titanium custom Theme docs look for the section “Using Both the Android Holo Colors Generator and Android Action Bar Style Generator”



About Phil Smithson

Ultrarunner & CTO. Passions include Mobile app development, Scrum, Kanban, Wordpress and Symfony.

Leave a Reply

Your email address will not be published. Required fields are marked *


*