# Titanium.UI.Android.ProgressIndicator

A progress dialog or a horizontal progress bar in the title of the window.

Availability
3.0.0

# Overview

A progress 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. It is used to indicate an ongoing activity of determinate or indeterminate length.

Use the Titanium.UI.Android.createProgressIndicator method or <ProgressIndicator> Alloy element to create a progress indicator.

A progress indicator can be either a progress dialog or a horizontal progress bar in the title of the window. The progress dialog is a modal dialog that blocks the UI. See also: Titanium.UI.Android.PROGRESS_INDICATOR_DIALOG, Titanium.UI.Android.PROGRESS_INDICATOR_STATUS_BAR.

NOTE: Titanium.UI.Android.PROGRESS_INDICATOR_STATUS_BAR does not work anymore on devices running Android 4.4+ since the underlying API was deprecated and removed by Google. See TIMOB-27312 (opens new window) for more details.

Calling Titanium.UI.Android.ProgressIndicator.show displays the indicator, and calling Titanium.UI.Android.ProgressIndicator.hide removes it.

# Examples

# Simple Progress Indicator

Click the button to show a progress indicator while some code executes and hide it on completion.

Ti.UI.backgroundColor = 'white';

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

var button = Ti.UI.createButton({
  title: 'Show Progress Dialog'
});

var progressIndicator = Ti.UI.Android.createProgressIndicator({
  message: 'Loading...',
  location: Ti.UI.Android.PROGRESS_INDICATOR_DIALOG,
  type: Ti.UI.Android.PROGRESS_INDICATOR_DETERMINANT,
  cancelable: true,
  min: 0,
  max: 10
});

button.addEventListener('click', function (e) {
  progressIndicator.show();
  var value = 0;
  setInterval(function(){
    if (value > 10) {
        return;
    }
    progressIndicator.value = value;
    value ++;
  }, 200);
  // do some work that takes 3 seconds
  // ie. replace the following setTimeout block with your code
  setTimeout(function(){
    progressIndicator.hide();
  }, 3000);
});

win.add(button);
win.open();

# Alloy XML Markup

Previous example as an Alloy view-controller.

index.xml:

<Alloy>
    <Window backgroundColor="blue">
        <Button id="button" onClick="showIndicator">Show Progress Dialog</Button>

        <ProgressIndicator ns="Ti.UI.Android" platform="android" id="progressIndicator"
          message="Loading..." min="0" max="10" cancelable="true"
          location="Ti.UI.Android.PROGRESS_INDICATOR_DIALOG"
          type="Ti.UI.Android.PROGRESS_INDICATOR_DETERMINANT" />
    </Window>
</Alloy>

index.js:

function showIndicator(e) {
    $.progressIndicator.show();
    var value = 0;
    setInterval(function(){
        if (value > 10) {
            return;
        }
        $.progressIndicator.value = value;
        value ++;
    }, 200);
    // do some work that takes 3 seconds
    // ie. replace the following setTimeout block with your code
    setTimeout(function(){
        $.progressIndicator.hide();
    }, 3000);
}
$.index.open();

# Properties

# cancelable

Availability
3.0.0
cancelable :Boolean

When true allows the user to cancel the progress dialog by pressing the BACK button.


# canceledOnTouchOutside

Availability
3.6.0
canceledOnTouchOutside :Boolean

When cancelable is set to true and this is set to true, the dialog is canceled when touched outside the window's bounds.

Default: false


# location

Availability
3.0.0
location :Number

Location for the progress indicator.

Default: Titanium.UI.Android.PROGRESS_INDICATOR_DIALOG


# max

Availability
3.0.0
max :Number

Maximum value of the progress bar.


# message

Availability
3.0.0
message :String

Message text.


# messageid

Availability
3.0.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.


# min

Availability
3.0.0
min :Number

Minimum value of the progress bar.


# type

Availability
3.0.0
type :Number

Type for the progress indicator.

Default: Titanium.UI.Android.PROGRESS_INDICATOR_INDETERMINANT

# Methods

# hide

Availability
3.0.0
hide([options]) void

Hides the progress 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
3.0.0
show([options]) void

Shows the progress indicator and starts the animation.

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

# Events

# cancel

Availability
3.0.0

Fired when the user has canceled the progress indicator dialog.

The user triggers this event by pressing the BACK button when the dialog is visible. The dialog will be hidden and this event dispatched.