JOAOSANTACRUZ.COM

Building a custom Android Action Bar Object with Flying Menu - Titanium Mobile

The Action Bar is one of the most important design elements in the Android platform. My approach does not cover all the possibilities of the native element, but it helps on the navigation flow, flying menu and allows to add the some buttons on the right.

Android Action Bar

Source: Android developer, http://developer.android.com/design/patterns/actionbar.html

My approach to Android Action bar using Titanium Mobile

   

Install and use

// define main windows

Ti.App.masterWindows = [
                {title:'Window 1', level:0, index:0, url:'win1.js', icon:'img/menu_icon.png', backgroundColor:'#CCC', exitOnClose:true, altNavBarObj:null},
                {title:'Window 2', level:0, index:1, url:'win1.js', icon:'img/menu_icon.png', backgroundColor:'orange', exitOnClose:false, altNavBarObj:null},
                {title:'Window 3', level:0, index:2, url:'win1.js', icon:'img/menu_icon.png', backgroundColor:'lime', exitOnClose:false, altNavBarObj:null}
            ];
       

// innclude module file
var ActionBarNavigation = require('ActionBarNavigation');
 

// instantiate 'ActionBarNavigation' module
Ti.App.actionBarNavigation = new ActionBarNavigation(Ti.App.masterWindows);
 

// Open root/master window (homescreen)
Ti.App.actionBarNavigation.open();

Download source

AndroidActionBar.zip

Keywords

Android, ActionBar, Appcelerator, Titanium Mobile, module