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:
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.
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!