Titanium.UI.ActivityIndicator

> Titanium.UI.ActivityIndicator

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

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 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 show method.

Android Platform Notes

Prior to SDK 3.0, activity indicator on Android produced a modal dialog containing a spinner or progress bar. In SDK 3.0, this legacy Android activity indicator was renamed to Titanium.UI.Android.ProgressIndicator.

In SDK 3.0, use ActivityIndicator for a view that can be added as a child of another view. Use ProgressIndicator to display a progress indicator in a modal dialog or window title bar.

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',
  fullscreen: true
});

var style;
if (Ti.Platform.name === 'iPhone OS'){
  style = Ti.UI.iPhone.ActivityIndicatorStyle.DARK;
}
else {
  style = Ti.UI.ActivityIndicatorStyle.DARK;
}
var activityIndicator = Ti.UI.createActivityIndicator({
  color: 'green',
  font: {fontFamily:'Helvetica Neue', fontSize:26, fontWeight:'bold'},
  message: 'Loading...',
  style:style,
  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" fullscreen="true" 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);
}

  • 0.8
  • 3.1.2
  • 0.8
  • 0.8
  • 1.8
  • 3.1
Defined By

Properties

apiName : Stringreadonly

The name of the API that this proxy corresponds to.

The name of the API that this proxy corresponds to.

The value of this property is the fully qualified name of the API. For example, Button returns Ti.UI.Button.

  • 3.2
  • 3.2
  • 3.2
  • 3.2
  • 3.2
  • 3.2
Titanium.UI.ActivityIndicator
bottom : Number/String

Bottom position of the view.

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, '50%' or 'auto'.)

Indicates if the proxy will bubble an event to its parent. ...

Indicates if the proxy will bubble an event to its parent.

Some proxies (most commonly views) have a relationship to other proxies, often established by the add() method. For example, for a button added to a window, a click event on the button would bubble up to the window. Other common parents are table sections to their rows, table views to their sections, and scrollable views to their views. Set this property to false to disable the bubbling to the proxy's parent.

Default: true

  • 3.0
  • 3.0
  • 3.0
Titanium.UI.ActivityIndicator
color : String

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

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

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

Titanium.UI.ActivityIndicator
font : Font

Font used for the message text.

Font used for the message text.

Titanium.UI.ActivityIndicator
: String
Width of the view. ...

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

This property can be assigned the following constants:

Titanium.UI.ActivityIndicator
: String
Color of the animated indicator. ...

Color of the animated indicator.

Default:

#fff

  • 2.1
  • 3.1
Titanium.UI.ActivityIndicator
: String
Diameter of the indicator. ...

Diameter of the indicator.

The diameter of the animated indicator, exclusive of any message text.

Default: 36

  • 2.1
  • 3.1
Titanium.UI.ActivityIndicator
left : Number/String

Left position of the view.

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, '50%' or 'auto'.)

Titanium.UI.ActivityIndicator
message : String

Message text.

Message text.

Titanium.UI.ActivityIndicator
messageid : String

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

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

Only one of message or messageid should be specified.

Titanium.UI.ActivityIndicator
right : Number/String

Right position of the view.

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, '50%' or 'auto'.)

Titanium.UI.ActivityIndicator
: Number
The style for the activity indicator. ...

The style for the activity indicator.

One of the activity indicator style constants.

For iOS, use one of the constants with iPhone in the namespace.

For Android and Mobile Web, use a constant without iPhone in the namespace.

On Mobile Web, setting the style automatically sets the indicator color and diameter.

See also: indicatorColor, indicatorDiameter

This property can be assigned the following constants:

Default: Titanium.UI.iPhone.ActivityIndicatorStyle.PLAIN (iOS), Titanium.UI.ActivityIndicatorStyle.PLAIN (Android and Mobile Web)

  • 0.8
  • 0.8
  • 0.8
  • 1.8
  • 3.1
Titanium.UI.ActivityIndicator
top : Number/String

Top position of the view.

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, '50%' or 'auto'.)

Titanium.UI.ActivityIndicator
: String
Width of the view. ...

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

This property can be assigned the following constants:

Defined By

Methods

Titanium.UI.ActivityIndicator
( ) : void
Adds a child to this activity indicator's hierarchy. ...

Adds a child to this activity indicator's hierarchy.

Adding children to an ActivityIndicator is not supported on all platforms.

If you need to display views on top of this object, consider using another view as a container for both this object and the views you want to appear on top of it.

See also: Titanium.UI.View.add.

  • 0.8
  • 0.8
  • 1.8
  • 3.1
  • 3.1.2

Returns

  • void
( name, callback ) : void
Adds the specified callback as an event listener for the named event. ...

Adds the specified callback as an event listener for the named event.

Parameters

  • name : String

    Name of the event.

  • callback : Callback<Object>

    Callback function to invoke when the event is fired.

Returns

  • void
Applies the properties to the proxy. ...

Applies the properties to the proxy.

Properties are supplied as a dictionary. Each key-value pair in the object is applied to the proxy such that myproxy[key] = value.

  • 3.0
  • 3.3
  • 3.0
  • 3.0
  • 3.0
  • 3.1

Parameters

  • props : Dictionary

    A dictionary of properties to apply.

Returns

  • void
( name, event ) : void
Fires a synthesized event to any registered listeners. ...

Fires a synthesized event to any registered listeners.

Parameters

  • name : String

    Name of the event.

  • event : Dictionary

    A dictionary of keys and values to add to the Titanium.Event object sent to the listeners.

Returns

  • void
Gets the value of the apiName property. ...

Gets the value of the apiName property.

  • 3.2
  • 3.2
  • 3.2
  • 3.2
  • 3.2
  • 3.2

Returns

  • String
Titanium.UI.ActivityIndicator
( ) : Number/String
Gets the value of the bottom property. ...

Gets the value of the bottom property.

Returns

  • Number/String
Gets the value of the bubbleParent property. ...

Gets the value of the bubbleParent property.

  • 3.0
  • 3.0
  • 3.0

Returns

  • Boolean
Titanium.UI.ActivityIndicator
( ) : String
Gets the value of the color property. ...

Gets the value of the color property.

Returns

  • String
Titanium.UI.ActivityIndicator
( ) : Font
Gets the value of the font property. ...

Gets the value of the font property.

Returns

Titanium.UI.ActivityIndicator
( ) : String
Gets the value of the height property. ...

Gets the value of the height property.

Returns

  • String
Titanium.UI.ActivityIndicator
( ) : String
Gets the value of the indicatorColor property. ...

Gets the value of the indicatorColor property.

  • 2.1
  • 3.1

Returns

  • String
Titanium.UI.ActivityIndicator
( ) : String
Gets the value of the indicatorDiameter property. ...

Gets the value of the indicatorDiameter property.

  • 2.1
  • 3.1

Returns

  • String
Titanium.UI.ActivityIndicator
( ) : Number/String
Gets the value of the left property. ...

Gets the value of the left property.

Returns

  • Number/String
Titanium.UI.ActivityIndicator
( ) : String
Gets the value of the message property. ...

Gets the value of the message property.

Returns

  • String
Titanium.UI.ActivityIndicator
( ) : String
Gets the value of the messageid property. ...

Gets the value of the messageid property.

Returns

  • String
Titanium.UI.ActivityIndicator
( ) : Number/String
Gets the value of the right property. ...

Gets the value of the right property.

Returns

  • Number/String
Titanium.UI.ActivityIndicator
( ) : Number
Gets the value of the style property. ...

Gets the value of the style property.

  • 0.8
  • 0.8
  • 0.8
  • 1.8
  • 3.1

Returns

  • Number
Titanium.UI.ActivityIndicator
( ) : Number/String
Gets the value of the top property. ...

Gets the value of the top property.

Returns

  • Number/String
Titanium.UI.ActivityIndicator
( ) : String
Gets the value of the width property. ...

Gets the value of the width property.

Returns

  • String
Titanium.UI.ActivityIndicator
( ) : void
Hides the activity indicator and stops the animation. ...

Hides the activity indicator and stops the animation.

Returns

  • void
Titanium.UI.ActivityIndicator
( ) : void
Removes a child from this activity indicator's hierarchy. ...

Removes a child from this activity indicator's hierarchy.

Adding children to an ActivityIndicator is not supported on all platforms.

See also: add, Titanium.UI.View.add.

  • 0.8
  • 0.8
  • 1.8
  • 3.1

Returns

  • void
( name, callback ) : void
Removes the specified callback as an event listener for the named event. ...

Removes the specified callback as an event listener for the named event.

Multiple listeners can be registered for the same event, so the callback parameter is used to determine which listener to remove.

When adding a listener, you must save a reference to the callback function in order to remove the listener later:

var listener = function() { Ti.API.info("Event listener called."); }
window.addEventListener('click', listener);

To remove the listener, pass in a reference to the callback function:

window.removeEventListener('click', listener);

Parameters

  • name : String

    Name of the event.

  • callback : Callback<Object>

    Callback function to remove. Must be the same function passed to addEventListener.

Returns

  • void
Titanium.UI.ActivityIndicator
( bottom ) : void
Sets the value of the bottom property. ...

Sets the value of the bottom property.

Parameters

  • bottom : Number/String

    New value for the property.

Returns

  • void
( bubbleParent ) : void
Sets the value of the bubbleParent property. ...

Sets the value of the bubbleParent property.

  • 3.0
  • 3.0
  • 3.0

Parameters

  • bubbleParent : Boolean

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( color ) : void
Sets the value of the color property. ...

Sets the value of the color property.

Parameters

  • color : String

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( font ) : void
Sets the value of the font property. ...

Sets the value of the font property.

Parameters

  • font : Font

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( height ) : void
Sets the value of the height property. ...

Sets the value of the height property.

Parameters

  • height : String

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( indicatorColor ) : void
Sets the value of the indicatorColor property. ...

Sets the value of the indicatorColor property.

  • 2.1
  • 3.1

Parameters

  • indicatorColor : String

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( indicatorDiameter ) : void
Sets the value of the indicatorDiameter property. ...

Sets the value of the indicatorDiameter property.

  • 2.1
  • 3.1

Parameters

  • indicatorDiameter : String

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( left ) : void
Sets the value of the left property. ...

Sets the value of the left property.

Parameters

  • left : Number/String

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( message ) : void
Sets the value of the message property. ...

Sets the value of the message property.

Parameters

  • message : String

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( messageid ) : void
Sets the value of the messageid property. ...

Sets the value of the messageid property.

Parameters

  • messageid : String

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( right ) : void
Sets the value of the right property. ...

Sets the value of the right property.

Parameters

  • right : Number/String

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( style ) : void
Sets the value of the style property. ...

Sets the value of the style property.

  • 0.8
  • 0.8
  • 0.8
  • 1.8
  • 3.1

Parameters

  • style : Number

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( top ) : void
Sets the value of the top property. ...

Sets the value of the top property.

Parameters

  • top : Number/String

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( width ) : void
Sets the value of the width property. ...

Sets the value of the width property.

Parameters

  • width : String

    New value for the property.

Returns

  • void
Titanium.UI.ActivityIndicator
( ) : void
Shows the activity indicator and starts the animation. ...

Shows the activity indicator and starts the animation.

Returns

  • void