index.md

ActionBarExtras - Documentation

Content

• 1. Installation
• 2. Properties
• 3. Methods
• 4. Dropdown
• 5. SearchView

1. Installation

Get it

Download the latest distribution ZIP-file and consult the Titanium Documentation on how install it, or simply use the gitTio CLI:

$ gittio install com.alcoapps.actionbarextras

Using it

Please make sure that your window is open before you access the actionbar.

var abextras = require('com.alcoapps.actionbarextras');

2. Properties

• title (String) - sets the Actionbar title

  • instead of a String, you can also pass an Object with these properties:
    • text (String)
    • font (String | Object)
    • color (String)

• subtitle (String) - sets the Actionbar subtitle

  • instead of a String, you can also pass an Object with these properties:
    • text (String)
    • font (String | Object)
    • color (String)

• backgroundColor (String) - sets the Actionbar backgroundColor (Only used for the primary action bar. If you use a split action bar, you should go for a theme to set the color)

• titleFont (String | Object) - sets the Actionbar title font

• subtitleFont (String | Object) - sets the Actionbar subtitle font

• titleColor (String) - sets the Actionbar title color

• subtitleColor (String) - sets the Actionbar subtitle color

• disableIcon (Boolean) - disables / enables the Actionbar icon

• homeAsUpIcon (String) - sets the homeAsUp icon

• window (Ti.UI.Window) - Sets a reference to a window. By default, ActionbarExtras will use the current window, but you may want to define a specific reference.

• actionbarHeight (Number) - returns the height of the Actionbar as absolute pixels

• statusbarColor (String) - sets the Color of the status bar

• navigationbarColor (String) - sets the Color of the navigation bar

• elevation (Number) - sets the Elevation of the Actionbar (in dp)

• upColor (String) - sets the color of the up icon

• displayShowHomeEnabled (Boolean) - Set whether to include the application home affordance in the action bar.

• displayShowTitleEnabled (Boolean) - Set whether an activity title/subtitle should be displayed.

• displayUseLogoEnabled (Boolean) - Set whether to display the activity logo rather than the activity icon.

3. Methods

• setTitle( arg ) - sets the title property

  • arg (Object | String) - title

• setSubtitle( arg ) - sets subtitle property

  • arg (Object | String) - subtitle

• setBackgroundColor( arg ) - sets the backgroundColor property

  • arg (String) - color

• setTitleFont( arg ) - sets the titleFont property

  • arg (String | Object) - font

• setSubtitleFont( arg ) - sets the subtitleFont property

  • arg (String | Object) - font

• setTitleColor( arg ) - sets the titleColor property

  • arg (String) - color

• setSubtitleColor( arg ) - sets the subtitleColor property

  • arg (String) - color

• setDisableIcon( arg ) - sets the disableIcon property

  • arg (Boolean) (optional) - enabled / disabled

• setHomeAsUpIcon( arg ) - sets the homeAsUpIcon property

  • arg (String) - Url to the icon

• hideLogo( ) - hides the logo

• setColor( arg ) - sets the color of title and subtitle

  • arg (String) - color

• setFont( arg ) - sets the font of title and subtitle

  • arg (String) - color

• setWindow( arg ) - sets the window property

  • arg (Ti.UI.Window) - window

• setLogo( arg ) - sets a custom logo based on a font

  • args (Object):
    • icon (String) - The icon to use from the iconfont
    • fontFamily (String) - the font to use
    • color (String) - the icon color

• setMenuItemIcon( arg ) - sets a custom menu item icon based on a font

  • args (Object):
    • menu (Ti.Android.Menu) - a reference to the menu
    • menuItem (Ti.Android.MenuItem) - a reference to the menu item (NOTE: You must set an itemId on the menu item)
    • icon (String) - The icon to use from the iconfont
    • fontFamily (String) - the font to use
    • color (String) - the icon color
    • size (Number) - the icon size optional default: Actionbar icon size ( 24 dp )

• addShareAction( arg ) - adds a Share action to the Actionbar

  • arg (Object):
    • menu (Ti.Android.Menu) - a reference to the menu
    • intent (Ti.Android.Intent) - sharing Intent
    • title (String) - optional default: "Share"
    • showAsAction (Number) - optional default: Ti.Android.SHOW_AS_ACTION_IF_ROOM

• createDropdown( arg ) - adds a dropdown menu to the ActionBar

  • arg (Object):
    • titles (String[]) - an Array of Strings, representing the dropdown items
    • keepTitle (Boolean) - if set to true, it shows both, title and dropdown, otherwise the title get replaced by the dropdown (Optional, default: false)

• getActionbarHeight( ) - returns the height of the Actionbar as absolute pixels

• setStatusbarColor( arg ) - sets the color of the status bar

  • arg (String) - color

• setNavigationbarColor( arg ) - sets the color of the navigation bar

  • arg (String) - color

• setElevation( arg ) - sets the elevation property

  • arg (Number) - elevation

• setUpColor( arg ) - sets the upColor property

  • arg (String) - color

• setDisplayShowHomeEnabled( arg ) - sets the displayShowHomeEnabled property

  • arg (Boolean) - showHome

• setDisplayShowTitleEnabled( arg ) - sets the displayShowTitleEnabled property

  • arg (Boolean) - showTitle

• setDisplayUseLogoEnabled( arg ) - sets the displayUseLogoEnabled property

  • arg (Boolean) - useLogo

4. Dropdown

An ActionBar Dropdown can be created with createDropdown. Make sure you pass a String-Array as titles property. Example:

var dropdown = abextras.createDropdown({
    titles: [ "Home", "Search", "Likes", "Settings" ],
    index: 1 // optional (default: 0)
});

Properties

• activeItem (Number) - the index of the current active dropdown item

Methods

• remove - removes the drop-down from the ActionBar

Events

• change - fired when dropdown item is changed
  • index (Number) - index of the selected dropdown item

5. SearchView

You can style an SearchView with Actionbar Extras. This is done with the method:

• setSearchView( args ) - enhances an existing search view

  • args (Object):
    • searchView (Ti.UI.Android.SearchView) - a reference to the search view
    • backgroundColor (String) - changes the background color of the search view
    • textColor (String) - changes the text color of the search view
    • hintColor (String) - changes the hint color of the search view
    • line (String) - image path to replace the line drawable used by the search view
    • cancelIcon (String) - image path to use a custom close icon
    • searchIcon (String) - image path to use a custom magnifier icon

An example of how to use this is included in the example app.

5. Appendix

Using IconFont with ABX (thanks @casevictor)

var icons = require('font-awesome');

activity.onCreateOptionsMenu = function(e) {
  e.menu.clear();

  var createItem = e.menu.add({
    itemId: 101, //unique random number
    showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS
  });

  abx.setMenuItemIcon({
    menu: e.menu,
    menuItem: createItem,
    fontFamily: 'FontAwesome',
    icon: icons.check, 
    color: 'white',
    size: 30
  })
};

activity.invalidateOptionsMenu();