In this series of tutorials we use Appcelerator’s Titanium Mobile platform to create Android applications. This tutorial walks you through developing and packaging a soundboard application. 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

A soundboard application lists and plays quotes from movies, games or people. Our soundboard will play quotes from the Zealot, Immortal and Stalker units from Starcraft2.

Directory Structure

The User Interface

The user interface is made up of several instances of the Titanium view elements Window and TableView. The home screen lists the names of different units that can play sounds. When the unit name is clicked we create a new instance of Window which is then populated with the appropriate view (If the user clicked on Immortal then the new window would load v/immortal.js).

UI code of app.js

var data = [

	{title: 'Immortal', view: 'v/immortal.js'},
	{title: 'Stalker', view: 'v/stalker.js'},
	{title: 'Zealot', view: 'v/zealot.js'},

];

var window = Titanium.UI.createWindow({

	title: 'Query7 SC2 Soundboard',
	backgroundColor:'#000',
	exitOnClose: true,

});

var tableView = Titanium.UI.createTableView({
	data: data,
	headerTitle: 'Query7 SC2 SoundBoard',
	});

window.add(tableView);
win.open();

Click Events

When the name of a unit is clicked, we want to open a new Titanium Window View and populate it with a TableView that shows the quotes from the appropriate unit. In the code below we listen for click events on the main TableView. If a row is clicked, then we open a new Window and pass the url parameter. This will set the contents of the new Window to whatever is in the source of the passed argument. In this case we specified in the array data an attribute called view which holds the path to the javascript file for each individual unit.

Event code of app.js

tableView.addEventListener('click', function(e)
{

	var win = Titanium.UI.createWindow({
		url: e.rowData.view,
		title: e.rowData.title,
		navBarHidden: true,
		exitOnClose: false,
	});

	win.open();

});

Individual Unit Pages

Each unit will have it’s own view script located in the v (for view) directory. Each script contains a definition of the TableView that shows the quotes the units can say.
UI code of v/immortal.js

var win = Titanium.UI.currentWindow;

var data = [

	{title: 'For the ancients', file: 'sound_immortal_atk_1.mp3'},
	{title: 'The cycle is unchanging', file: 'sound_immortal_death_1.mp3'},
	{title: 'The enemy closes', file: 'sound_immortal_help_1.mp3'},
	{title: 'I return to serve', file: 'sound_immortal_ready_1.mp3'},
	{title: 'The battle is ours', file: 'sound_immortal_victory_2.mp3'},
	{title: 'Our cannons shall sing', file: 'sound_immortal_yesg1.mp3'},

];

var tableView = Titanium.UI.createTableView({

	data: data,
	headerTitle: 'Immortal',

});

win.add(tableView);

Playing Music

Whenever an item on an Individual Unit Page is clicked we want to play the appropriate sound file. We store the location of the mp3 file in the data array.

tableView.addEventListener('click', function (e){

	var sound = Titanium.Media.createSound();

	sound.url = '../mp3/' + e.rowData.file;

	sound.play();

});

Packaging

Now all we need to do is package our application into a .apk file so that it can be distributed among Android devices. We need to generate a key to sign our Android app. Run the command below in the MSDOS prompt. You will be asked some additional information such as your name or country. None of it is really important unless you intend to put this app on the Android Market. Remember the KEYALIASNAME and password you set as Titanium requires you enter them.

keytool -genkey -v -keystore KEYSTORENAME -alias KEYALIASNAME -keyalg RSA -validity 11000

After clicking package Titanium will compile your app into .apk format. From there you can put it on your phone’s SD card and install it. If you intend to publish an app you create onto the Android Market then be sure to give this and this a good read.

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