Thursday, November 30, 2006

How do I create a color icon for my application ?

Note that this article was written in the year 2000, for Palm OS 3.5, which did not include direct color, nor support for higher density screens. This article is still accurate; however, there are more possible members in the bitmap family for direct color bitmaps and higher densities. Make sure you use the most recent version of Constructor or PilRC, and see if your IDE came with starter projects which include a pre-configured and complete set of icons.

You can use the most recent Constructor versions to create color icons. This article provides step-by-step instructions for Constructor. However, you can use any of several other development tools as alternatives, if you wish. For example:

  • PalmRI is a tool running on DOS and Windows, which takes a .prc or .pdb and adds images directly (.bmp, .gif, .jpg, .ico, .emf, or .wmf).
  • Many other developers use PILRC to create their UI resources. This tool now allows creation of color icons and bitmaps and is more integrated into the gcc toolset than the other tools are.

To create color icons with Constructor, follow these steps:

1. Make sure you are using the most recent version of CodeWarrior and Constructor. If you have CodeWarrior for Palm OS r7 or higher, that will suffice.

2. Remove any old icons from your project, so you don't confuse things by having duplicate objects.

3. In Constructor, create a new App Icon Family in your project resource file, with ID 1000, by clicking on "App Icon Families" and pressing Control-K. Select the ID if it isn't already 1000, and set it to 1000 because that's the ID you must use for the large application icon.

4. Double-click on the new App Icon Family you created. Specify a width and height of 32 pixels, then click where it says "Family Items" and press Control-K twice.

5. Set the first family member to be a one-bit depth icon, no transparency, no compression, and then make up a new bitmap ID (a typical ID for this icon is 1001.)

6. In the second family member, set its depth to 8 bit, with transparency, then choose a color to be the transparent color (for example, the bright green one near the bottom left corner), turn off compression, and then make up a new bitmap ID (for example, 1008.)

7. Click the "Create" button for the first (black and white) family member. The dialog that comes up lets you edit that icon. (Its title bar says "Bitmap ID 1001"; that's correct.)

8. Go to the Options menu and select "Set Image Size." Specify 32 by 32 and click "Resize."

9. Go to the Colors menu and select "Black & White (1-bit depth)."

10. Draw your icon. Even though the window is 32 by 32, you should only use the top 22 pixels, and your drawing should be no wider than 22 pixels, centered horizontally in the window. This is not strictly necessary unless you want to maintain compatibility with all versions of Palm OS and all the known application launching programs. 22x22 is the "proper" size, but using 32x32 and centering horizontally but not vertically makes it work everywhere, at the expense of a few extra bytes in your icons.

11. When you're done with your black and white icon, repeat the process for the 8-bit version. (Click "Create," set the size to 32x32 and the color depth to 8, and draw.) It saves time to copy the black and white icon's data into the color icon, and then adjust the colors to look right.

12. To create the small application icons, do the same except create an App Icon Family with id 1001 and new IDs for the icons for the 1-bit and 8-bit bitmaps (for example, 1011 and 1018), and set the sizes to be 9 high by 15 wide.

Then save and build your project. If you end up with a generic application icon, make sure you're using ID 1000 and are using (minimally) the 3.5 SDK with CodeWarrior R6, or preferably something considerably newer.