Titanium Mobile # Titanium.Android.ActionBar
An action bar is a window feature that identifies the application and user location, and provides user actions and navigation modes.
3.0# Overview
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 Titanium.Android.Menu and Titanium.Android.MenuItem for details.
You cannot change the action bar's settings until the window's Titanium.UI.Window.activity or tab group's Titanium.UI.TabGroup.activity has been created. You can detect this by assigning a callback to the activity's Titanium.Android.Activity.onCreate property.
Note that setting the Titanium.UI.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 (opens new window).
# 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.
# 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>
app/styles/index.tss:
"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 = "/bg.png";
actionBar.title = "New Title";
actionBar.onHomeIconItemSelected = () => {
Ti.API.info("Home icon clicked!");
};
}
};
}
win.open();
The above can be done for a tab group via its Titanium.UI.TabGroup.activity property. Note that individual tab windows do not have an activity. Only the root tab group (which hosts the tabs) provides an activity property.
# Properties
# backgroundImage
3.0The background image for the action bar, specified as a local file path or URL.
# customView
7.1.0Sets 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
3.0Displays an "up" affordance on the "home" area of the action bar.
See also: setDisplayHomeAsUpEnabled in the Android Developer Reference.
# homeAsUpIndicator
10.2.0Sets 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
3.3.0Enable or disable the "home" button in the corner of the action bar.
See also: setHomeButtonEnabled in the Android Developer Reference.
# icon
3.0Sets the application icon displayed in the "home" area of the action bar.
Before Titanium 10.2.0, this property only supports a String and it must be assigned a local file path
or URL to an image.
As of Titanium 10.2.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.*.
# logo
3.0Sets the application logo displayed in the "home" area of the action bar.
Before Titanium 10.2.0, this property only supports a String and it must be assigned a local file path
or URL to an image.
As of Titanium 10.2.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.*.
# navigationMode
3.0Controls 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
3.0Callback function called when the home icon is clicked.
# Methods
# hide
3.0Hides the action bar if it is currently showing.
See also: hide in the Android API Reference.
Returns
- Type
- void
# setDisplayShowHomeEnabled
3.3.0Shows or hides the action bar home icon
See also: setDisplayShowHomeEnabled in the Android API Reference.
Parameters
| Name | Type | Description |
|---|---|---|
show | Boolean | Boolean to show or hide action bar home icon |
Returns
- Type
- void
# setDisplayShowTitleEnabled
3.3.0Shows or hides the action bar title/subtitle
See also: setDisplayShowTitleEnabled in the Android API Reference.
Parameters
| Name | Type | Description |
|---|---|---|
show | Boolean | Boolean to show or hide action bar title/subtitle |
Returns
- Type
- void