Titanium Mobile

# Titanium.UI.ActivityIndicator

An activity indicator that lets the user know an action is taking place.

Availability
0.8
0.8
9.2.0
Extends
Titanium.UI.View

# Overview

Android iOS Windows
Android iOS Windows

An activity indicator can be used to show the progress of an operation in the UI to let the user know that some action is taking place. An activity indicator consists of a spinning animation and an optional text message, and is used to indicate an ongoing activity of indeterminate length. To show progress, use Titanium.UI.ProgressBar instead.

Use the Titanium.UI.createActivityIndicator method or <ActivityIndicator> Alloy element to create an ActivityIndicator object.

ActivityIndicator is a view and, like any view, must be added to a window or other top-level view before it can be shown. Unlike most views, ActivityIndicator is hidden by default and must be shown explicitly by calling its Titanium.UI.ActivityIndicator.show method.

# Examples

# Simple Activity Indicator

Open a yellow window immediately after a blue window. Show an activity indicator while some code executes and hide it on completion. Then close the yellow window.

Ti.UI.backgroundColor = 'white';

var win1 = Ti.UI.createWindow({
  backgroundColor: 'blue'
});

var win2 = Ti.UI.createWindow({
  backgroundColor: 'yellow'
});

var activityIndicator = Ti.UI.createActivityIndicator({
  color: 'green',
  message: 'Loading ...',
  style: Ti.UI.ActivityIndicatorStyle.DARK,
  top: 10,
  left: 10,
  height: Ti.UI.SIZE,
  width: Ti.UI.SIZE
});

// The activity indicator must be added to a window or view for it to appear
win2.add(activityIndicator);

// eventListeners must always be loaded before the event is likely to fire
// hence, the open() method must be positioned before the window is opened
win2.addEventListener('open', function (e) {
  activityIndicator.show();
  // do some work that takes 6 seconds
  // ie. replace the following setTimeout block with your code
  setTimeout(function() {
    e.source.close();
    activityIndicator.hide();
  }, 6000);
});

win1.open();
win2.open();

# Alloy XML Markup

Previous example as two Alloy views.

win1.xml:

<Alloy>
    <Window onOpen="openWin2" backgroundColor="blue" />
</Alloy>

win1.js:

function openWin2 () {
    var win2 = Alloy.createController('win2').getView();
    win2.open();
}

win2.xml:

<Alloy>
    <Window onOpen="showIndicator" backgroundColor="yellow">
        <!-- Define the styling properties in the TSS file -->
        <ActivityIndicator id="activityIndicator" message="Loading..."/>
    </Window>
</Alloy>

win2.js:

function showIndicator(e) {
    $.activityIndicator.show();
    // do some work that takes 6 seconds
    // ie. replace the following setTimeout block with your code
    setTimeout(function() {
        e.source.close();
        $.activityIndicator.hide();
    }, 6000);
}

# Properties

# bottom

Availability
0.9
0.9
9.2.0
bottom :Number | String

Bottom position of the view.

Determines the absolute position of the view relative to its parent.

Can be either a float value or a dimension string (for example 100 or '50%'.)

# color

Availability
0.8
0.8
9.2.0
color :String | Titanium.UI.Color

Color of the message text, as a color name or hex triplet.

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

# font

Availability
0.8
0.8
9.2.0
font :Font

Font used for the message text.

# height

Availability
0.9
0.9
9.2.0
height :String

Width of the view. Only accepts value of SIZE, which must be explicitly set in order to display the message and to position the view correctly.

Defaults to: If undefined, defaults to either FILL or SIZE depending on the view. See "View Types and Default Layout Behavior" in Transitioning to the New UI Layout System.

Can be either a float value or a dimension string (for example, '50%' or '40dp'). Can also be one of the following special values:

  • SIZE. The view should size itself to fit its contents.
  • FILL. The view should size itself to fill its parent.
  • 'auto'. Represents the default sizing behavior for a given type of view. The use of 'auto' is deprecated, and should be replaced with the SIZE or FILL constants if it is necessary to set the view's behavior explicitly.

This is an input property for specifying the view's height dimension. To determine the view's size once rendered, use the rect or size properties.

This API can be assigned the following constants:

# indicatorColor

Availability
2.1.0
2.1.0
9.2.0
indicatorColor :String | Titanium.UI.Color

Color of the animated indicator.

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

Default: white

# left

Availability
0.9
0.9
9.2.0
left :Number | String

Left position of the view.

Determines the absolute position of the view relative to its parent.

Can be either a float value or a dimension string (for example 100 or '50%'.)

# message

Availability
0.8
0.8
9.2.0
message :String

Message text.

# messageid

Availability
0.8
0.8
9.2.0
messageid :String

Key identifying a string in the locale file to use for the message text.

Only one of message or messageid should be specified.

Availability
0.9
0.9
9.2.0
right :Number | String

Right position of the view.

Determines the absolute position of the view relative to its parent.

Can be either a float value or a dimension string (for example 100 or '50%'.)

# style

Availability
0.8
0.8
9.2.0
style :Number

The style for the activity indicator.

One of the activity indicator style constants.

See also: indicatorColor

This API can be assigned the following constants:

Default: Titanium.UI.ActivityIndicatorStyle.PLAIN

# top

Availability
0.9
0.9
9.2.0
top :Number | String

Top position of the view.

Determines the absolute position of the view relative to its parent.

Can be either a float value or a dimension string (for example 100 or'50%'.)

# width

Availability
0.9
0.9
9.2.0
width :String

Width of the view. Only accepts value of SIZE, which must be explicitly set in order to display the message and to position the view correctly.

Defaults to: If undefined, defaults to either FILL or SIZE depending on the view. See "View Types and Default Layout Behavior" in Transitioning to the New UI Layout System.

Can be either a float value or a dimension string (for example, '50%' or '40dp'). Can also be one of the following special values:

  • SIZE. The view should size itself to fit its contents.
  • FILL. The view should size itself to fill its parent.
  • 'auto'. Represents the default sizing behavior for a given type of view. The use of 'auto' is deprecated, and should be replaced with the SIZE or FILL constants if it is necessary to set the view's behavior explicitly.

This is an input property for specifying the view's width dimension. To determine the view's size once rendered, use the rect or size properties.

This API can be assigned the following constants:

# Methods

# hide

Availability
0.9
0.9
9.2.0
hide([options]) → void

Hides the activity indicator and stops the animation.

Parameters

Name Type Description
options AnimatedOptions

Animation options for Android only. Since SDK 5.1.0 and used only on Android 5.0+

Determines whether to enable a circular reveal animation. Note that the default here is equivalent to passing in { animated: false }

Returns

Type
void

# show

Availability
0.9
0.9
9.2.0
show([options]) → void

Shows the activity indicator and starts the animation.

Remember to add the activity indicator to a parent view first, so it centers properly. This is optional for Android and required for iOS.

Parameters

Name Type Description
options AnimatedOptions

Animation options for Android only. Since SDK 5.1.0 and only used on Android 5.0+

Determines whether to enable a circular reveal animation. Note that the default here is equivalent to passing in { animated: false }

Returns

Type
void

Contents