Creating image sprites

Themes contain several elements that you cannot create a single static image for. Some images must display different levels or states. For example, the battery meter displays how much power remains in the battery. The image for the battery meter must display the battery power levels from 100% power to 0% power. The image must also show the increase in the battery power level as the battery charges. In addition, you must include an image for cases when the BlackBerry device is unable to determine the battery power level.

Instead of specifying a separate image for each state, BlackBerry Theme Builder handles these elements using image sprites. Sprite images are images that are made up of a number of component images that depict every possible state of an element.

To construct a sprite image, you must first know the layout of the component images. Each sprite has a specific layout that you must adhere to so that the BlackBerry device can correctly display the component images.

Although the layout of the component images within the sprite is predefined, the component images themselves can be any dimension, as long as each of the component images has the same height and width. To determine the correct dimensions for each component image, the Theme Builder takes the total dimensions of the image sprite and divides the width by the number of images in each row, and divides the height by the number of rows. For example, the sprite image for the wireless coverage indicator is made up of a single row of nine component images. Therefore, if the sprite image is 180 x 10 pixels, then the size of each component image is 20 x 10 pixels.

Image sprites for the banner

Element

Component images

Description

battery power indicator

36

This image sprite includes two rows of 12 equal-sized images. The composite image must include the following component images:
  • First row: 12 images that represent the battery power level from 0% to 100% from left to right in 10% increments, and one image for unknown battery status.
  • Second row: 12 images that represent the battery charging, from 0% to 100% from left to right in 10% increments, and one image for unknown battery status.
  • Third row: 11 images that represent the battery charging while plugged in, from 0% to 100% from left to right in 10% increments, and one image for unknown battery status.

Example:

wireless coverage indicator

9

This image sprite includes one row of 9 equal-sized images. The composite image must include the following component images from left to right:
  • wireless network off
  • wireless network unavailable
  • wireless network available (6 images, representing signal strength from 0 signal bars to 5 signal bars)
  • wireless network status unknown

Example:

unread icons

10

This image sprite includes one row of 10 equal-sized images that are displayed in the banner, indicating that there is an unread message associated with a BlackBerry device application. The composite image must include the following component images, from left to right:

  • email message
  • filed email message
  • voice mail message
  • saved web page request
  • calendar reminder
  • BlackBerry Messenger message
  • SMS text message
  • anonymous message
  • task reminder
  • push channel update

Example:

Image sprites for the message list

Element

Component images

Description

message icons

96

This image sprite includes four rows of 24 equal-sized images that represent all possible message types that the message list can display. The message list can contain messages of three types: email messages, SMS text messages, and MMS messages. The composite image must include the following component images, from left to right:
  • First row: empty slot, 3 images for incoming email messages (unread, read, error), 9 images for outgoing email message (composing, compressing, encrypting, completing, sending, sent, delivered, read acknowledged, and transmission error), 2 images for filed email messages (unread and read), empty slot, empty slot, 2 images for ring tone for incoming calls (unplayed and played), 2 images for incoming pager messages (unopened and opened), 2 images for messages with attachments (unread, read), 2 images for calendar reminders (unread and read), and 1 image for download attachment
  • Second row: empty slot, 3 images for incoming SMS text messages (unread, read, and error), 9 images for outgoing SMS text messages (composing, compressing, encrypting, completing, sending, sent, delivered, read acknowledged, and transmission error), 2 images for filed SMS text messages (unread and read), followed by 9 empty slots
  • Third row: empty slot, 2 images for incoming security messages (unread and read), empty slot, 2 images for incoming signed read receipt (unread and read), followed by 18 empty slots
  • Fourth row: empty slot, 3 images for incoming MMS messages (unread, read, and error), 9 images for outgoing MMS messages (composing, compressing, encrypting, completing, sending, sent, delivered, read acknowledged, and transmission error), 2 images for filed MMS messages (unread and read), followed by 9 empty slots

Example:

web icons

6

This image sprite includes one row of 6 equal-sized images, representing all the possible browser-related messages that appear in the messages list. The composite image must include the following component images, from left to right:
  • page request sending
  • page request pending
  • page request returned and unviewed
  • page request returned and viewed
  • error receiving page request
  • more options available

Example:

Image sprites for the phone screens

Element

Component images

Description

Phone (active call)

varied

This composite image must include a row of equal-sized component images to represent the different phone states.

Example:

The following BlackBerry® devices support 7 phone states:

  • BlackBerry® Pearl™ 8100 Series smartphone

The following BlackBerry devices support 11 phone states:

  • BlackBerry® Torch™ 9800 smartphone

  • BlackBerry® Bold™ 9700 smartphone

  • BlackBerry® Tour™ 9600 Series smartphone

  • BlackBerry® Storm™ 9500 smartphone

  • BlackBerry® Pearl™ 9100 Series smartphone

  • BlackBerry® Bold™ 9000 smart phone

  • BlackBerry® Curve™ 8900 smartphone

  • BlackBerry® Pearl™ Flip 8200 Series smartphone

The following BlackBerry devices support 13 phone states:

  • BlackBerry® 8800 Series smartphone

  • BlackBerry® 8700 Series smartphone

  • BlackBerry® Curve™ 8500 Series smartphone

  • BlackBerry® Curve™ 8350i smartphone

  • BlackBerry® Curve™ 8300 Series smartphone

Phone volume (active call)

11

This composite image must include a row of 11 images to represent the volume level.

Example:

Phone icons

18

This image sprites include a row of equal-sized component images to represent the different phone hotlist icons, such as incoming call, outgoing call, conference call, and call forwarding icons.

Example: