The Custom Activity Indicator

The Custom Activity Indicator


The Custom Activity indicator for Android and iPhone was developed by Appcelerator titanium. This blog is about developing custom style activity indicator for Android and iPhone Appcelerator application using JavaScript.

The  picture given below shows the normal standard activity indicator. The developers can easily show activity indicator by using native mobile application code like (Xcode,ADT,…), but in this process we cannot access directly from cross mobile development environment. That’s a very difficult process within MVC format. The experimental method given below will work well for custom activity-indicator Android and iPhone.

For E.g:



Please follow the steps below given in JavaScript codes and use it in the application.


Create a new UI folder into the common and support folder and then create LoadingIndicator.js file. Now we can access the file from everywhere, and anytime into the studio. We should create file structure as shown in picture given below.

Picture 1:Screen Shot 2014-06-17 at 11.41.40 am


Create a main window with function.

 STEP 3:

Create a backgroundView on the main window.

 STEP 4:

Create a loadingView with background images.

 STEP 5:

Create a containerView to maintain all the view’s shapes. The container view’s width and height should be Ti.UI.SIZE.

 STEP 6:

Create a function “function osIndicatorStyle()” and write the conditions given below into the function.

 STEP 7:

Create Ti.UI.createActivityIndicator instead of calling the style to osIndicatorStyle function.

 STEP 8:

Create Ti.UI.createLabel for an activity indicator with text process.


Create two function one after another. “function openIndicator()” and function closeIndicator()”. Now we can control our custom activity indicator using this function.

 STEP 10:

Create another .js file (Second.js) and declare “LoadingIndicator.js” file path name at the top, and then apply on the new window. Create a main window for Second.js file with UIButton and use button ClickEventListner to call the method directly.

 Second.js file:

 NOTE: If we want to separate the loading option, we just have to put on the condition at the SecondView function top.


In this blog, we have discussed about custom activity indicator using JavaScript with appcelerator titanium and the different ways to show users that things are happening and activity indicator is occurring. Finally to conclude, if the users don’t understand that the things are happening behind the scenes, they might not find our app very intuitive or understandable.

Conclusion AI


5328 Views 9 Views Today