Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,808,261 Members 37,795 Now Online
XDA Developers Android and Mobile Development Forum

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

Tip us?
 
vponomarev
Old
(Last edited by vponomarev; 25th January 2014 at 02:22 AM.)
#1  
Member - OP
Thanks Meter 4
Posts: 59
Join Date: Feb 2008
Battery Full [TOOL] Create your own circular battery icons with 1% increment

Hi!

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):

Download

2. Blue circle, no fixed colors:

Download

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

Download

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: http://forum.xda-developers.com/show....php?t=1814441


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:

Paypal:

http://tinyurl.com/nwfs9jm




Bitcoin:

bitcoin:1HvqKzCam5E8KQvb43tWUobUVFNsZhhhzt



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 CreateCircularBatteryIcons.zip - [Click for QR Code] (107.4 KB, 54 views)
The Following 3 Users Say Thank You to vponomarev For This Useful Post: [ Click to Expand ]
 
vponomarev
Old
#2  
Member - OP
Thanks Meter 4
Posts: 59
Join Date: Feb 2008
Reserved
 
KryptosXLayer2
Old
#3  
KryptosXLayer2's Avatar
Senior Member
Thanks Meter 289
Posts: 1,278
Join Date: Nov 2007
Location: Charlotte, NC

 
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!
Tags
battery, circle, create, mod, systemui
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes