| Issue 4, 2012 | Download pdf |
Icons are an essential part of most all mobile applications. They are used to simplify navigation, launch applications and more. The extent to which you use choose to use graphic resources in your application is entirely up to you. One thing is certain, you will need some icons such as a launcher icon and probably in-app Nav Bar icons and on-screen elements.
General Advice for Creating Assets
Creating graphical assets for mobile applications is not as simple as it may seem. There are several supported file formats (with multiple variations of each type) and one must also consider the issue of supplying assets that will cater for the wide variety of screen sizes and resolutions that may be encountered. The article Preparing Graphics for Your Mobile Application provides some essential information to developers or designers unfamiliar with working on mobile applications.
The visual style of icons (and other graphical assets within your application) is your choice. However, most developers aspire to achieve the native look and feel of the platform and will typically start with the developer guidelines provided by each platform. For example, Windows Phone applications rarely feature full-color icons within their pages (never on the Application Bar) and icons are usually contained within a circle.
Nav Bar Icons
The first icons you encounter within an application are likely those used in the Nav Bar (see nUINavView in the Java Docs). This Native UI element creates the familiar bar at the foot of the application, populated with a number of icons (although on Blackberry these items are relegated to the Application Menu where no icons are used). Each platform renders these icons slightly differently and some even require the styling to be applied by the developer.
iOS Nav Bar Icons
Two sizes of icon are required for iOS: 30 x 30 pixels and 60 x 60 pixels (for high resolution, or Retina devices). These are approximate sizes and there is room for maneuvering, although larger icons may get clipped. Icons are supplied as black PNGs with a transparent background. At runtime the icons will be styled by the OS to create the familiar look and feel of an iPhone or iPad Tab Bar.
Android Nav Bar Icons
On the Android platform things are little more complicated. There are actually two different types of Nav Bar implementations. The older style Options Menu is a hidden panel containing up to six icons, accessed via the Menu button on an Android device. As the OS has matured, Google switched to a more versatile Action Bar scheme that combines a header and footer bar that contain icons, a back button, a title, etc. webMethods Mobile Designer defaults to the latest Android scheme of an Action Bar but the developer has the option to switch to the original Options Menu style. You can also download a Photoshop PSD file which contains samples of the custom layer styles that are needed to replicate platform specific look and feel.
Multiple sizes of icon are required for the Android action bar and older style Option Menu. These range from ldpi (low screen density) to xhdpi (currently the highest screen density). As with iOS, there is some leeway with icon sizes, although large icons may be clipped. Visit the Tech Community and read Icon Creation and Usage for webMethods Mobile Designer for specific icon size recommendations by platform.
Windows Phone Nav Bar Icons
Windows Phone currently requires only one size of icon for the Nav Bar. The PNG should be 48 x 48 pixels in size and the foreground graphic for the button should fit in a 26 x 26 area in the center of the image. Icons are supplied as white on a transparent background. When the device renders the icons, they are placed within a circle and if necessary, depending on the theme selected by the user, are inverted.
Header Icons
On iOS and Android, webMethods Mobile Designer allows the developer to add icons to the header bar of the application. Any items added to the header won’t appear as on-screen icons on BlackBerry or Windows Phone as they are relegated to the menus. There are some limitations to how header icons can be used, but if the developer is careful they can be a very useful addition.
iOS Header Icons
No hard limits are placed on the number of icons that a developer can include in the header, but on iOS there are some restrictions due to the available space. Apps on the iPhone should not feature more than two header icons. On the iPad, there is room for more icons but the developer will still need to take care not to overcrowd the space.
It is also important to note that header icons appear differently on iPhone and iPad—and it is up to the developer to apply the correct visual styling. If the developer wishes, he can mimic the OS behavior of highlighting a selected header icon by providing two versions of the graphic. This is not handled automatically however, and the developer will need to write code to display the second button state. Figure 1 shows how the small screen (iPhone) icons are styled using a combination of fills and shadows while the large screen (iPad) icons are rendered differently using darker icons to accompany the iPad’s lighter colored the header bar.
Figure 1: Header icon styles for iPhone (top) and iPad (bottom)
Android Header Icons
Creating header icons for Android is a far simpler task. The icons appear exactly as they do for the Action Bar style Nav Bar. Header icons are only available if you are using the default style of Nav Bar.
General 'IN-APP' Icons
When it comes to including icons within your application there really are no restrictions on what you can do. We still advise developers to use PNG format images, with transparency if necessary. We also advocate creating multiple versions of each asset to cater for the different screen sizes one might encounter. Beyond that, however, the developer is free to create graphics in the style they choose.
On most platforms it is common to see full color icons within an application, although different apps may dictate their own individual style. The TomTom app on iPhone, for example, opts for large, full color icons whereas the developers of 1Password felt monochrome icons were more suited to their application as shown in Figure 2.
Figure 2: Different in-app icon styles as featured in the TomTom (left) and 1Password (right) iPhone apps
Of all the platforms supported by webMethods Mobile Designer, Windows Phone is the one most likely to restrict the style of your in-app graphics. On the whole, Windows Phone apps look better when sticking close to the Modern UI style of the operating system. The developer guidelines strongly advise monochrome icons, placed within a circle (similar to those in the application bar).
Application Icons
Creating application (or launcher) icons for apps developed with webMethods Mobile Designer is no different to creating them at any other time. There is a dizzying array of icon sizes and styles required (iOS is particularly demanding) and if an app is being deployed by a platform’s app store, the developer will need to provide several more sizes and styles of icon and/or promotional images.
Broadly speaking, Android and Blackberry application icons tend to be isolated objects, on a transparent background, whereas iOS icons sit within a rounded square as shown in Figure 3. We suggest creating the Android icon first and then adapting your design to iOS by placing the object over an icon background. Several iOS templates are available for free online, such as this one from killer icons: http://killericons.com/app-icons/free-ios-diy-icon-kit
Figure 3: Example of Android/Blackberry (left) and iOS (right) application icons
Learn More
Visit the Tech Community to learn more about developing mobile apps and using webMethods Mobile Designer at http://techcommunity.softwareag.com/webmethods/products/mobile
Get more specific details about icon development, such as icon size recommendations by platform, by reading my Tech Community Wiki article: Icon Creation and Usage for webMethods Mobile Designer.