Masabi » Android

Life of Android App of the Week: Trainline Tickets

edhowson — Tue, 17 May 2011 12:50:08 +0000

Our app for thetrainline.com is App of the Week on Life of Android. Life of Android is a site dedicated to news and reviews of Android apps. The App of the Week section also includes an excellent video review:

Experiences Rapidly Porting J2ME Apps to Android

Tom Godber — Wed, 15 Dec 2010 12:43:51 +0000

Masabi has a fully integrated Android app launching early next year, with a UI carefully crafted to fit the current best interface guidelines for the platform, adapting to different device form factors (just as we do with our MIDP apps) and integrating into the OS and other apps using carefully designed intents, content providers etc.
We have always believed in tailoring an app’s UI to the platform, following the expectations of the user rather than seeking a consistent brand experience across devices – because the user only uses the app on one platform and is entirely geared to understanding how their own phone works. Any app that breaks those conventions risks annoyance by being awkward to use.

However, with Christmas rapidly approaching, and our BlackBerry and Nokia apps proving extremely popular, we realised it made sense to offer a high quality interim Android app to meet the immediate needs of this rapidly growing user base.

While it would lack the complete integration of our native Android app launching in a month or so it was essential that the app provide a simple, quick, attractive and above all user friendly means for looking up train times and buying tickets. But how could this be done?

MicroEmu To The Rescue

If you have a working touch-screen app in MIDP, it is remarkably easy these days to get that code running on Android – it’s by no means a standard “Android app”, but it is an app that users can use and as an interim measure that can be very attractive.

This is achieved using an automated Jar-to-APK conversion tool built into the open source MicroEmu project. The steps for a basic conversion go something like this:

Check out the entire microemu project from Subversion: http://microemu.googlecode.com/svn/trunk/microemulator
Build the entire microemu project using Maven – for me, this worked from the command line (default target – so just type “mvn” in the root), but did not work from the Eclipse M2 plugin (no idea why…)
Point the microemu-android/build.xml Ant file at your jad and jar, and run the package-apk target.

At this point, you should be able to install the APK through a cable (eg. using HTC Sync on a Desire) or via e-mail or a web server. Remember that you may need to visit the Settings app, go to the Applications section and check “Unknown sources – allow installation of non-Market applications”:

Picking The Right MIDP Jar

Our Nokia and Blackberry MIDP app runs using our own custom application framework inside a Canvas, which brings advantages and disadvantages. Therefore converting LCDUI components using MicroEmu was a new approach; however, if you have your own Canvas based framework here are the considerations for making the conversion work well:

Touch-screen enabled, working a lot like Android’s UI (and other modern touch interfaces)
- Don’t show “soft key” style buttons in the footer (as used eg. in Symbian^3).
Back actions should be triggered by MIDP physical key code -4
- Don’t use an on-screen touch button.
Accept QWERTY keypresses in the normal way
- Physical key codes are the key character’s ASCII/UTF-8 value.
Accept Up/Down/Left/Right keypresses using Canvas.UP, etc key codes;
Optionally, trigger any Search features using the Search physical key code -84;
Optimise graphics for screens ranging between 320×480 and 480×800.

Tidying Up The Conversion

The basic conversion introduces a number of compromises, which we solved by forking our local copy of MicroEmu. We opted not to push these back to the original project because the changes we made were simply to allow us to launch a specific app in a short timeframe, rather than being fixes of wider benefit to the community. Issues we encountered included:

Tweaking font sizes to match our layouts;
Turning off anti-aliassing in AndroidDisplayGraphics
- setAntiAlias to false instead of true wherever possible;
- If anti-aliassing is on then a number of MIDP graphics techniques – eg. drawing adjacent lines to create graduated fills – fail, ending up looking very blurry and semi transparent
The screen buffer now uses an ARGB_8888 Bitmap instead of an RGB_565
- This increases the colour depth, and leads to nicer looking graphics;
- For this depth to then make it onto the screen, it proved essential to turn on dithering on the CanvasView inner class of the AndroidCanvasUI.
AndroidDisplayGraphics was adjusted to honour an alpha channel set using setColor
- getColor always masks off alpha channel;
- This allows us to plot semi-transparent features on the screen, without resorting to PNG24 images.
Screen rotation was turned off by fixing the app to portrait orientation in the manifest
- MicroEmu interacted very badly with the MIDP Canvas.sizeChanged event method, and it was easier to turn rotation off then fix the bug.

Compromises

The key compromise is that resource loading bypasses Android’s own rather nice versatile resource loading system which would usually load appropriately sized resources for you.

In our case, this meant that we had to drop support for “small” Android screens – anything around the QVGA mark – because images that looked good on “normal” and “large” screens totally failed to work nicely on small screens. As of August 2010, these two supported screen sizes cover well over 90% of Android handsets, though as Android devices are pushed into the cheaper end of the market the share of small screens will grow. We will support the remaining segments of the market with our future full Android application.

Needless to say our preference is for native apps and this is ultimately what we will always deliver. However, this exercise has illustrated that it is perfectly possible to develop highly compelling Android apps in a timely manner based on ports from different platforms. Undoubtedly there will be some die-hard Android users who love native apps and their unique UI features (this most certainly includes us!) but if you want to deliver a great looking app that’s highly user friendly based on a different platform it’s clearly achievable if the right steps are taken.

Funding Your Startup slides from Android Developer Evening @TechHub

Tom Godber — Fri, 01 Oct 2010 12:13:01 +0000

Ben’s slides from the Android Developer Evening given a few weeks back at Old St’s TechHub:

View more presentations from Masabi Ltd.

Ticketing via Local Webapps

Tom Godber — Fri, 31 Jul 2009 16:27:00 +0000

We’re finally able to show off some of the work we’ve been doing recently on local mobile webapps – interactive web pages which can be saved and run even when you’re offline.

Our mobile ticket sales app is now available as a local Java app for mass market handsets, and a local webapp for Android and iPhone – offering all the same functionality, security and slick branding:

What Is A Local Webapp?

With the latest HTML 5 and Google Gears APIs support on Android, iPhone and Palm Pre, you can provide a fast multi-screen interactive app with local storage (to store tickets you have purchased), which behaves like a native local app and is accessible even when the phone is offline. Here’s how to store the app for later use on an iPhone – reached by clicking on the ‘+’ icon in the footer:

Why Webapps?

Traditionally at Masabi we have always written local apps in Java, because they offer the best mass market user experience for the sort of ticketing and financial services we provide; it’s only with the advent of handsets with fast, HTML 5-capable browsers that we have been able to explore the webapp route. We plan to use local webapps for many of our iPhone and Android products for two core reasons:

With the proliferation of new platforms causing even more fragmentation in the mobile apps space, the Safari browser used on both platforms is actually the safest way to reduce fragmentation and streamline maintenance and development;
There are some big advantages to the unrestricted installation of a webapp via the web, especially if your business model is not compatible with the rules or revenue shares of the relevant App Store; it can be hard to justify to a customer the extra expense of a dedicated app when you cannot guarantee the app will ever be allowed on the store or device.

Fortunately, it is easy to take a local webapp and wrap it up as a native iPhone or Android app, so we can make all of the services available through the relevant App Stores as well if that is what the users want.

It is worth noting that at Masabi we are producing free mass market services which pay for themselves through transaction fees, so the App Store’s billing system isn’t an issue for us – your mileage may vary…

Does It Feel Like A Normal App?

Webapps can very successfully replicate the look and feel of native apps, with quick scrolling between screens, button styles and the like.
Below are screenshots of the user selecting an option from a list, and a date from the calendar:

These clearly follow the style and usability conventions of the built-in iPhone apps. With CSS targetted to the device through our DeployME server, we reskin the same application easily to adopt Android conventions and styling as well.