Skip to Content
Author's profile photo Daniel Van Leeuwen

Getting Started with Kapsel – Part 10 — Toolbar (New in SP04)


Toolbar (New in SP04)

This plugin adds a hideable native toolbar to an app.  The toolbar is displayed using a double tap gesture.  The last button in the toolbar on Android displays items that do not fit or are less commonly used.  On Android, the toolbar has been implemented as an action bar while on iOS it was implemented as a UIActivityViewController.
To learn more about icons have a look at Icons on Android, iOS Toolbar and Navigation Bar Buttons, iOS Content Views and Apache Cordova Icons and Splash Screens.

For additional details on the Toolbar plugin see the JavaScript file in a project that includes this plugin at


or the JS Documentation at Kapsel Toolbar API Reference.

The following steps will demonstrate how to modify the sample used in the logon plugin section to have the buttons such as read, lock, unlock, register and unregister be moved to the toolbar.

  • Run the app discussed in the Logon section.
  • Add the toolbar plugin.
    cordova -d plugin add
  • Note that the following message is shown for Android when running the above command.
    For Android you need to modify the activity theme in the AndroidManifest.xml to be android:theme="@android:style/Theme.Holo".
    The minSdkVersion must also be changed to at least 11.

    To make the change, modify the file C:\Kapsel_Projects\LogonDemo\platforms\android\AndroidManifest.xml and change

    <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:launchMode="singleTop" android:name="LogonDemo" android:theme="@android:style/Theme.Black.NoTitleBar">


    <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/app_name" android:launchMode="singleTop" android:name="LogonDemo" android:theme="@android:style/Theme.Holo">


    <uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />


    <uses-sdk android:minSdkVersion="11" android:targetSdkVersion="19" />
  • Modify index.html and comment out the buttons by adding <!– and –> around the register, read, unregister, lock and unlock buttons.
  • Add the following method to handle adding and removing toolbar items depending on the state of the app.
    function addToolbarMenuItems(screenID) {
        if (screenID == "LoadingDiv") {
            //Do not add any toolbar items.            
        else if (screenID == "LockedDiv") {
            sap.Toolbar.addItem({"label" : "UnLock", "icon" : "ic_action_not_secure", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_ALWAYS }, function() {unlock();});
        else if (screenID == "MainDiv") {
            sap.Toolbar.addItem({"label" : "Read", "icon" : "ic_action_refresh", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_ALWAYS | sap.Toolbar.SHOW_AS_ACTION_WITH_TEXT }, function() {clearTable();read();});
            if (applicationContext == null) {
                sap.Toolbar.addItem({"label" : "Register", "icon" : "ic_action_add_person", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_ALWAYS }, function() {register();});
            else {
                sap.Toolbar.addItem({"label" : "UnRegister", "icon" : "no_icon", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_WITH_TEXT }, function() {unRegister();});
            sap.Toolbar.addItem({"label" : "Lock", "icon" : "ic_action_secure", "showAsAction" : sap.Toolbar.SHOW_AS_ACTION_ALWAYS }, function() {lock();});

    Add the below line to the showScreen method.


    Add the below line to the end of the method logonUnregisterSuccessCallback(result) method.

  • For Android, download the icons that will be added to the toolbar from Android Action Bar Icon Pack.

    The following files are used for the icons.

    Action Bar Icons\holo_dark\01_core_refresh
    Action Bar Icons\holo_dark\06_social_add_person
    Action Bar Icons\holo_dark\10_device_access_secure
    Action Bar Icons\holo_dark\10_device_access_not_secure

    Copy the child folders into C:\Kapsel_Projects\LogonDemo\platforms\android\res.

    For iOS, under General > App Icons > click on the button Use Asset Catalog to migrate the app to use an asset catalog.  Then under LogonDemo > Resources > Images.xcassets, create a new image set and rename it to ic_action_refresh.  Drag and drop the icons for 1x and 2x from the below folder.



    iOS provides a set of standard icons that should be used if possible at UIBarButtonItem Constants.  I don’t believe these can directly be used though with the Kapsel toolbar plugin.

  • Copy the files to the platform directory by running
    cordova -d prepare
  • Use the Android IDE or Xcode to deploy and run the project.
    Note that after adding icons a clean may be needed to ensure the new icons are added.

    After double tapping, the toolbar appears.

    Note below that the button at the end of the toolbar was clicked on to show the menuitem named UnRegister.  On older Android devices, the hardware menu button is used as mentioned in Say Goodbye to the Menu Button.

    Note that on Android, the menu item Read contains both an icon and text because of the Android only parameter sap.Toolbar.SHOW_AS_ACTION_ALWAYS was ORed with sap.Toolbar.SHOW_AS_ACTION_WITH_TEXT.  Depending on the resolution of the device, the text may only appear in landscape mode.

    Note, that on Android if the option SHOW_AS_ACTION_IF_ROOM is used, the rules defined under section named Action overflow apply.

    Note, that on Android, the title shown in the toolbar can be modified by changing app_name in the file assets\res\values\strings.xml.  This will also change the name shown beneath the app icon.

    Note, that on iOS, once a toolbar item is selected, the toolbar is hidden.

Back to Getting Started With Kapsel

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Daniel Van Leeuwen
      Daniel Van Leeuwen
      Blog Post Author

      Updated for SMP SDK 3.0 SP05