Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use the Android Action Bar.

The ActionBar is a property of a page. ActionBar should be implemented for each page. At first the visible property of the Action Bar should be true.

function page1_onShow(e) {
	this.actionBar.visible = true;

Customizing ActionBar

The ActionBar customizations should be done in Page’s OnShow event.

Changing the background colour:

this.actionBar.backgroundColor = "#222222";

Setting Background Image

this.actionBar.backgroundImage = "bg_actionbar.png"; 

Setting Title and Subtitle

this.actionBar.displayShowTitleEnabled = true;
this.actionBar.title = "My Title";
this.actionBar.subtitle = "My Subtitle";

Setting the icon:

this.actionBar.displayShowHomeEnabled = true;
this.actionBar.icon = "icon_home.png";

Making the home icon pressable:

this.actionBar.displayHomeAsUpEnabled = true;
this.actionBar.onHomeIconItemSelected = function () {
	alert("Home icon pressed.");

Setting Custom Title View

Setting a custom title text. Title and subtitle will be disabled if title view is used.

this.actionBar.titleView = {
	type : SMF.UI.TitleViewType.TEXT,
	text : "Title",
	textSize : 20,
	textColor : "#000000",
	alignment : SMF.UI.Alignment.CENTER,
	left : 10,
	top : 10

Enable/Disable ActionBar

ActionBar touch events can be disabled for preventing user to interact with it by using enabled property;

function page1_onShow() {
    this.actionBar.backgroundColor = "#ff0000";
    this.actionBar.homeAsUpIndicator = "icon.png";
    this.actionBar.displayHomeAsUpEnabled = true;
    this.actionBar.visible = true;
	this.actionBar.enabled = false;


Menu Items

Menu items can be used by setting an item array to the Actionbar menuItems property.

var item1 = new SMF.UI.Android.MenuItem({
		id : "1", // unique id for the item
		title : "Hide Me",
		showAsAction : SMF.UI.Android.ShowAsAction.IFROOM, //Only place this item in the Action Bar if there is room for it.
		onSelected : function (e) {
			alert("Selected item id: " +;
			this.visible = false; // hides the menu item when clicked.
this.actionBar.menuItems = [item1];

Adding a menu item with icon: ( Menu Item icons have fix sizes. You can find the sizes of the images from the link. )

var item2 = new SMF.UI.Android.MenuItem({
		id : "2",
		icon : "icon_smartface.png",
		showAsAction : SMF.UI.Android.ShowAsAction.ALWAYS //Always place this item in the Action Bar. Avoid using this unless it's critical that the item always appear in the action bar. Setting multiple items to always appear as action items can result in them overlapping with other UI in the action bar.
this.actionBar.menuItems = [item1, item2];

On Android 2.3.X devices menu items are not shown on action bar. Menu items will be seen on the menu by pressing menu button. For iOS , NavigationBar is used and for more info about the Navigation bar can be found in the document. Note: If there is sliderDrawer in page, homeAsUpIndicator will only trigger show or hide methods of the slider drawer and this behaviour cannot be changed.

function page1_onShow() {
    this.actionBar.backgroundColor = "#ff0000";
    this.actionBar.homeAsUpIndicator = "icon.png";
    this.actionBar.displayHomeAsUpEnabled = true;
    this.actionBar.visible = true;
var slider_drawer = new SMF.UI.SliderDrawer({
        width : '30%',
        touchEnabled : 'true',
        backgroundColor : 'green',
        position : 'left'