# Titanium.UI.TabbedBar

> A button bar that maintains a selected state.

- Source: https://titaniumsdk.com/docs/sdk/13.1.0/Titanium.UI.TabbedBar
- Titanium SDK version: 13.1.0
- Kind: view
- Platforms: Android, iPhone, iPad, macOS
- Since: Titanium SDK iPhone 0.8, iPad 0.8, Android 8.0.0
- Extends: Titanium.UI.View
- Inheritance: Titanium.UI.View > Titanium.Proxy

A tabbed bar is a button bar that
maintains a state (visually distinguished as a pressed or selected look).
It is closely related to the `ButtonBar` control. See the description of
[ButtonBar](https://titaniumsdk.com/docs/sdk/Titanium.UI.ButtonBar.md) for information on styling tabbed bars and buttons
bars.

Use the [Titanium.UI.createTabbedBar](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#createTabbedBar) method to create a Tabbed Bar.

## Example: Simple Tabbed Bar with 3 items

``` js
var bb1 = Ti.UI.createTabbedBar({
  labels: ['One', 'Two', 'Three'],
  backgroundColor: '#336699',
  width: 200,
  height: 25,
  top: 50
});
win.add(bb1);
```

## Example: TabGroup like behavior for views instead of windows

``` js
var win = Ti.UI.createWindow({ layout: 'vertical' });
var tabbedBar = Ti.UI.createTabbedBar({
    labels: ['One', 'Two', 'Three'],
    backgroundColor: '#336699',
    height: '10%',
    width: Ti.UI.FILL
});
var scrollView = Ti.UI.createScrollView({
    scrollingEnabled: false,
    height: '90%',
    scrollType: 'horizontal',
    layout: 'horizontal'
});

for (i = 0; i < tabbedBar.labels.length; i++) {
    scrollView.add( Ti.UI.createView({ backgroundColor: '#'+Math.random().toString(16).substr(-6)}))
}

tabbedBar.addEventListener('click', function(e) {
    scrollView.scrollTo(e.index * win.rect.width, 0, {animated: true});
})

win.add(scrollView);
win.add(tabbedBar);
win.open();
```

## Properties

### activeTintColor

- Type: String | Titanium.UI.Color
- Platforms: Android
- Since: Titanium SDK 12.5.0

Icon tint color of the selected tab

### index

- Type: Number
- Platforms: Android, iPhone, iPad, macOS

Index of the currently selected button.

### labels

- Type: Array<String> | Array<BarItemType>
- Platforms: Android, iPhone, iPad, macOS

Array of labels for the tabbed bar.

The labels can be specified either using an array of strings, in which case
each string defines the title for a button, or using an array of simple
dictionary objects, [BarItemType](https://titaniumsdk.com/docs/sdk/BarItemType.md), which can specify title, image, width and
enabled state for each button.

### selectedBackgroundColor

- Type: String | Titanium.UI.Color
- Platforms: Android
- Since: Titanium SDK 8.0.0

Background color of the selected tab indicator.

### selectedTextColor

- Type: String | Titanium.UI.Color
- Platforms: Android, iPhone, iPad, macOS
- Since: Titanium SDK iPhone 9.0.0, iPad 9.0.0, Android 12.0.0

Color of the selected text

### style

- Type: Number
- Platforms: Android, iPhone, iPad, macOS
- Default: `Titanium.UI.BUTTON_STYLE_OPTION_NEUTRAL for iOS, Ti.UI.TABS_STYLE_DEFAULT for Android`

Style of the tabbed bar.

Specify one of the constants:
For iOS, one use [Titanium.UI.BUTTON_STYLE_OPTION_POSITIVE](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#BUTTON_STYLE_OPTION_POSITIVE) or [Titanium.UI.BUTTON_STYLE_OPTION_NEUTRAL](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#BUTTON_STYLE_OPTION_NEUTRAL).

For Android use [Titanium.UI.TABS_STYLE_DEFAULT](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#TABS_STYLE_DEFAULT) or
[Titanium.UI.TABS_STYLE_BOTTOM_NAVIGATION](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#TABS_STYLE_BOTTOM_NAVIGATION) and
it is only supported in the creation dictionary of the proxy.

### textColor

- Type: String | Titanium.UI.Color
- Platforms: Android, iPhone, iPad, macOS
- Since: Titanium SDK iPhone 9.0.0, iPad 9.0.0, Android 12.0.0

Color of the text

## Events

### click

- Platforms: Android, iPhone, iPad, macOS

Fired when a button is clicked.

Event properties:

- `index` (Number): Index of the clicked button.

## Inherited members

89 members are inherited. Each is documented on the type that declares it.

- [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/13.1.0/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `lifecycleContainer`, `removeEventListener`
- [Titanium.UI.View](https://titaniumsdk.com/docs/sdk/13.1.0/Titanium.UI.View.md): `accessibilityDisableLongPress`, `accessibilityHidden`, `accessibilityHint`, `accessibilityLabel`, `accessibilityValue`, `anchorPoint`, `animate`, `animatedCenter`, `backgroundColor`, `backgroundDisabledColor`, `backgroundDisabledImage`, `backgroundFocusedColor`, `backgroundFocusedImage`, `backgroundGradient`, `backgroundImage`, `backgroundLeftCap`, `backgroundRepeat`, `backgroundSelectedColor`, `backgroundSelectedImage`, `backgroundTopCap`, `borderColor`, `borderRadius`, `borderWidth`, `bottom`, `center`, `clearMotionEffects`, `clipMode`, `convertPointToView`, `elevation`, `filterTouchesWhenObscured`, `focus`, `focusable`, `getViewById`, `height`, `hiddenBehavior`, `hide`, `horizontalMotionEffect`, `horizontalWrap`, `id`, `insertAt`, `keepScreenOn`, `keypressed`, `layout`, `left`, `longpress`, `opacity`, `overrideCurrentAnimation`, `pinch`, `postlayout`, `previewContext`, `pullBackgroundColor`, `rect`, `right`, `rotate`, `rotation`, `rotationX`, `rotationY`, `scaleX`, `scaleY`, `show`, `size`, `softKeyboardOnFocus`, `stopAnimation`, `tintColor`, `toImage`, `tooltip`, `top`, `touchEnabled`, `touchFeedback`, `touchFeedbackColor`, `transform`, `transitionName`, `translationX`, `translationY`, `translationZ`, `verticalMotionEffect`, `viewShadowColor`, `viewShadowOffset`, `viewShadowRadius`, `visible`, `width`, `zIndex`

---

- This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1.
- Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.