Styling Action bar in Titanium Android

Titanium SDK 3.0 Appcelerator includes support for Android action bar element, including support for action bar tabs, action items, access to actionbar title, background and home icon. To enable the action bar features, application must be build with target SDK version of 11 (Android 3.0) or above. Now we can customize action bar and can apply custom holo theme in our Android app.

Default Action bar



Styled Action bar including tabgroup

Follow below steps to create the Styling actionbar in Titanium Android.

1. Generate Action Bar style

Create action bar using Action Bar Generator. Style name should be one word without any punctuation. Set Style compatibility to Holo. Apply on for the settings, which you want to apply in your application theme and download zip file. Remember your style name, it will be used in app.xml to apply this theme in your app.

2. Add the zip files in the Project

Extract .zip file of your custom theme. After extracting, it will create res folder. You have to add this res folder in your projects in below hierarchy

$project_root$/platform/android/res

Note: If there is no platform and android folders already built in your application, then you have to manually create these folders and add res folder. Your resulting hierarchy will be

Titanium Classical Version

Titanium Alloy Version

3. Modify tiapp.xml to use custom style

Replace Android tag in your tiapp.xml

With this one

 

Clean your project and run. Custom themes will be available in your app

Now o/p is like :

Font size global in all resolutions (android)

To accomplish this task you can check my test code below and see if it helps you.

var win = Ti.UI.createWindow({
    backgroundColor:'#fff',
});
 
var screenWidth = Ti.Platform.displayCaps.platformWidth;
var screenHeight = Ti.Platform.displayCaps.platformHeight;
 
function GetHeight(value) {
    var temp = (value * 100) / 480;
    return parseInt((screenHeight * temp) / 100);
}
 
function GetWidth(value) {
    var temp = (value * 100) / 320;
    return parseInt((screenWidth * temp) / 100);
}
 
var label = Ti.UI.createLabel({
        center:'0',
        color: '#019FCE',
        text: "Appcelerator Titanium Rockz !!!",
        font: {
            fontSize:GetHeight(15),
            fontFamily:'ABeeZee-Regular'
        },
        textAlign: 'center',
        wordWrap:true
});
 
win.add(label);
win.open();

Titanium XML Parse and extract data  : 

Example : 

<Response stat="ok">
     <auth>
          <token> 73257626300602415 - 3324a12587e2e9b3602</token>
          <params>delete</params>
          <userid = "23232" username="ABC" fname="A"/>
     </auth>
</Response>

 

Solve like this : 

Presuming your xml came from am xhr request then.

 
xhr.onload = function() {
  // Give me a xml document.
  var doc = this.responseXML.documentElement;
 
  // Get the token element, then the first item (could be lots of  them) then the text of the first.
  var token = doc.getElementsByTagName("token").item(0).text;
 
  // Ditto as above, but this time get the attribute name "username"
  var username = doc.getElementsByTagName("user").item(0).getAttribute("username");
}