đź“ş "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Angular

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.

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 display 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 https://developer.android.com/reference/android/R.drawable.

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:

import { Component } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";

@Component({
    moduleId: module.id,
    templateUrl: "./navigation-button.component.html"
})
export class NavigationButtonComponent {

    constructor(private routerExtensions: RouterExtensions) { }

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

iOS Specifics: The default text of the button is the title of the previous page; you can change it by setting the text property as shown in the example about setting the Title. In iOS, the back button is used explicitly for navigation. It navigates to the previous page and you cannot handle the tap event to override this behavior. If you want to place a button on the left side of the ActionBar and handle the tap event (e.g., show slide-out), you can use ActionItem with ios.position="left".

Android Specifics: In Android, you cannot set text inside the navigation button. You can use the icon property to set an image (e.g., ~\images\nav-image.png or res:\\ic_nav). You can use android.systemIcon to set one of the system icons available in Android. In this case, there is no default behaviour for NavigationButton's tap event, and we should define manually the callback function, which will be executed.

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


API Reference for the ActionBar Class

Native Component

Android iOS
android.widget.Toolbar UIView