Wednesday, October 2, 2013

Android Module Development - Part 1

I plan to write series of blog posts about Android module development in Titanium. I wish to cover below topics in each week with clear example
  1. Understanding methods, properties, constants and module life cycle
  2. Using event listeners and callbacks in Module
  3. Converting native control into Titanium view
  4. Accessing module and app resources
  5. Using XML layouts in modules
This week I am going to explain about methods, properties, constants and module life cycle in Android module development. Before getting into this make sure we fulfil the following requirements

Environment Setup
  • Titanium SDK.
  • All of the prerequisites for developing Android applications.
  • Android NDK. Add an ANDROID_NDK environment variable pointing to the NDK folder.
  • Ant 1.7.1 or above must be installed and assigned in your system PATH, to build from the command line.
  • Eclipse and ADT can be used instead of or in addition to Ant.
  • gperf must be installed and assigned in your system PATH.
Refer Android Module Development Guide for environment setup.

Creating a sample Android Module

You can create a module using either CLI or Titanium Studio, Creating New Titanium Module  document explains more about this.

Okay, cool. Now you have setup the module development environment and created a module. Now you can see following files inside yours module’s res folder(module_root/res). Let assume that your module name is demo
  2. - (this is used to return view from module)
Module Life-cycle Events

If you want to do anything during application startup, you can use onAppCreate method. This is optional method. It has @Kroll.onAppCreate annotation before its declaration
public static void onAppCreate(TiApplication app)
    Log.d(LCAT, "[MODULE LIFECYCLE EVENT] onAppCreate notification");


Inside module you can declare method by preceding with @Kroll.method  annotation.

In Module
//this method print the log message
public void printLog() {
   Log.d (TAG,"Hello world..." );

//this method concat two strings and return the result string
public String addStrings(String a, String b)
   return a.concat(b);
In Javascript
//in javascript you can access the method by
var demo = require("titutorial.demo");
demo.addStrings("Hello", "World");

We can set the properties for the module in two ways,
  1. Using custom getter and setter methods for each property
  2. Using propertyAccessors annotation
1. Using Custom Accessor Methods

Getter and setter methods are declared with @Kroll.getProperty and @Kroll.setProperty annotations. Here we need to specify the getter and setter methods for each property.
In module
@Kroll.getProperty @Kroll.method
public String getTag() {
 return tag;

@Kroll.setProperty @Kroll.method
public void setTag(String t) {
 tag = t;
In javascript
var demo = require("titutorial.demo");
//getting property value
alert(demo.tag);// or

//setting property value
demo.tag = "testing"; // or

2. Using propertyAccessors Annotation

You can also define a set of properties in your @Kroll.proxy or @Kroll.method annotation using the propertyAccessors element, and the accessors will be automatically generated for you:
// hintText and value prop declared using propertyAccessors 
@Kroll.module(name="Demo", id="titutorial.demo", propertyAccessors = { "hintText", "value" })

Constants are declared with @Kroll.constant annotation. Here's an example:
In module
public class DemoModule extends KrollModule {
    public static final int PAGE_LIMIT = 10;
In javascript
//constant can now be referred to directly from JavaScript
var demo = require("titutorial.demo");
Here you can find demo module source code

Continue with part 2


  1. Nice tutorial! Started some basic modules the other day too. This comes very handy! Looking forward for the next one

  2. Thanks Michael, here you go