Action Bar

The ActionBar is NativeScript’s abstraction over the Android ActionBar and iOS NavigationBar. It represents a toolbar at the top of the activity window, and can have a title, application-level navigation, as well as other custom interactive items.

API Reference for the ActionBar Class

Native Component

Android iOS
android.widget.Toolbar UIView

Image

Action Items

The ActionBar consists of one or more action items that can be declared in markup as follows:

<ActionBar android:title="Title">
    <ActionItem text="left item" ios.position="left"></ActionItem>
    <ActionItem text="Item" ios.position="right" android.position="popup"></ActionItem>
    <ActionItem>
        <Label class="m-5" text="Custom item" color="#8C489F"></Label>
    </ActionItem>
    <ActionItem ios.systemIcon="12" android.systemIcon="ic_menu_search"></ActionItem>
    <NavigationButton icon="res://ic_arrow_back_black_24dp" (tap)="goBack()"></NavigationButton>
</ActionBar>

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.

An ActionItem can be easily customized by placing whichever element you need directly inside.

<ActionItem>
    <Label class="m-5" text="Custom item" color="#8C489F"></Label>
</ActionItem>

Furthermore, an item can have platform-specific icons that can be set with the corresponding systemIcon value. For example:

<ActionItem ios.systemIcon="12" android.systemIcon="ic_menu_search"></ActionItem>

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 display a built-in iOS system icon.

Note: systemIcon is not supported on NavigationButton components in iOS.

The value you pass ios.systemIcon 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

You can set the android.systemIcon attribute to the name of the system drawable resource to be displayed. Use this property instead of ActionItem.icon if you want to dispaly 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.

Improve this document

Demo Source


The ActionBar has a navigation button (a.k.a back button) that is used for moving around the application.

It can be set through the NavigationButton element.

<ActionBar title="ActionBar title">
    <NavigationButton android.systemIcon="ic_menu_back" text="Back to ActionBar" (tap)="goBack()"></NavigationButton>
</ActionBar>

Setting text for the navigation button is not supported on Android. You can, however, use the icon or android.systemIcon attributes to set the image of the navigation button on Android.

Setting the navigation button’s ios.systemIcon attribute is not supported on iOS.

You can modify the action executed when tapping the NavigationButton button with the button’s tap event. For example, if you with the button to return the user to the previous page, you can use the backToPreviousPage() method of the RouterExtensions class:

constructor(private routerExtensions: RouterExtensions) { }

public goBack() {
    this.routerExtensions.backToPreviousPage();
}

Improve this document

Demo Source


Title

The title of the ActionBar can be easily set by its corresponding property - title. You can additionally set an icon to use in your ActionBar on Android with the icon property.

Here’s what a basic usage of the title and icon properties looks like:

<ActionBar title=" NativeScript" android.icon="res://icon" android.iconVisibility="always">
    <NavigationButton icon="res://ic_arrow_back_black_24dp" (tap)="goBack()"></NavigationButton>
</ActionBar>

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

Furthermore, the title can be customized by placing a content component (button, label, layout-components, etc.) directly in the ActionBar.

Improve this document

Demo Source


Is this article helpful? Yes / No
Thank you for your feedback!

Tell us how we can improve this article

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.