Skip to content

Titanium.Android.ActionBar

An action bar is a window feature that identifies the application and user location, and provides user actions and navigation modes.

You can add action items to the action bar by defining an Android menu and setting the menu items to display as action items. See Menu and MenuItem for details.

You cannot change the action bar's settings until the window's activity or tab group's activity has been created. You can detect this by assigning a callback to the activity's onCreate property.

Note that setting the Window.navBarHidden property to true disables the Action Bar since it is part of the navigation title bar.

For more examples on using the Action Bar, refer to the Android Action Bar guide.

Application Notes for Alloy

Starting with Alloy 1.5.0, you can add ActionBar attributes to the ActionBar element. To use the action bar, add the <ActionBar> tag as a child of either a a <Window> or <TabGroup>, then set ActionBar attributes in either the XML or TSS file.

Starting with Alloy 1.4.0, you can also add ActionBar attributes to the Menu element. Do not define ActionBar attributes in both the ActionBar and Menu elements. Only define the attributes in one element.

To add action items to the action bar, add the <Menu> tag as a child of either a <Window> or <TabGroup>, then add <MenuItem> tags as children of the <Menu> tag. Set MenuItem attributes in either the XML or TSS file.

For an example of using the Action Bar with Alloy, see "Action Bar using Alloy XML Markup" below.

Extends: Titanium.Proxy · Since: 3.0 · Platforms: android

Properties #

apiName#

extended

Type: String

The name of the API that this proxy corresponds to.

The value of this property is the fully qualified name of the API. For example, Button
returns Ti.UI.Button.

backgroundImage#

Type: String

The background image for the action bar, specified as a local file path or URL.

bubbleParent#

extended

Type: Boolean

Indicates if the proxy will bubble an event to its parent.

Some proxies (most commonly views) have a relationship to other proxies, often
established by the add() method. For example, for a button added to a window, a
click event on the button would bubble up to the window. Other common parents are
table sections to their rows, table views to their sections, and scrollable views
to their views. Set this property to false to disable the bubbling to the proxy's parent.

customView#

Type: Titanium.UI.View

Sets a view to be used for a custom navigation mode.

Inserts a custom view for navigation in the space
between the application's home button and menu actions.
The custom view is trimmed to fit the space available.

displayHomeAsUp#

Type: Boolean

Displays an "up" affordance on the "home" area of the action bar.

See also: setDisplayHomeAsUpEnabled
in the Android Developer Reference.

homeAsUpIndicator#

Type: String, Number, Titanium.Blob

Sets a custom icon for the "home" button in the corner of the action bar.

Can be set to a String file path or URL to an image, to an image blob, or to a resource ID
from Ti.App.Android.R.drawable.* or Ti.Android.R.drawable.*. It's highly recommended to set this
to a vector drawable resource ID.

homeButtonEnabled#

Type: Boolean

Enable or disable the "home" button in the corner of the action bar.

See also: setHomeButtonEnabled
in the Android Developer Reference.

icon#

Type: String, Number, Titanium.Blob

Sets the application icon displayed in the "home" area of the action bar.

Before Titanium 11.0.0, this property only supports a String and it must be assigned a local file path
or URL to an image.

As of Titanium 11.0.0, this property can also be assigned an image blob or a native drawable resource ID
from Ti.App.Android.R.drawable.* or Ti.Android.R.drawable.*.

lifecycleContainer#

extended

Type: Titanium.UI.Window, Titanium.UI.TabGroup

The Window or TabGroup whose Activity lifecycle should be triggered on the proxy.

If this property is set to a Window or TabGroup, then the corresponding Activity lifecycle event callbacks
will also be called on the proxy. Proxies that require the activity lifecycle will need this property set
to the appropriate containing Window or TabGroup.

Type: String, Number, Titanium.Blob

Sets the application logo displayed in the "home" area of the action bar.

Before Titanium 11.0.0, this property only supports a String and it must be assigned a local file path
or URL to an image.

As of Titanium 11.0.0, this property can also be assigned an image blob or a native drawable resource ID
from Ti.App.Android.R.drawable.* or Ti.Android.R.drawable.*.

Type: Number

Controls the navigation mode.

The navigation mode can be NAVIGATION_MODE_STANDARD, or NAVIGATION_MODE_TABS.
A TabGroup is initialized by Titanium Mobile with NAVIGATION_MODE_TABS, and can be hidden by setting to NAVIGATION_MODE_STANDARD. NAVIGATION_MODE_LIST is not yet supported.
See also: setNavigationMode
in the Android Developer Reference.

onHomeIconItemSelected#

Type: Callback

Callback function called when the home icon is clicked.

subtitle#

Type: String

Sets the subtitle of the action bar.

title#

Type: String

Sets the title of the action bar.

visible#

Type: Boolean

Gets or sets the action bar visibility state.

Setting this property to true or false is the equivalent of calling the
show() or hide() methods.

Methods #

addEventListener #

extended

Adds the specified callback as an event listener for the named event.

Parameters:
NameTypeSummaryOptional
nameStringName of the event.No
callbackCallback<Titanium.Event>Callback function to invoke when the event is fired.No

applyProperties #

extended

Applies the properties to the proxy.

Properties are supplied as a dictionary. Each key-value pair in the object is applied to the proxy such that
myproxy[key] = value.

Parameters:
NameTypeSummaryOptional
propsDictionaryA dictionary of properties to apply.No

fireEvent #

extended

Fires a synthesized event to any registered listeners.

Parameters:
NameTypeSummaryOptional
nameStringName of the event.No
eventDictionaryA dictionary of keys and values to add to the Titanium.Event object sent to the listeners.Yes

hide #

Hides the action bar if it is currently showing.

See also:
hide
in the Android API Reference.

removeEventListener #

extended

Removes the specified callback as an event listener for the named event.

Multiple listeners can be registered for the same event, so the
callback parameter is used to determine which listener to remove.

When adding a listener, you must save a reference to the callback function
in order to remove the listener later:

var listener = function() { Ti.API.info("Event listener called."); }
window.addEventListener('click', listener);

To remove the listener, pass in a reference to the callback function:

window.removeEventListener('click', listener);
Parameters:
NameTypeSummaryOptional
nameStringName of the event.No
callbackCallback<Titanium.Event>Callback function to remove. Must be the same function passed to addEventListener.No

setDisplayShowHomeEnabled #

Shows or hides the action bar home icon

See also:
setDisplayShowHomeEnabled
in the Android API Reference.

Parameters:
NameTypeSummaryOptional
showBooleanBoolean to show or hide action bar home iconNo

setDisplayShowTitleEnabled #

Shows or hides the action bar title/subtitle

See also:
setDisplayShowTitleEnabled
in the Android API Reference.

Parameters:
NameTypeSummaryOptional
showBooleanBoolean to show or hide action bar title/subtitleNo

show #

Shows the action bar if it is currently hidden.

See also:
show
in the Android API Reference.

Examples #

Action Bar using Alloy XML Markup

Adds action items and sets several properties on a window's action bar in the XML and TSS files. `app/views/index.xml`:

<Alloy>
    <Window title="My Test App">
        <ActionBar id="actionbar" title="My XML Menu" onHomeIconItemSelected="doMenuClick" />
        <Menu>
            <MenuItem id="item1" title="Settings" onClick="openSettings" />
            <MenuItem id="item2" title="Search" onClick="doSearch" />
        </Menu>
        <Label id="label">Welcome!</Label>
    </Window>
</Alloy>
function doMenuClick() {}
function openSettings() {}
function doSearch() {}
$.index.open();
"MenuItem": {
    showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
},
"#item1": {
    icon: Ti.Android.R.drawable.ic_menu_preferences
},
"#item2": {
    icon: Ti.Android.R.drawable.ic_menu_search
},
"#actionbar": {
    icon: "/actionicon.png",
    displayHomeAsUp: true,
    backgroundImage: "/actionbackground.png"
}

Action Bar Example

The following example sets several properties on a window's action bar.

const win = Ti.UI.createWindow({
    title: "Old Title",
    navBarHidden: false
});
if (OS_ANDROID) {
    win.activity.onCreate = () => {
        const actionBar = win.activity.actionBar;
        if (actionBar) {
            actionBar.backgroundImage = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'bg.png').nativePath;
            actionBar.title = "New Title";
            actionBar.onHomeIconItemSelected = () => {
                Ti.API.info("Home icon clicked!");
            };
        }
    };
}
win.open();

Titanium SDK Documentation