[Android Themes] MJPollard:
Battery Icon Creator is a program that will create a series of PNG files designed to be used as battery icons in Android ROMs and themes. It can create individual icons, a series of icons depicting percentage values, and a series of charging icons. With its ability to specify different templates, text settings, colors, and overlays, icons of all types can be generated quickly and easily.

System requirements:

- Microsoft Windows XP, Vista, or 7 (32- or 64-bit)

- .NET Framework Version 3.5

Battery Icon Creator is a greatly enhanced (and massively rewritten) version of the Battery Icon Maker utility by Jeffrey Smith (jsmith). I'm immensely grateful to him for his kind permission in allowing me to use his source code to create my program. Thanks, Jeff!

How to Use

The program is executed from the command line, and accepts only one parameter: a configuration file, in XML format, that defines the icons to be created.

BatteryIconCreator.exe filename.xml
​

If a filename is not specified, the program will attempt to load config.xml by default.

XML Configuration File

Sample XML configuration files are included in this package. Much of the format is self-explanatory, but several parts will be explored in-depth below.

The <Output> tag specifies the folder that will be used to store the generated icons. The Folder="directory" attribute is used for this purpose, and is required. The optional Preview="filename" attribute can be used to specify the name of a preview PNG file. This preview graphic will include all of the generated icons from the output folder. To keep the dimensions of this graphic manageable, no fewer than 10 and no more than 20 icons will be displayed per line.

The configuration file is divided into three sections: single, percentage, and charging icons. These sections are delineated by <SingleIcons>, <PercentIcons>, and <ChargeIcons> tags, respectively. Each section defines actions that are slightly different. Also, configuration files do not need to specify all three sections, but at least one section is required, obviously. :)

The <PercentIcons> and <ChargeIcons> sections defines how a series of percentage and charging icons, respectively, will be created. The program will normally create icons from 0% to 100%, for a total of 101 icons. This behavior can be altered in several ways. The Start="value" attribute can alter the starting percentage value (the default is 0 if not specified), and the Step="value" attribute can alter the interval between percentage values (the default is 1 if not specified).

The Filename="filename" element specifies the filename mask that will be used to generate the icon files. For percentage icons, stat_sys_battery_{0:0}.png is the filename mask that is normally used; for charging icons, it is stat_sys_battery_charge_anim{0:0}.png. Both can be changed if needed. The "{0:0}" section is standard nomenclature for replacing values in C#, and will be replaced with the percentage level. Thus, for example, the icon for 45% would be generated as stat_sys_battery_45.png.

The <Background> tag specifies the template graphic used for each icon. This is normally an "outline" PNG graphic that utilizes transparency. Samples here including horizontal and vertical battery and circular shapes.

The <Bar> tag specifies the name of the color bar that is used to fill in the percentage icon. The StartX/StartY/EndX/EndY="value" attributes specify the starting and ending positions for the fill process. Circular icons can be created by specifying StartRotate/EndRotate="value" attributes as degrees in a circle (0-360); these would replace EndX/EndY. Dotted instead of solid fills can be created by specifying DrawCount="value" and SkipCount="value" attributes. Sample XML files are included that illustrate how to do this.

The <Text> tag specifies the text mask used to create percentage values on the icon. Again, the standard C# "{0:0}" nomenclature is used to specify the percentage value. Font style, size, italics/bold, start/end, offset positions, and centering can be specified.

The <Level> tags indicate the highest percentage level for a specific icon style. Multiple <Level> tags allow changing the <Bar> settings depending on the percentage level; low percentage levels can use a red background, for example, with different colors used for higher levels.

<Bar>, <Text>, and <Background> settings will carry over from one level section to the next, unless overridden with new settings. This eliminates the need to specify these settings for each level section: the only ones that need to be specified are the ones that change at each level (i.e. different bar colors).

The <Overlay> tag is used to specify a PNG file that will be overlaid onto the generated icon. Typically, this is used in the <ChargeIcons> section to place a symbol over the icon to indicate charging, i.e. a lightning bolt. This graphic is placed over the icon after the <Bar> graphic drawing is done. If text is included, specifying the OverlayUnderText="true" attribute will specify that the graphic should be placed over the icon before the text is drawn instead of afterward (i.e. the overlay graphic will be "sandwiched" between the text and the icon).

The <SingleIcons> section is used to create individual battery icons that don't fit into the "percentage" paradigm. The <Icon> tag specifies the name of the file to be created, with an optional Level="value" attribute to specify a percentage level (default is 0) for filling the graphic. The <Background>, <Bar>, <Text>, and <Overlay> tags are used here just like they are in the percentage sections, except that here, the settings do not carry over: they must be specified for each <Icon> tag.

Sample Images

Horizontal battery icons

Vertical battery icons

Circle battery icons (solid)

Circle battery icons (dotted)

Tips and Suggestions

Icons of any dimension can be created with this utility; however, you should avoid creating icons that are larger than the allowable dimensions for the target device. For example, battery icons for HDPI-resolution devices should not exceed 38x38 pixels.

Overlay PNG graphics should use transparency so that the icon graphic itself will not be obscured.

Background PNG graphics do not need to use transparency, but it is generally recommended so that custom notification bar colors can show through. For example, the notification bar is normally black, so a background graphic with a black background wouldn't look out of place; however, it would definitely look out of place if the notification bar color was changed (via a theme) to red, green, etc. Making the background around the image transparent will allow the notification bar color to show, providing a cleaner-looking display.

Version History and Download Links

1.0.0 - 7 Mar 2012 - [Download]

Initial release.