NativeScript/tests/app/ui/action-bar/action-bar.md

nav-title, title, environment, description, previous_url

nav-title	title	environment	description	previous_url
ActionBar How-To	action-bar	nativescript	Examples for using ActionBar	/ApiReference/ui/action-bar/HOW-TO

ActionBar

Using a ActionBar requires the action-bar module. {%snippet actionbar-common-require%}

Setting Title and Icon

<Page>
  <Page.actionBar>
    {%raw%}<ActionBar title="{{ title }}" android.icon="res://is_custom_home_icon"/>{%endraw%}
  </Page.actionBar>
  ...
</Page>

The icon can only be set in Android platform. It is hidden by default, but you explicitly control its visibility with the `android.iconVisibility' property.

Setting Custom Title View

<Page loaded="pageLoaded">
  <Page.actionBar>
    <ActionBar title="Title">
      <ActionBar.titleView>
        <StackLayout orientation="horizontal">
          <Button text="1st" />
          <Button text="2nd" />
          <Button text="3rd" />
        </StackLayout>
      </ActionBar.titleView>
    </ActionBar>
  </Page.actionBar>
  ...
</Page>

Setting Action Items

<Page>
  <Page.actionBar>
    <ActionBar title="Title">
      <ActionBar.actionItems>
        <ActionItem text="left"  ios.position="left"/>
        <ActionItem text="right" ios.position="right"/>
        <ActionItem text="pop"   ios.position="right"  android.position="popup"/>
      </ActionBar.actionItems>
    </ActionBar>
  </Page.actionBar>
  ...
</Page>

The position option is platform-specific. The available values are as follows:

• Android - actionBar, actionBarIfRoom and popup. The default is actionBar.
• iOS - left and right. The default is left.

Displaying Platform-Specific System Icons on Action Items

<Page>
  <Page.actionBar>
    <ActionBar>
      <ActionBar.actionItems>
         <ActionItem ios.systemIcon="12" android.systemIcon = "ic_menu_search" />
         <ActionItem ios.systemIcon="15" android.systemIcon = "ic_menu_camera" />
         <ActionItem ios.systemIcon="16" android.systemIcon = "ic_menu_delete" />
      </ActionBar.actionItems>
    </ActionBar>
  </Page.actionBar>
  ...
</Page>

iOS

Set ios.systemIcon to a number representing the iOS system item to be displayed. Use this property instead of ActionItem.icon if you want to diplsay a built-in iOS system icon. Note: systemIcon is not supported on NavigationButton in iOS The value should be a number from the UIBarButtonSystemItem enumeration: 0: Done 1: Cancel 2: Edit 3: Save 4: Add 5: FlexibleSpace 6: FixedSpace 7: Compose 8: Reply 9: Action 10: Organize 11: Bookmarks 12: Search 13: Refresh 14: Stop 15: Camera 16: Trash 17: Play 18: Pause 19: Rewind 20: FastForward 21: Undo 22: Redo 23: PageCurl

Android

Set android.systemIcon the name of the system drawable resource to be displayed. Use this property instead of ActionItem.icon if you want to diplsay a built-in Android system icon. The value should be a string such as 'ic_menu_search' if you want to display the built-in Android Menu Search icon for example. For a full list of Android drawable names, please visit http://androiddrawables.com

Displaying Custom View in Action Items

<Page>
  <Page.actionBar>
    <ActionBar>
      <ActionBar.actionItems>
			<ActionItem>
			  <ActionItem.actionView>
				  <StackLayout orientation="horizontal">
				    <Label text="Green" color="green"/>
				    <Label text="Red" color="red"/>
				  </StackLayout>
			  </ActionItem.actionView>
			</ActionItem>
      </ActionBar.actionItems>
    </ActionBar>
  </Page.actionBar>
  ...
</Page>

Setting Navigation Button

<Page>
    <Page.actionBar>
        <ActionBar title="Title">
        <NavigationButton text="go back" android.systemIcon = "ic_menu_back"/>
    </ActionBar>
    ...
</Page>

Setting text for the navigation button is not supported in Android. You can use icon or android.systemIcon to set the image in Android. Setting ios.systemIcon for the navigation button is not supported in iOS.