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

Search This thread

vponomarev

Senior Member
Feb 27, 2008
210
67
Samsung Galaxy S9+
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:
ApplicationUI.png


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):
Default.png

Download

2. Blue circle, no fixed colors:
BlueCircleNoFixed.png

Download

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

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://xdaforums.com/showthread.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

[QRCODE]https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=LU9P6CPY9RTEQ[/QRCODE]


Bitcoin:

bitcoin:1HvqKzCam5E8KQvb43tWUobUVFNsZhhhzt

[QRCODE]bitcoin:1HvqKzCam5E8KQvb43tWUobUVFNsZhhhzt[/QRCODE]

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.
 

Attachments

  • CreateCircularBatteryIcons.zip
    107.4 KB · Views: 316
Last edited:

Top Liked Posts

  • There are no posts matching your filters.
  • 3
    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:
    ApplicationUI.png


    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):
    Default.png

    Download

    2. Blue circle, no fixed colors:
    BlueCircleNoFixed.png

    Download

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

    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://xdaforums.com/showthread.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

    [QRCODE]https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=LU9P6CPY9RTEQ[/QRCODE]


    Bitcoin:

    bitcoin:1HvqKzCam5E8KQvb43tWUobUVFNsZhhhzt

    [QRCODE]bitcoin:1HvqKzCam5E8KQvb43tWUobUVFNsZhhhzt[/QRCODE]

    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.