In this series of tutorials we use Appcelerator’s Titanium Mobile platform to create Android applications. This tutorial walks you through developing and packaging an application which shows information about the device the app is running on. Full source and packaged application is available on github.

• Installation & setup of Titanium Mobile
• How to make your first Android application with Titanium Mobile
• How to make a Soundboard application with Titanium Mobile
• How to make a Device Information application with Titanium Mobile

The Application

The application will show the following pieces of information:

• Hardware name (HTC Desire, Samsung Galaxy)
• Free RAM
• Connection to the internet (Not connected, Wifi, Mobile)
• MAC Address
• CPU Architecture
• Android version

The User Interface

The user interface is made up of one Window and seven Labels.

The Application

The application displays many instances of Titanium’s Label class. We apply some basic styling such as the height of the label, distance from the top of the window, color and font size. We get all the system information we need through the Titanium.Platform and Titanium.Network classes. Note that if we didn’t set a top attribute on each label then they would all appear one on top of the other. After instantiating the Window and Labels we need to attach each label onto the instance of Window so that they are displayed. This is done using the add method on the instance of Window.

Resources/app.js

Titanium.UI.setBackgroundColor('#000');

var window = Titanium.UI.createWindow({
    title:'Query7 Device Information',
    backgroundColor:'#F3F1E9',
});

var label_title = Titanium.UI.createLabel({

    height:40,
    top:0,
    left:0,
    width: '100%',
    backgroundColor: '#3F464F',
    color: '#F3F1E9',
    textAlign: 'center',
    text: 'Query7 Device Information',

});

var label_platform_name = Titanium.UI.createLabel({

    height: 40,
    top:50,
    color: '#31363E',
    font: {fontSize:15},
    text: 'Device: ' + Titanium.Platform.model,

});

var label_memory_usage = Titanium.UI.createLabel({

    height:40,
    top:100,
    color: '#31363E',
    font: {fontSize:15},
    text: 'Free RAM: ' + Math.round(Titanium.Platform.availableMemory / 1024) + 'mb',

});

if(Titanium.Network.online)
{
    text_internet_status = 'Internet via ' + Titanium.Network.networkTypeName;
}
else
{
    text_internet_status = 'No Internet Access';
}

var label_internet_status = Titanium.UI.createLabel({

    height:40,
    top:150,
    color: '#31363E',
    font: {fontSize:15},
    text: text_internet_status,

});

var label_mac_address = Titanium.UI.createLabel({

    height:40,
    top:200,
    color: '#31363E',
    font: {fontSize:15},
    text: 'MAC Address: ' + Titanium.Platform.macaddress,

});

var label_cpu_info = Titanium.UI.createLabel({

     height:40,
     top:250,
    color: '#31363E',
    font: {fontSize:15},
    text: Titanium.Platform.ostype + ' CPU',

});

var label_version = Titanium.UI.createLabel({

    height:40,
    top:300,
    color: '#31363E',
    font: {fontSize:15},
    text: 'Android: ' + Titanium.Platform.version,

});

window.add(label_title);
window.add(label_platform_name);
window.add(label_memory_usage);
window.add(label_internet_status);
window.add(label_mac_address);
window.add(label_cpu_info);
window.add(label_version);

window.open();

Updating Free RAM

While our application is running the level of available memory will constantly be changing. We can easily update the level of Free RAM displayed in our application using the Javascript function setInterval(). As shown below, we reassign the text attribute of label_memory_usage (which was set above) every 120 milliseconds.

setInterval(function()
{
	label_memory_usage.text = 'Free RAM: ' + Math.round(Titanium.Platform.availableMemory / 1024) + 'mb'
},120);

Packaging

Every time you test your application in the Android emulator, a local unsigned package of your application is created. You can copy this .apk from path/to/app/build/android/bin/ directly on to your mobile device to see how your app handles. This is fully useable. However if you intend to publish your application onto the Android Market then read how to sign and package your application here.

If you have any comments, questions or requests for tutorials, please ask below.