Remove All Ads from XDA

[TOOL] Create your own circular battery icons with 1% increment

135 posts
Thanks Meter: 32
By vponomarev, Senior Member on 23rd January 2014, 02:33 AM
Post Reply Email Thread

This was inspired by KryptosXLayer2 for the BlueCircle battery icons, but I wanted to have my own icons, with the other colors and settings.
I too spent WAY too long working on this tool, but the end result is here for you to use and to judge. It's a Windows application, so I apologies to all Linux, Mac, etc. users.

With this tool you can create your custom circular battery icons by specifying the following parameters:
  • Icon size
  • Base icon transparency
  • Circle width and padding
  • Choice of built-in or custom charging icon
  • Choice of text of custom overlay for bad charge indication
  • Percentage text font
  • Varying of each element (circle, percentage text, charging icon, bad charge indication) based on percentage (this includes custom charging icons and bad charge indication too! - see below for more information on this)
  • Optional "fixed" colors for the circle
  • Gradual color changes between specified color levels
  • A few more minor things

This tool will also allow you to preview the icons based on the current settings using specified background. The actual icons that you save when you're done always have transparent backgrounds, but this will allow you to see how they blend with various backgrounds.

Here is how it looks like:

I tried to make the UI as intuitive as possible, but I would like to mention a few thing on usage:

1. Color levels:
  • For each element (circle, percentage text, charging icon, bad charge indication) you can specify up to 5 color levels based on percentage.
  • First select how many (1-5) color levels you want.
  • Then specify the cut-off percentage for each level.
  • Double click each percentage field to edit the color it represents.
  • The corresponding element will have the given color if the percentage is lower than the given color level.
  • If gradual colors are specified, then the color of the element will gradually move from one color to the other as percentage changes.
  • For circle element you can choose "fixed colors". This means that each portion of the circle that represents a percentage range will always have the color specified by the corresponding color level. Otherwise, the circle will have just one color, which will change based on percentage.

2. Custom icons:
  • You can use custom images for charging icon and bad charge indication. Supported formats: GIF, PNG (the ones that support alpha-channel).
  • One of the colors in this image will be designated as "key" color, which will vary based on percentage and color levels specified for this element.
  • This tool will try to auto-detect this "variable" color based on which color is more prevalent in the image, but you can correct this color by double-clicking "variable color" control (it will become visible only after you load your custom image).
  • Note, that for the purposes of variable color key, each pixel with the same RGB components will be treated as the same color regardless its transparency (alpha), but when this icon is rendered, the original transparency is preserved, while changing the color.

3. Preview panel:
  • If preview mode is set to "Auto" the preview panel will be updated automatically every time you make a change to any of the parameters, otherwise, click "Preview" to see your changes.
  • You can change preview percentage by entering 5 different percentage values.

I'm providing a few examples of the icon sets that can be generated using this tool:

1. Default (the way parameters are set when you launch the application):


2. Blue circle, no fixed colors:


3. Default, except for no gradual or fixed circle colors (my favorite):


After you generated your custom icons, you can use them to mod your SystemUI,apk to replace the stock icons. There are many guides available that describe the process.
For example:

This tool and generated icons are donateware. If you like this tool and find it useful, please consider making a donation.

I can accept PayPal and Bitcoin:




This information will also be available in the app after you save an icon set.

Comments and suggestions are welcome. Suggestions accompanied by a donation will receive a higher priority for consideration.
Attached Files
File Type: zip - [Click for QR Code] (107.4 KB, 242 views)
The Following 3 Users Say Thank You to vponomarev For This Useful Post: [ View ] Gift vponomarev Ad-Free
23rd January 2014, 02:35 AM |#2  
OP Senior Member
Thanks Meter: 32
25th January 2014, 02:51 PM |#3  
KryptosXLayer2's Avatar
Senior Member
Flag Charlotte, NC
Thanks Meter: 368
Donate to Me
Looks great, good work and believe me, I sure know about how much time you spent doing this - at least twice as long as it took me to design the icons and lay those stupid things out right!

Congrats and I hope lots of people get use out of this if they want to see their icons in different variations!
Post Reply Subscribe to Thread

battery, circle, create, mod, systemui

Guest Quick Reply (no urls or BBcode)
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes