Playing with Android Actionbar

Hi,

I'm new to Appcelerator and was trying to replicate the following:

http://jeanlucdavid.com/2013/01/creating-a-foursquare-style-actionbar-on-android-using-appcelerator-titanium/

// Setup TabGroup
var self = Titanium.UI.createTabGroup();
 
// Setup Windows
var friends = Titanium.UI.createWindow({layout:'vertical'});
var explore = Titanium.UI.createWindow({layout:'vertical'});
var me = Titanium.UI.createWindow({layout:'vertical'});
 
// Setup Tabs
var fTab = Titanium.UI.createTab({title:'FRIENDS',window:friends});
var eTab = Titanium.UI.createTab({title:'EXPLORE',window:explore});
var mTab = Titanium.UI.createTab({title:'ME',window:me});
 
// Add Tabs
self.addTab(fTab);
self.addTab(eTab);
self.addTab(mTab);
self.open();
 
self.addEventListener('open', function(e) {
var actionBar = self.getActivity().actionBar;
if (actionBar){
actionBar.backgroundImage = 'images/foursquarelogo_background.png';
actionBar.icon = "images/transparent_icon.png";
actionBar.title = "";
}
});
 
self.activity.onCreateOptionsMenu = function(e) {
var menu = e.menu;
var menuItem = menu.add({
title : "Check-in",
icon : "images/map-pin.png",
showAsAction : Ti.Android.SHOW_AS_ACTION_IF_ROOM
});
 
menuItem.addEventListener("click", function(e) {
// Check-in code
});
};

1. I'm unable to see the chech in icon on right side
2. The 3 tabs are displayed on right side of the actionbar title, instead of having them under.

Can someone help me understand what I'm doing wrong?

Thanks