[TIMOB-6092] Android: Feature Request Standalone Loading indicator

GitHub Issue	n/a
Type	New Feature
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-08-08T12:42:28.000+0000
Affected Version/s	Release 2.0.1
Fix Version/s	Sprint 2012-16 API, Release 3.0.0
Components	Android
Labels	SupportTeam, api, module_activityindicator, qe-review, qe-testadded
Reporter	Pedro Enrique
Assignee	Ping Wang
Created	2011-11-08T11:49:50.000+0000
Updated	2012-10-24T18:04:58.000+0000

Description

Feature request

This is request to have a stand alone loading indicator as part of the "styles" of the Ti.UI.ActivityIndicator: !http://android.attemptone.com/wp-content/uploads/2010/11/load_screenshot.png! So that we can add it to a window, view, etc... instead of having it block the entire UI.

Comments

Bill Dawson 2011-12-12

Awesome, thanks. I'll push this out and probably end up using your code to a large extent.

Ping Wang 2012-07-25

Test case for Activity Indicator:

   var win = Ti.UI.createWindow({
   	backgroundColor : 'red',
   	fullscreen : true
   });
   
   var style1;
   var style2;
   var style3;
   var style4;
   if (Ti.Platform.name === 'iPhone OS') {
   	style1 = Ti.UI.iPhone.ActivityIndicatorStyle.PLAIN;
   	style2 = Ti.UI.iPhone.ActivityIndicatorStyle.BIG;
   	style3 = Ti.UI.iPhone.ActivityIndicatorStyle.DARK;
   } else {
   	style1 = Ti.UI.ActivityIndicatorStyle.PLAIN;
   	style2 = Ti.UI.ActivityIndicatorStyle.BIG;
   	style3 = Ti.UI.ActivityIndicatorStyle.DARK;
   	style4 = Ti.UI.ActivityIndicatorStyle.BIG_DARK;
   }
   
   var activityIndicator = Ti.UI.createActivityIndicator({
   	color : 'green',
   	font : {
   		fontFamily : 'Helvetica Neue',
   		fontSize : 26,
   		fontWeight : 'bold'
   	},
   	message : 'Loading...',
   	top : 0,
   	left : 0,
   	height: Ti.UI.SIZE,
   	width: Ti.UI.SIZE
   });
   
   var buttonTop = 200;
   var buttonLeft = 10;
   var buttonHeight = 50;
   var buttonWidth = 120;
   if (Ti.Platform.name === 'iPhone OS') {
   	var buttonLeft = 0;
   	var buttonHeight = 40;
   	var buttonWidth = 80;
   }
   
   var b1_1 = Ti.UI.createButton({
   	title : "text color 1",
   	top : buttonTop,
   	left : buttonLeft,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b1_1.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.color = " + activityIndicator.color);
   	activityIndicator.color = 'green';
   	Ti.API.info("*********************** activityIndicator.color = " + activityIndicator.color);
   });
   
   var b1_2 = Ti.UI.createButton({
   	title : "text color 2",
   	top : buttonTop,
   	left : buttonLeft + buttonWidth,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b1_2.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.color = " + activityIndicator.color);
   	activityIndicator.color = 'black';
   	Ti.API.info("*********************** activityIndicator.color = " + activityIndicator.color);
   });
   
   var b1_3 = Ti.UI.createButton({
   	title : "text font 1",
   	top : buttonTop,
   	left : buttonLeft + buttonWidth * 2,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b1_3.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.font = " + activityIndicator.font);
   	activityIndicator.font = {
   		fontFamily : 'Helvetica Neue',
   		fontSize : 26,
   		fontWeight : 'bold'
   	};
   	Ti.API.info("*********************** activityIndicator.font = " + activityIndicator.font);
   });
   
   var b1_4 = Ti.UI.createButton({
   	title : "text font 2",
   	top : buttonTop,
   	left : buttonLeft + buttonWidth * 3,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b1_4.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.font = " + activityIndicator.font);
   	activityIndicator.font = {
   		fontFamily : 'DroidSans',
   		fontSize : 18,
   		fontWeight : 'normal'
   	};
   	Ti.API.info("*********************** activityIndicator.font = " + activityIndicator.font);
   });
   
   var b2_1 = Ti.UI.createButton({
   	title : "text message 1",
   	top : buttonTop + buttonHeight,
   	left : buttonLeft,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b2_1.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.message = " + activityIndicator.message);
   	activityIndicator.message = 'Loading ...';
   	Ti.API.info("*********************** activityIndicator.message = " + activityIndicator.message);
   });
   
   var b2_2 = Ti.UI.createButton({
   	title : "text message 2",
   	top : buttonTop + buttonHeight,
   	left : buttonLeft + buttonWidth,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b2_2.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.message = " + activityIndicator.message);
   	activityIndicator.message = 'Continue loading ...';
   	Ti.API.info("*********************** activityIndicator.message = " + activityIndicator.message);
   });
   
   var b3_1 = Ti.UI.createButton({
   	title : "top=10",
   	top : buttonTop + buttonHeight * 2,
   	left : buttonLeft,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b3_1.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.top = " + activityIndicator.top);
   	activityIndicator.top = 10;
   	Ti.API.info("*********************** activityIndicator.getTop() = " + activityIndicator.getTop());
   });
   
   var b3_2 = Ti.UI.createButton({
   	title : "top=50",
   	top : buttonTop + buttonHeight * 2,
   	left : buttonLeft + buttonWidth,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b3_2.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.top = " + activityIndicator.top);
   	activityIndicator.top = 50;
   	Ti.API.info("*********************** activityIndicator.top = " + activityIndicator.top);
   });
   
   var b3_3 = Ti.UI.createButton({
   	title : "left=10",
   	top : buttonTop + buttonHeight * 2,
   	left : buttonLeft + buttonWidth * 2,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b3_3.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.left = " + activityIndicator.left);
   	activityIndicator.left = 10;
   	Ti.API.info("*********************** activityIndicator.left = " + activityIndicator.left);
   });
   
   var b3_4 = Ti.UI.createButton({
   	title : "left=50",
   	top : buttonTop + buttonHeight * 2,
   	left : buttonLeft + buttonWidth * 3,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b3_4.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.left = " + activityIndicator.left);
   	activityIndicator.left = 50;
   	Ti.API.info("*********************** activityIndicator.left = " + activityIndicator.left);
   });
   
   var b4_1 = Ti.UI.createButton({
   	title : "style=PLAIN",
   	top : buttonTop + buttonHeight * 3,
   	left : buttonLeft,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b4_1.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.top = " + activityIndicator.top);
   	activityIndicator.style = style1;
   	Ti.API.info("*********************** activityIndicator.top = " + activityIndicator.top);
   });
   
   var b4_2 = Ti.UI.createButton({
   	title : "style=BIG",
   	top : buttonTop + buttonHeight * 3,
   	left : buttonLeft + buttonWidth,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b4_2.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.top = " + activityIndicator.top);
   	activityIndicator.style = style2;
   	Ti.API.info("*********************** activityIndicator.top = " + activityIndicator.top);
   });
   
   var b4_3 = Ti.UI.createButton({
   	title : "style=DARK",
   	top : buttonTop + buttonHeight * 3,
   	left : buttonLeft + buttonWidth * 2,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b4_3.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.left = " + activityIndicator.left);
   	activityIndicator.style = style3;
   	Ti.API.info("*********************** activityIndicator.left = " + activityIndicator.left);
   });
   
   var b4_4 = Ti.UI.createButton({
   	title : "style=BIG_DARK",
   	top : buttonTop + buttonHeight * 3,
   	left : buttonLeft + buttonWidth * 3,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b4_4.addEventListener("click", function() {
   	Ti.API.info("*********************** activityIndicator.left = " + activityIndicator.left);
   	activityIndicator.style = style4;
   	Ti.API.info("*********************** activityIndicator.left = " + activityIndicator.left);
   });
   
   var b5_1 = Ti.UI.createButton({
   	title : "hide",
   	top : buttonTop + buttonHeight * 4,
   	left : buttonLeft,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b5_1.addEventListener("click", function() {
   	activityIndicator.hide();
   });
   
   var b5_2 = Ti.UI.createButton({
   	title : "show",
   	top : buttonTop + buttonHeight * 4,
   	left : buttonLeft + buttonWidth,
   	width : buttonWidth,
   	height : buttonHeight
   });
   b5_2.addEventListener("click", function() {
   	activityIndicator.show();
   });
   
   win.add(activityIndicator);
   activityIndicator.show();
   
   win.add(b1_1);
   win.add(b1_2);
   win.add(b1_3);
   win.add(b1_4);
   win.add(b2_1);
   win.add(b2_2);
   win.add(b3_1);
   win.add(b3_2);
   win.add(b3_3);
   win.add(b3_4);
   win.add(b4_1);
   win.add(b4_2);
   win.add(b4_3);
   if (Ti.Platform.name != 'iPhone OS') {
   	win.add(b4_4);
   }
   win.add(b5_1);
   win.add(b5_2);
   
   win.open();

Test case for Progress Indicator:

   var win = Ti.UI.createWindow({
   	backgroundColor : 'blue'
   });
   
   var progressIndicator_statusbar1 = Ti.UI.Android.createProgressIndicator({
   	message : 'Loading...',
   	location: Ti.UI.Android.PROGRESS_INDICATOR_STATUS_BAR,
   	type: Ti.UI.Android.PROGRESS_INDICATOR_INDETERMINANT
   });
   
   var progressIndicator_statusbar2 = Ti.UI.Android.createProgressIndicator({
   	message : 'Loading...',
   	location: Ti.UI.Android.PROGRESS_INDICATOR_STATUS_BAR,
   	type: Ti.UI.Android.PROGRESS_INDICATOR_DETERMINANT,
   	min: 0,
   	max: 10,
   });
   
   var progressIndicator_dialog1 = Ti.UI.Android.createProgressIndicator({
   	message : 'Loading...',
   	location: Ti.UI.Android.PROGRESS_INDICATOR_DIALOG,
   	type: Ti.UI.Android.PROGRESS_INDICATOR_INDETERMINANT,
   	cancelable: true
   });
   
   var progressIndicator_dialog2 = 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
   });
   
   var b1 = Ti.UI.createButton({
   	title: "status bar, indeterminant",
   	top: 10
   });
   b1.addEventListener('click', function(){
   	progressIndicator_statusbar1.show();
   	setTimeout(function(){
   		progressIndicator_statusbar1.hide();
   	}, 3000);
   });
   
   var b2 = Ti.UI.createButton({
   	title: "status bar, determinant",
   	top: 110
   });
   b2.addEventListener('click', function(){
   	progressIndicator_statusbar2.show();
   	var value = 0;
   	setInterval(function(){
   		if (value > 10) {
   			return;
   		}
   		progressIndicator_statusbar2.value = value;
   		value ++;
   	}, 100);
   	setTimeout(function(){
   		progressIndicator_statusbar2.hide();
   	}, 3000);
   });
   
   var b3 = Ti.UI.createButton({
   	title: "dialog, indeterminant",
   	top: 210
   });
   b3.addEventListener('click', function(){
   	progressIndicator_dialog1.show();
   	setTimeout(function(){
   		progressIndicator_dialog1.hide();
   	}, 3000);
   });
   
   var b4 = Ti.UI.createButton({
   	title: "dialog, determinant",
   	top: 310
   });
   b4.addEventListener('click', function(){
   	progressIndicator_dialog2.show();
   	var value = 0;
   	setInterval(function(){
   		if (value > 10) {
   			return;
   		}
   		progressIndicator_dialog2.value = value;
   		value ++;
   	}, 100);
   	setTimeout(function(){
   		progressIndicator_dialog2.hide();
   	}, 3000);
   });
   
   win.add(b1);
   win.add(b2);
   win.add(b3);
   win.add(b4);
   
   win.open();

Ping Wang 2012-08-10

PR https://github.com/appcelerator/titanium_mobile/pull/2693
Rima Umbrasas 2012-08-13

Verified fixed with mobile sdk-2.2.0.v20120810080115 Titanium Studio, build: 2.1.1.201207271312 Device: Galaxy S III Android version 4.0.4

JSON Source