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 to create an Activity Indicator.
The activity indicator is a view like any other view, and must be added to a window or other top-level view before it can be shown. Note that, unlike most views, the activity indicator is hidden by default and must be shown explicitly.
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.
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();
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);
}
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.
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
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.
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.
Color of the animated indicator.
Default:
#fff
Diameter of the indicator.
The diameter of the animated indicator, exclusive of any message text.
Default: 36
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'.)
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.
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'.)
The style for the activity indicator.
One of the activity indicator style constants. On iOS: Titanium.UI.iPhone.ActivityIndicatorStyle.DARK, Titanium.UI.iPhone.ActivityIndicatorStyle.BIG, or Titanium.UI.iPhone.ActivityIndicatorStyle.PLAIN. On Android and Mobile Web: Titanium.UI.ActivityIndicatorStyle.DARK, Titanium.UI.ActivityIndicatorStyle.BIG, Titanium.UI.ActivityIndicatorStyle.BIG_DARK, or Titanium.UI.ActivityIndicatorStyle.PLAIN.
On Mobile Web, setting the style automatically sets the indicator color and diameter.
See also: indicatorColor, indicatorDiameter
Default: Titanium.UI.iPhone.ActivityIndicatorStyle.PLAIN (iOS), Titanium.UI.ActivityIndicatorStyle.PLAIN (Android and Mobile Web)
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'.)
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.
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.
Adds the specified callback as an event listener for the named event.
Name of the event.
Callback function to invoke when the event is fired.
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.
A dictionary of properties to apply.
Fires a synthesized event to any registered listeners.
Name of the event.
A dictionary of keys and values to add to the Titanium.Event object sent to the listeners.
Hides the activity indicator and stops the animation.
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.
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);
Name of the event.
Callback function to remove. Must be the same function passed to addEventListener.
Sets the value of the bottom property.
New value for the property.
Sets the value of the bubbleParent property.
New value for the property.
Sets the value of the color property.
New value for the property.
Sets the value of the height property.
New value for the property.
Sets the value of the indicatorColor property.
New value for the property.
Sets the value of the indicatorDiameter property.
New value for the property.
Sets the value of the left property.
New value for the property.
Sets the value of the message property.
New value for the property.
Sets the value of the messageid property.
New value for the property.
Sets the value of the right property.
New value for the property.
Sets the value of the style property.
New value for the property.
Sets the value of the top property.
New value for the property.
Sets the value of the width property.
New value for the property.
Shows the activity indicator and starts the animation.