Building the FlightTrack UI on BlackBerry

Similar to the Android environment, BlackBerry devices have a variety of screen sizes. The many sizes, resolutions and aspect ratios of the various BlackBerry devices made it difficult for us to bring the luxe, pixel-perfect FlightTrack experience to BlackBerry. The essential question we were dealing with was this: How do we build the user interface so that it looks great on all those different screens without having to build a unique version for each one?

There are many patterns and techniques for developing for various screen sizes. The BlackBerry SDK itself guides the developer toward a relative-position design (e.g. put this text to the right of this image) instead of a fixed-position design (e.g. put this text 50 pixels from the left edge of the screen). Unfortunately, when it comes to graphics, the relative positioning becomes a much bigger challenge. An image that is 100 pixels wide is 100 pixels wide on every screen. That means that an image that might appear to be 1 inch wide and take up one third of the screen width on one device might appear as just a half-inch wide and take up one quarter of the screen width on another device. This makes things difficult when you are trying to use an image as the background for a button or other component containing data. The developer has two basic choices: either use simple colors and gradients that are built-in to the OS, or create multiple versions of the image that will work on the multiple device screens. Neither of these solutions is ideal.

The Android operating system has solved this problem by using a technique called the nine-patch image. You can check out Google’s explanation, but the basic idea is that you can define both stretchy and static regions in your image so that it can be stretched to fit the contents in a way that makes sense, rather than blindly stretching every pixel of the image equally.

Let’s take a look at an example, inspired by the example in a tutorial by MobileAppDev. Say you have a button with a gradient and rounded corners:

Then, you need to stretch it vertically to fit the contents in a specific situation. If you did this blindly, the corner radius gets distorted as well as the line widths and the result is not very pretty:

What we really want is for the corners to stay as drawn and have the “middle” of the button stretched such that it does not get distorted. To do this, we can define nine sections or “patches” in the image (hence the name nine-patch). These patches indicate which parts of the image stay the same and which stretch as it is resized. So, our nine-patch image looks like this when we do the exact same stretch:

A cool idea, but unfortunately I could not find any publicly available library to handle these nine-patch images on the BlackBerry platform.

In designing the user interface for FlightTrack 4.0 on BlackBerry, our designer Chris and I decided that we needed to have some way to have these intelligently stretching graphics in order to make the user interface as beautiful and scalable as it needed to be. With no library available, I decided to build one. I used the same image format defined for the Android platform since Chris already had experience designing and building nine-patch images for Android. In less than a day, I had a working implementation of a nine-patch image on BlackBerry. It scaled properly and it looked great!

As we progressed in developing the user interface for FlightTrack 4.0 for BlackBerry, it became clear that my initial implementation of the nine-patch image was not going to work. While it gave the desired end result, it was far too slow to be acceptable. The software was spending far too much time rendering images, leading to slow scrolling and screen transitions and an overall sluggish user experience. The realization that the majority of the time the same image was being rendered over and over again at the exact same size led me to a quick caching optimization that dramatically improved performance. I now had both the functionality and the performance that I needed to make the user interface work.

This screen from FlightTrack 4.0 for BlackBerry uses a dozen nine-patch images to accomplish a polished look that scales beautifully to all different sizes.

While the final implementation required some additional effort for tweaking and fixing, I found the effort well worth the benefits. Using nine-patch images was critical to my ability to turn Chris’ awesome design into reality and make it look great on all of the different devices that we support.

In the hopes that others will find a public nine-patch image implementation for BlackBerry as valuable as we have, Mobiata is proud to announce the release of this code at: https://github.com/mobiata/BlackBerry-NinePatch

The implementation is not comprehensive, but it is a great start and it is working perfectly for us. If you make improvements, let us know! We would love to see this expanded to a more robust library for use by all the BlackBerry developers out there!