Building an iOS and Android conference App with Appcelerator

Conference app

The following blog post was originally published on

When I set out to write my book Build native cross-platform apps with Appcelerator, I spent a somewhat large chunk of the time thinking about which apps I could build that not only showcase the capabilities of Titanium and Alloy as a native cross-platform framework, but that could also be useful in a real-life scenario.

Some years ago, I was involved in organizing, or participated at Wordcamps, Barcamps and meet-ups of all kinds. This type of events happen all the time, but not everyone has access to build a full-blown app for a them. This got me thinking: there’s no good, cross-platform template or example for a conference app. I should build one!

This app could become very complex in no time, so I needed to manage my expectations; I needed to pick the features that were absolutely necessary for ANY conference or meet-up, and provide a solid foundation for anyone to build on top of. I settled for:

  1. Event schedule with support for multiple days, concurrent talks and speaker bio
  2. Information about the venue with integration with the device’s map
  3. An area for reading the conversation happening on Twitter based on a given hashtag
  4. A link for YouTube videos that could be used to provide both pre-event videos, as well as post-event videos, making the app useful even after the date of the event

Having settled on the features for this app, I then had to think about UI/UX. I wanted to build this app with three things in mind:

  1. Use only native components, the same way you’d build this if you were using Objective-C and Java
  2. Keep a singe organized, maintainable and extensible codebase
  3. Add support for localization: if you install the app on a device using Spanish as its default language, the app will be displayed in Spanish

I did some research, specially looking at the apps for the WWDC and Google I/O, and my real challenge was to be able to build an app that uses the native UI/UX conventions of each platform, even if these were different. I’m happy to share with you the results screen by screen.

The Main container

I decided to use a Tab-based interface. At one point I was tempted to use a Slide-in menu, but there weren’t that many menu options, and quite honestly, you shouldn’t use a visual paradigm just because it’s hot and everyone’s using it: there needs to be a real reason for it, and in this case Tabs worked perfectly. Also notice on the screenshots below that I’m representing the Tabs differently on Android, using only images and no text. While on iOS tabs have an image with text underneath, Android allows you to use text-only, text and image, or image only. I chose the latter.

The Schedule Tab

This screen was particularly interesting. In order to provide an easy in-tab navigation, I decided to use iOS’ segmented control, exposed in Titanium by the TabbedBar object. On Android however, the equivalent control is the ViewPager. The ViewPager is not part of the Titanium core, but fear not, there’s a module for that, which you can find at


The syntax for using the module is really easy:

var tabs = require('com.navid.tabs');
var tabs = tabs.createPagerTabs({
    current: 0,
    tab: {
        indicatorColor      : Alloy.Globals.viewPager.indicatorColor,
        backgroundColor     : Alloy.Globals.viewPager.backgroundColor,
        alignment           : tabs.ALIGNMENT_LEFT,
        shouldExpand        : true,
        color               : Alloy.Globals.viewPager.color,
        upperCase           : Alloy.Globals.viewPager.upperCase
    views: [
            title: L("day1_caption"),
            view: Alloy.createController('day1').getView()
            title: L("day2_caption"),
            view: Alloy.createController('day2').getView()
            title: L("day3_caption"),
            view: Alloy.createController('day3').getView()

The Venue Tab

This tab was really straight-forward. For opening the maps app and the dialer, Titanium has the openURL function. If you send a phone number to this function, the phone will automatically open the dialer with this number. If you on the other hand specify a URL to a Google Maps page, the phone will automatically open the Maps app (if it’s installed), otherwise will open a browser in the specified url.


The Conversation Tab

The conversation Tab is pulling data from Twitter. To achieve this, I’m using the codebird.js library for Twitter. This library was designed for the browser, but there’s a version modified to work with Titanium and using Titanium’s HTTP network calls.


I didn’t want to get into pull-to-refresh just to keep the code simple, but there’s an Alloy Widget that could be very easily integrated.

The Videos Tab

The videos Tab is very similar to the previous one, but this time pulling data from Youtube. For YouTube you don’t need a special library. Youtube exposes data via an HTTP interface, so in this case I’m simply calling, parsing the response and displaying it as a vertical list.

Honorable mention goes to, an awesome online tool for analyzing JSON data.


There’s a lot to building this app, practically impossible to explain in a single blog post. In fact, my original plan was to explain the app in Chapter 4, and I had to split it into three chapters:

  • Chapter 4 about building the foundation for the app, adding localization support and working with Android ActionBar Styles
  • Chapter 5 about using local databases for the Schedule Tab, explained using three different techniques: Persistent Properties, SQLite and Alloy Models
  • Chapter 6 for Web Services and YouTube integration.

I’m extremely happy with the outcome. If you thought that Titanium-based apps could not deliver native UI and UX from a single code-base, here’s your proof. I’m sure that not only this app is an excellent example of how the cross-platform problem should be approached with Titanium, but also contains many interesting pieces that will be useful for other apps.


  1. Hi Ricardo,

    I’m glad to see that someone is writing a book specifically about Alloy. I just started learning Appcelerator a few months ago and I’ve been frustrated with the lack of Alloy training materials. It seems most of the books out there are solely about the “old way” of building apps with Titanium.

    The Appcelerator Wiki is actually pretty light on Alloy samples. The best thing I found was the TCD Training repository on GitHub. It has the instructor’s notes (as HTML docs) and some sample applications. Before your book, the most complete Alloy sample I found was the AlloyHunter sample in that repository.

    I think your app looks good visually, and the links for the modules are very helpful. I’ll definitely check out the modules you recommended and I’ll look at your book again when it’s done.

    One suggestion – You may want to add a unique logo and startup screen to your app as one of your tutorials. BTW, I recently ran across a website called Ticons ( which saved me a ton of time with that. I was dreading the task of creating all of the image variations with PhotoShop, then I ran across that tool. It was a huge time-saver. There is also an NPM installer for Ticons to generate icons on your local machine.

    I was wondering: Are you going to open-source your final code on GitHub? That would be a terrific contribution to the community.


  2. Hi Ricardo,

    i would appreciate, too to see the whole source.
    This looks very great and could be helpful for many scenarios.

    Greetings from Cologne and many thanks for this post!

  3. Are you planning on releasing the source for this app now that the book does not appear to be coming out?

Comments are closed.