Creating a Custom Application Bar Icon
by kirupa |  26 September 2010

  Have questions? Discuss this Windows Phone tutorial with others on the forums.

One of the more prominent pieces of UI that makes up your Application Bar is the series of buttons and their icons housed under what is affectionately dubbed the ApplicationBarIconButton:

[ there one, two, three, four...ApplicaionBarIconButtons ]

Since most of us do not have icons that look similar to this handy, to help you out, the Windows Phone Developer Tools install a handful of icons that you can just use. You can find them here: {Program Files}\Microsoft SDKs\Windows Phone\v7.0\Icons

 To go even further in making life easy for you, if you use Expression Blend to customize your Application Bar, you will see these icons readily available for you to use in your project without having to do anything at all:

[ the sample icons are displayed already for you to use ]

While you may find the default icons to be great for what you are doing, you will undoubtedly find yourself wanting an icon that isn't automatically provided for you. In these cases, you have to find an icon from a 3rd party or create your own icon.

In this tutorial, I will help with the latter and show how you can use Adobe Fireworks to easily create your own ApplicationBarIconButton (called Application Bar Button from here on out) icon!

Getting Started
Make sure you have everything needed to get up and running with building Windows Phone applications. Once you have that setup, make sure you have Adobe Fireworks installed as well since you will need it to actually create your icon.

Brief Application Bar Icon Guidelines
Before we get into actually creating the icon, let's talk about some guidelines that you need to keep in mind when creating the icon:

  1. The icon's width and height must be 48 x 48 pixels with a DPI of 72.
  2. Your icon must have a transparent background.
  3. Your icon must be colored in white - no other colors are allowed.
  4. Do not add the circular border around your icon. That border is added for you by the OS itself.

For the above guidelines, some of them are enforced technically via the OS, and some are explicitly called out in the Windows Phone Design guidelines.

Creating the Icon
Now that you have everything you need to create your icon and an idea of the constraints you will have to work with, it's time to start creating the icon.

Go ahead and launch Fireworks, and create a new document. In the New Document dialog, enter a width and height of 48, a DPI of 72, and a background color that is set to Black:

[ create a new document in Fireworks ]

Once you specified these values, go ahead and Click OK to create your document. Your canvas will look as follows where a 48x48 black area is available for you to create your icon in:

[ your masterpiece is almost done...! ]

In this area, you can use all of the tools available in Fireworks to create your icon. Whatever you design, try to make sure it it is simple enough to be cleanly represented in a single color:

[ I am going simple with just a letter of text ]

One thing you may have noticed is that you are designing against a black background. The guidelines state that your final icon must be a flat/white color on a transparent background. Your background right now is clearly (ha!) not transparent.

The reason for this is that designing white on a transparent background is next to impossible:

[ white on transparent doesn't work well ]

Therefore, while you are designing, it makes sense to do so under a black background. This will allow your flatly white colored design to actually be visible.

After you have finished designing your icon, revert the background back to transparent before exporting. You can do that setting the canvas color to Transparent:

[ before you are done, set your canvas/background color to transparent ]

Once you have finished, export via File | Export your white, 48x48, transparent image to a PNG file that you can use in your project:

Note
Be sure to Export your PNG file using File | Export as opposed to doing a File | Save. Saving the file means a massive Fireworks-specific PNG file will be created that contains far more data than you will actually need for simply displaying your image.

If you have image previews turned on for the shell in Windows or OS X, you will only be able to see the icon if you select it because it is largely invisible. That's actually expected when viewing a white image on a transparent background, so don't be alarmed if nothing is what you see.

Using your Custom Icon
With your icon complete, all that is really left is to use it. In your Application Bar, go ahead and select an ApplicationBar Button. If you do not know how to do that, please read over the Creating an Application Bar tutorial first. It covers the ins and outs of creating the Application Bar and its MenuItems and Buttons.

With an ApplicationBar Button selected, look in your Properties Inspector at the IconUri property. Instead of clicking on the drop-down to select a known icon, click on the ... button instead to pick your custom icon:

[ the ... icon allows you to browse for a icon ]

The Open dialog will appear. From this dialog, go ahead and select the icon you have created. Once you have done this, you will see that your custom icon is now displayed as the contents of your ApplicationBar button:

[ the custom icon lives! ]

Because your icon was created with a white on transparent color, switching to the Light theme results in the icon's colors being tinted to the correct dark values automatically:

[ the icon looks good even in the Light theme ]

As Borat would say, "Great success!"


Did You Like This?

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

blog comments powered by Disqus




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.