Battery status display: 1. Graphic design

This is the first in a series of articles about a battery status display for mobile applications. Part 1 describes the visual design of the display.

Any time you're using a mobile device, there's always the nagging question, "How long before the battery runs out?"

[edit] Objectives

• Small graphic display suitable for use on a status bar
• No flicker display
• Display numeric per cent charged if available.
• Display remaining time if available
• Customizable warning display for low battery levels

[edit] Design

The control consists of three basic parts:

1. Battery image background and border
2. Variable % charged bar
3. Status text

That's a lot of images, and it may seem like overkill for such a simple function. What you need to keep in mind is that our goal is to present important information in a tiny but easy-to-understand form. The extra effort put into designing the graphics pays off quickly in the quality of the result.

The status display will be built as an image.

Whenever the control is updated, we'll build the image on an offscreen bitmap and only copy it to the screen only when it's complete. Normally the processing time wouldn't matter, but some mobile devices are pretty slow!

[edit] Creating the pictures

Because the battery display should be very small, I decided to use icon building techniques to create bitmap images instead of creating them dynamically at runtime.

I started with the marvelous tutorial, Icon battery (Online graphic design courses - CagedFlame.com). I made the control a bit taller and quite a bit wider than the one in the tutorial to leave enough room for the text.

Background images: Blue on light and dark backgrounds, green on light and dark backgrounds.

Charge images for light background (left) and dark background (right).

Once I had the basic battery+charge image, I created a second image optimized for use against a dark background. Then I separated the images into a background image and a charge image.

Then I used Photoshop's Adjust Colors dialog to create green versions of the controls, and both yellow and red versions of the charge bar. Once the control was working, I further tweaked the images and colors to work well with the target applications and platforms.

[edit] Colors It's a good idea to develop images for mobile applications using the GIF file format instead of JPG or PNG. You're probably doing development work on a bright desktop or laptop display, but the final application quite probably will run on a low-resolution, dim, limited device display. Using GIF format forces the images to use a limited color set. Remember that mobile devices are used indoors and outdoors, in sunlight and in the dark, so the colors may not be visible at all. It's a good idea to tweak the tones so that the display is perfectly clear in black and white.

That's a lot of images, and it may seem like overkill for such a simple function. What you need to keep in mind is that our goal is to present important information in a tiny but easy-to-understand form. The extra effort put into designing the graphics pays off quickly in the quality of the result.

Using a little extra disk space is a good tradeoff for saving processing time; the status display must never affect your application performance at all.

Besides, the approach used for this control is easily reused for more complex applications.

[edit] Displaying the text

The control is designed so that the text will just fit inside the image area. Depending on the background color, the text will be shown against a light or dark background, against a dark (blue, green, red) charge bar, or against a light (yellow) charge bar.

After looking at various alternatives, I finally decided to paint the text twice: once optimized for viewability on the charge bar, and once optimized for viewability on the background. The final control has highly visible text in white and/or black.

Part 2 of this article describes an implementation of the generic battery status control for .NET applications, using the full framework or the Compact Framework.