Version13.4.1

Titanium.UI.TabGroup

viewAndroidiPhoneiPadmacOSsince 0.9

Extends Titanium.UI.WindowTitanium.UI.ViewTitanium.Proxy

A tabbed group of windows.

Android	iOS

A tab group can contain one or more Tab objects, each of which has an associated tab control that is used to bring it into focus.

Use the Titanium.UI.createTabGroup method or <TabGroup> Alloy element to create a tab group that, in turn, contains one or more <Tab> elements.

You can add tabs to the group using addTab, and programmatically switch to a specific tab using setActiveTab.

Platform Implementation Notes

When using a tab group, note the following differences between platforms:

The tab group controls are positioned at the top of the display on Android and at the bottom on iOS.
On Android, only one tab group may exist at one time. A tab group may be closed to allow a new one to be opened later, but the root of the application must be a heavyweight window to prevent it exiting. Tabs cannot be removed from the tab group once added, and tabs cannot be reordered.
If you use a BottomNavigation on Android with a Material 3 theme you should set experimental:true.
On iOS, more than one tab group may exist, and may be opened and closed as required. Each tab can contain a stack of windows, and the user can switch between them by tapping the tab's associated control. Tabs can be removed, and the user may (optionally) be allowed to reorder tabs.
On iOS, it is also possible to add tabs by updating the tabs property, and to switch active tabs by setting the active property on one of the tabs to true. Since these mechanisms are platform-specific, it is recommended that you use addTab and setActiveTab instead.
If you use the iOS-specific mechanisms, it is possible to add multiple active tabs to a tab group. In this case, the result of which tab is initially selected is undefined.

Examples

Alloy XML Markup

Default Titanium project as an Alloy view.

<Alloy>
    <TabGroup backgroundColor="white" >
        <Tab id="tab1" title="Tab 1" icon="KS_nav_views.png">
            <Window id="win1" title="Tab 1">
                <Label id="label1" color="#999">I am Window 1</Label>
            </Window>
        </Tab>
        <Tab id="tab2" title="Tab 2" icon="KS_nav_views.png">
            <Window id="win2" title="Tab 2">
                <Label id="label2" color="#999">I am Window 2</Label>
            </Window>
        </Tab>
        <!-- Use the Require tag to include external Ti.UI.Tab views -->
    </TabGroup>
</Alloy>

Classic Titanium Example

Simple two-tabbed app.

var win1 = Ti.UI.createWindow({
    backgroundColor: 'blue',
    title: 'Blue'
});
win1.add(Ti.UI.createLabel({text: 'I am a blue window.'}));

var win2 = Ti.UI.createWindow({
    backgroundColor: 'red',
    title: 'Red'
});
win2.add(Ti.UI.createLabel({text: 'I am a red window.'}));

var tab1 = Ti.UI.createTab({
    window: win1,
    title: 'Blue'
}),
tab2 = Ti.UI.createTab({
    window: win2,
    title: 'Red'
}),
tabGroup = Ti.UI.createTabGroup({
    tabs: [tab1, tab2]
});
tabGroup.open();

Example with different colors

Create a TabGroup with different active and inactive colors.

function createTab(title, icon) {
  const window = Ti.UI.createWindow({ title: title });
  window.add(Ti.UI.createLabel({ text: title + " View" }));
    const tab = Ti.UI.createTab({
    title: title,
    icon: icon,
    window: window,
  });
  return tab;
}

const tabGroup = Ti.UI.createTabGroup({
  tabs: [
    createTab("Tab 1", "/assets/images/tab1.png"),
    createTab("Tab 2", "/assets/images/tab2.png"),
    createTab("Tab 3", "/assets/images/tab1.png")
  ],
  activeTintColor: "red",
  activeTitleColor: "red",
  tintColor: "purple",
  titleColor: "purple",
  tabsBackgroundColor: "#F7F7F7",
});
tabGroup.open();

BottomNavigation Material3 example

Create a BottomNavigation TabGroup with a Material3 theme using the new layout.

const win1 = Ti.UI.createWindow();
const win2 = Ti.UI.createWindow();
const tab1 = Ti.UI.createTab({
	window: win1,
	title: 'Tab 1',
	icon: '/images/appicon.png'
});
const tab2 = Ti.UI.createTab({
	window: win2,
	title: 'Tab 2',
	icon: '/images/appicon.png'
});

win1.add(Ti.UI.createLabel({text: "Tab 1 - click to set badge"}));
win2.add(Ti.UI.createLabel({text: "Tab 2"}));
win1.addEventListener("click", function() {
	tab1.badge = 20;
});

const bottomNav = Ti.UI.createTabGroup({
	tabs: [tab1, tab2],
	theme: "Theme.Titanium.Material3.DayNight",
	experimental: true,
	style: Ti.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION
});

bottomNav.open();

Properties 136

accessibilityDisableLongPress

BooleanAndroidsince 12.4.0

Inherited from Titanium.UI.View

Boolean value to remove the long press notification for the device's accessibility service.

Default: true

activeTabBackgroundImage

StringiPhoneiPadmacOSsince 3.1.0

Default background image for the active tab.

activeTabIconTint

String | Titanium.UI.ColordeprecatediPhoneiPadmacOSsince 3.1.0

Deprecated since 9.0.3

Deprecated in favor of Titanium.UI.TabGroup.activeTintColor or alternatively Titanium.UI.Tab.activeTintColor.

Color applied to active tabs icons, as a color name or hex triplet, where the tab's activeIcon was not defined.

For information about color values, see the "Colors" section of Titanium.UI.

activeTintColor

Stringsince 9.0.3

The activeTintColor to apply to tabs.

This property affects the tint of selected tab icons.

Default: null

activeTitleColor

String | Titanium.UI.Colorsince 9.0.3

Defines the color of the title of tab when it's active.

The color of the title of the tab when it's active.

activity

Titanium.Android.ActivityAndroidsince 3.0.0read-only

Reference to the Android Activity object associated with this tab group.

An Activity object is not created until the tab group opens. Before the tab group opens, activity refers to an empty JavaScript object. You can set properties on this object but cannot invoke any Activity methods on it. Once the tab group opens, the actual Activity object is created, using any properties set on the JavaScript object. At this point, you can call methods on the activity and access any properties that are set when the activity is created.

Prior to Release 3.4.0, you can only set properties on the activity after the tab group opens.

activityEnterTransition

NumberAndroidsince 5.2.0Android 5+

Parameters	Type	Description
name	String	Name of the event.
callback	Callback<Titanium.Event>	Callback function to invoke when the event is fired. 4 fields bubbles Boolean True if the event will try to bubble up if possible. cancelBubble Boolean Set to true to stop the event from bubbling. source Object Source object that fired the event. type String Name of the event fired.

Parameters	Type	Description
view	Titanium.UI.View	The shared view from the current window.
transitionName	String	The assigned common transition name of UI elements in both windows.

Parameters	Type	Description
animation	Titanium.UI.Animation \| Dictionary<Titanium.UI.Animation>	Either a dictionary of animation properties or an Animation object.
callback?	Callback<Object>	Function to be invoked upon completion of the animation.

Parameters	Type	Description
point	Point	A point in this view's coordinate system. If this argument is missing an `x` or `y` property, or the properties can not be converted into numbers, an exception will be raised.
destinationView	Titanium.UI.View	View that specifies the destination coordinate system to convert to. If this argument is not a view, an exception will be raised.

Parameters	Type	Description
callback?	Callback<Titanium.Blob>	Function to be invoked upon completion. If non-null, this method will be performed asynchronously. If null, it will be performed immediately.
honorScaleFactor?	Boolean	Determines whether the image is scaled based on scale factor of main screen. (iOS only) When set to true, image is scale factor is honored. When set to false, the image in the blob has the same dimensions for retina and non-retina devices.

Event properties	Type	Description
index	Number	Index of the current active tab. On iOS, a value of `undefined` indicates that the More tab was the active tab.
previousIndex	Number	Index of the previous active tab. On iOS, a value of `undefined` indicates that the More tab was the previous tab.
tab	Titanium.UI.Tab	Active tab.
previousTab	Titanium.UI.Tab	Previous active tab. On iOS, a value of `undefined` indicates that the More tab was the previous tab.

Event properties	Type	Description
index	Number	Index of the current active tab.
previousIndex	Number	Index of the previous active tab.
tab	Titanium.UI.Tab	Active tab.
previousTab	Titanium.UI.Tab	Previous active tab.