8/14/2011 Update: See this post for details. Now you can make circular progress bars, dotted progress bars, the text is anti-aliased and smoothed, and more!
Attached is a very simple, small Windows .NET application that will generate a 101 Battery Icon images (for percentages 0-100) with a growing battery indicator bar and also the battery percentage text using the font, style, format and position that you desire.
Using an XML configuration file and some image templates, you can quickly generate a wide range of icons for your battery icon theme.
To start, just unzip the files into a folder and open up the "Config.XML" file in a text editor. Here's the one I've included to use as a guide/template/example:
Code:
<?xml version="1.0" encoding="utf-8" ?>
<batteryIcon>
<output folder="output" filename="stat_sys_battery_{0:0}.png" />
<batteryLevels>
<level max="24">
<background filename="Files\template.png"/>
<bar startX="6" startY="21" endX="31" endY="21" filename="Files\bar-red.png"/>
<pctStyle colorRGB="FFFFFF" fontFamily="Arial" fontSize="11" italic="false" bold="true" formatString="{0:0}%"/>
<pctPosition centerX="true" centerY="false" offsetX="1" offsetY="3"/>
</level>
<level max="49">
<bar filename="Files\bar-orange.png"/>
</level>
<level max="74">
<bar filename="Files\bar-green.png"/>
</level>
<level max="100">
<bar filename="Files\bar-blue.png"/>
</level>
</batteryLevels>
</batteryIcon>
In addition, in the "Files" folder, I have an example image called template.png, which is the example icon's background image, and some bar-xxx.png images, which are different colored 1-pixel-wide images that are used in the example to draw the horizontal battery meter over the background. Attached to this post is a picture of the output from this configuration and image files so you can get a basic idea of what it can do.
Using this application is (hopefully) quite simple: Create your template images, edit the config file to specify your parameters, then run the executable. 101 images, for battery levels 0-100 percent, will be created as specified. Tweak and run again as needed until you get it right. The "level" elements allow you to change any of the icon's characteristics (text color, size, position; background image; progress bar image) for different battery level intervals. Anything not changed from the previous level is carried over, so you only need to specify changes.
For most of you, editing the config.xml file is probably obvious from the example; you can probably just tweak it file and get what you want, but below are more details.
Documentation
The output element just indicates where the final images will be stored and how they will be named. The {0:0} part is a standard .NET format string and indicates where and how to put the battery percentage in the file name. (You probably won't need to change this; {0:0} will format numbers from 1-100, no leading zeroes, and we don't need to worry about commas or decimal places or anything).
After that, under the batteryLevels element, there are a series of level elements that define the icon options at each battery percentage interval. The end of the interval is defined using the "max" attribute, which is a number from 0-100 for the battery percentage.
The first level should include all layout and image and formatting options, but then after that, you just need to specify things that change from the previous interval. The level elements should go in order from lowest battery level to highest.
At each level, we can specify:
The background element which sets the base background image for the icon, on which the progress bar and pct text will be overlayed.
The bar element which determines how the progress bar is drawn over the background. startX/startY and endX/endY are the range of positions for which the progress bar image will be drawn. The image should be 1 pixel tall or wide, depending on if the bar is progressing vertically or horizontally. Omit this element completely if you do not wish to draw a progress bar -- i.e., for just the battery percentage text on top of one or more background images.
pctStyle lets you theme the battery percentage text a bit. formatString is a .NET format string, and is probably fine as is, except notice that it ends with a % symbol. Remove this if you don't want a % after the number. (i.e., it would be just "{0:0}")
pctPosition is used to indicate where on the background image the text is drawn. centerX/centerY are true/false if you want the text to be centered in that dimension, otherwise it is drawn at the top and/or left of the background. offsetX/offsetY let you move the text up/down or left/right pixels as needed from either the center or top/left position.
That's really it. Anything that doesn't change from the previous battery level will be carried over, so you just need to specify what has changed.
Tweak the XML file and re-run until you get the battery icons you are looking for! You can also create and drop different configuration XML files on the executable (or specify the file via the command line as the first argument) and it will run using that file as opposed to the default "config.xml" file in the application directory.
Additional Notes:
Specify an empty string ("") for the filename attribute of the bar element if you do not want a progress bar drawn.
Specify an empty string ("") for the fontFamily attribute of the pctStyle element if you do not want the percentage text drawn.
Remember that the background image can change at any interval as well, if you'd like to use a series of different backgrounds with percentage text overlayed and no progress bar, for example.
the start/end positions of the progress bar should be specified once and cover the entire range of the progress bar, from 0-100 %, and not change at different intervals (unless that is an effect that you want for some reason).
You can specify the filename for any valid configuration file as the single parameter for the executable to use that file instead of the default config.xml file if you like.
WOW! Are you kidding me. You mean I don't have to make 100+ Battery icons. THANKS. I'll definately be donating next time I get paid. DO YOU REALIZE how much time you just saved me? Thanks. DL'ing now.
EDIT: DUDE! Where's your donation link? I just tested this and IT'S INSANE! IT WORKS PERFECT! Seriously, post a donation link. You deserve a lot for making this. I'll also post a link to your thread at "themikmik.com". They'll love this program.
EDIT: Could you please give me an idea of what pctposition I would need to accomplish this type of battery? Thanks. I tried a pct of 1:1 but had an FC. Or Offest. I'm still trying to figure it out.
EDIT: I almost have it down. offsetX="3" offsetY="10"/> gives me:
Will the Font be transparent? Answer: YES
I finally got it looking the way I wanted. I used:
<bar startX="10" startY="15" endX="31" endY="15" filename="Files\bar-red.png"/>
It looks like I just have to modify the PNG bar's to make it the size I want so it fills up the battery.
To think, it took me 20 minutes to do TWO battery PNG's in Adobe photoshop! LOL.
How can I change which way the bar is going? It currently goes from Left to right. I'd like it to go from Left to Right.
Answer: I feel like an air-head. I figured it out. You just have to reverse the Start X. For example:
<bar startX="33" startY="9" endX="7" endY="9" filename="Files\bar-red.png"/>
Great!!!!
THX for this tool
Made my life much easier
raider3bravo said:
It looks like I just have to modify the PNG bar's to make it the size I want so it fills up the battery.
Click to expand...
Click to collapse
Yeah, those images are just examples, modify as needed. Glad it is working for you!
jsmith8858 said:
Yeah, those images are just examples, modify as needed. Glad it is working for you!
Click to expand...
Click to collapse
Can you give me an idea of some fonts we can use? I was thinking if I used a certain font that wasn't on the phone then it might not show.
EDIT:
On another note, I'd like to share with everyone the coding I used to achieve a perfect battery using a 38x38 icon and 1x21 bar colors.
Never before have I been able to custom make batteries this fast. Thanks!
Code:
<?xml version="1.0" encoding="utf-8" ?>
<batteryIcon>
<output folder="output" filename="stat_sys_battery_{0:0}.png" />
<batteryLevels>
<level max="24">
<background filename="Files\template.png"/>
<bar startX="34" startY="8" endX="6" endY="8" filename="Files\bar-red.png"/>
<pctStyle colorRGB="A7CEA7" fontFamily="Arial" fontSize="11" italic="false" bold="true" formatString="{0:0}"/>
<pctPosition centerX="true" centerY="false" offsetX="2" offsetY="9"/>
</level>
<level max="49">
<bar filename="Files\bar-orange.png"/>
</level>
<level max="74">
<bar filename="Files\bar-green.png"/>
</level>
<level max="100">
<bar filename="Files\bar-blue.png"/>
</level>
</batteryLevels>
</batteryIcon>
raider3bravo said:
Can you give me an idea of some fonts we can use? I was thinking if I used a certain font that wasn't on the phone then it might not show.
Click to expand...
Click to collapse
Use any font you have available on your pc that looks good. On your phone it's just a PNG image, it doesn't matter .
HTC style battery meter
I modified HTC battery png files to include the battery percentages.
Attached is the preview and output folder. Use as you please.
It would be awesome if we could get the charging icon pngs. Anyone care to post?
Sent from my ADR6400L using XDA Premium App
raider3bravo said:
It would be awesome if we could get the charging icon pngs. Anyone care to post?
Sent from my ADR6400L using XDA Premium App
Click to expand...
Click to collapse
Attached are all HTC battery pngs including the charging ones.
I just made another battery icon. This program is a huge time-saver.
When I asked about the power widgets. I was wanting to know if it's possible to include those images in the battery icon similar to the numbers being populated in the icon. The battery power widgets are easy to get but populating them inside a battery icon can be tricky and again time consuming. Just putting the thought out there. I'm happy the way it is, but maybe consider it for a future update?
raider3bravo said:
I just made another battery icon. This program is a huge time-saver.
When I asked about the power widgets. I was wanting to know if it's possible to include those images in the battery icon similar to the numbers being populated in the icon. The battery power widgets are easy to get but populating them inside a battery icon can be tricky and again time consuming. Just putting the thought out there. I'm happy the way it is, but maybe consider it for a future update?
Click to expand...
Click to collapse
I'm afraid that I don't really understand what you are requesting, can you be a little more specific or explain a bit more what you are trying to do?
jsmith8858 said:
I'm afraid that I don't really understand what you are requesting, can you be a little more specific or explain a bit more what you are trying to do?
Click to expand...
Click to collapse
Sure thing. Right now, the script populates 100 icons. However, there are 110 "battery icons." The other 10 are for charging. What I'm requesting is if the script could somehow, populate those charging icons along with the modified battery png's. I can easily add the charging icons but theming them will be a huge hassle. If it's possible, great. No big deal if it can't be done right now. I'm just thankful we have this script to make all 100 Png's.
How do I compress series png files as 1png file?
I'm running MIUI galnet 6.0 and need to add 1 png file that has all the percentage inside (0-100)
Do you guys know how I need to do this?
Thanks
This is amazing! Why doesen't everyone use it! Please create charging and different types of batteries like circular ones!
Circle battery indicators
see next post!
Version .2
Here's version .2. The OP will be updated at some point when I have time to rewrite it.
Changes:
1) The % text is now smoothed and anti-aliased.
2) You can draw a circular progress bar by specifying rotateStart and rotateEnd attributes for the bar element. These are in degrees (0-360). The "bar" image will be drawn at the startX, startY point (usually 0,0; omit if you like as this is the default) and then repeatedly rotated and drawn up to the currently drawn battery level. endX and endY are ignored if you use rotation. (The included config.xml file has an example of using this feature.)
3) You can now specify a "step" attribute in the batteryLevels element. This allows you to draw icons for only every nth battery level, say, 0,5,10,15...90,95,100. (the default config.xml file includes this attribute so you can see where it is; it is set to 1, which is the default.)
4) in the bar element, you can specify drawCount and skipCount attributes to toggle drawing the progress bar on and off to make a "dotted progress bar" effect. This is often done for circular battery icons. Basically, specify how many % to draw and then how many % to skip using these attributes. (The included config.xml file has an example of using this feature.)
5) An image called "preview.png" will be created in the output folder with a simple compilation of all of your icons in one image. This is useful for posting for others to see or for you to quickly review all in 1 place.
The standard horizontal bar example included with the app has been renamed to "config-bar.xml", while the default "config.xml" included creates a dotted circular progress bar and includes most of the features described above.
Have fun! See some attached examples. (PLEASE NOTE: I literally threw the examples together in 10 minutes, they are a little sloppy since I didn't take the time to line things up perfectly, you can do better!)
this tool is premium quality!
Since no one really knows about this tool, I have two requests:
1) If you use this for a theme you make available to others here on XDA, if you could include a link to this thread and (very) briefly mention that you used this to generate your icons that would be much appreciated.
2) Maybe a few clicks to "Submit to Portal" (on the top-right) can get this thread on the XDA home page! (I apologize if soliciting this is against forum rules)
3) Share your work here! Use the cool "preview.png" feature to post some examples of what you've created.
Enjoy!
R3D X said:
this tool is premium quality!
Click to expand...
Click to collapse
Thanks, glad it works for you!
jsmith8858 said:
Since no one really knows about this tool, I have two requests:
1) If you use this for a theme you make available to others here on XDA, if you could include a link to this thread and (very) briefly mention that you used this to generate your icons that would be much appreciated.
2) Maybe a few clicks to "Submit to Portal" (on the top-right) can get this thread on the XDA home page! (I apologize if soliciting this is against forum rules)
3) Share your work here! Use the cool "preview.png" feature to post some examples of what you've created.
Enjoy!
Click to expand...
Click to collapse
Ya, this should have been on the homepage of XDA months ago. lol. Thanks for the update. I know I included a link on my first theme to this thread, but forgot about the others. I'll mention you now in every OP. Thanks a million. My themes wouldn't be possible without this. Submitting to portal now!
Im trying to resize a set of icons in photoshop.
They are circular, transparent background PNG files.
As is, they are clear & smooth.
Upon import they are automatically distorted, beyond belief.
At this point there has been no editing, i have simply opened the file in photoshop.
Im not sure if its relevant but they are opening as index, locked.
Its not a universal issue, other images open fine.
Any suggestions would be welcome.
Also any other advice on what im trying to accomplish;
- resize canvas up (to enlarge transparent background)
- resize image down to original size (to give the effect of a smaller icon)
Im aiming to batch convert a group, ive already defined the actions in photoshop so if i can get around the issue within photoshop that would be my first preference.
Cheers.
I am in the process of creating over 100 true 3D Boot Animations of various sizes.
I have a sample of one on youtube. It is a 30 second animation. All animations loop seamlessly until the os is loaded.
Multiple stages and customized colors, images and personalization will be available as well.
I look forward to being part of this forum. SyrD0n
I have a sample on youtube:
galaxy loader
I have a spinning galaxy loader almost complete. I will post a video sample when its ready.
Let me know if there is interest in this type of thing.
Btw, the boot animations.zip will be totally free to all. I will never place ads of any kind in my boot animations for your devices. I have 20 plus years experience with Photoshop and other adobe products. I use after effects cc, Photoshop, cinema 4d and other applications to do my work. I have business licenses for all of the applications I use. I would like to be a valuable contributor to this community.
SyrD0n / SyrD[ZERO]n
Can't wait to see some of these!
Android...A New Digital Revolution Of Incredible Developers
First animation almost ready for nexus 10 tablets (more soon)
I have created the first of many many seamless boot animations. This one should set some new standards for the nexus 10.
This boot animation is an underwater view of the sun from beneath the surface of the ocean. The animation has waves moving through the entire screen. Yes folks. this is a 2560x1504 bootscreen using every pixel of the screen. No black backgrounds. All seamless. All free. I booted up my nexus 10 to show my roommate the animation on startup. His reply is "where did you get the picture for that?" He thought I was warping an image. He was shocked when I showed him it was all mathematics and no images at all. Fractals rock so hard! Although I certainly can manipulate images, 3d objects. you name it.
I am going to look online also and find storage space so that I can give out a link to the actual bootanimation.zip file.
Keep in mind, this first version will be for the nexus 10 only. I will re-render for other devices as soon as I solve storage and sharing issues. If someone could be so kind as to direct me to the information of maximum screen resolutions for your devices, I will compile a list and do a batch render for each animation I create. Also, can anyone tell me if it is ok to attach the bootanimation.zip file to the post here? I don't wish to break any rules. Especially since I am new.
It is time to turn the generic into the extraordinary. I am here to work with a team and make a difference.
SyrD0n (ancient god of illusion)
Demo on youtube
30 Second video render of underwater boot animation.
Here is a working demo of Underwater - bootanimation.zip on my own nexus 10 tablet.
So, here is the best part.
I am working on a server side system that will create these bootanimation.zip files on the fly for download. What this allows for is the ability to customize the animations in a myriad of ways. For instance, It could include your name, info, etc. It could have your picture inserted in a corner, etc. There really is no limit. I have been making dynamic images with php since the mid to late 90's. once each image is created, the server would zip it up and offer it for download. All I would need to do is create a html5 front end to allow for the customization.
I am attempting to work with major developers of various android system tool apps (ones that manage boot animations) to make them available in those apps as well. If not, then I will end up making my own app. Simply changing a boot animation isn't enough of a feature for me.
I will also be releasing how-to video tutorials and show how to create some of this video effect magic, as well as exporting png files, choosing the correct zip format and installing new animations. I will start releasing these in mid spring 2014. So look for that as well.
This video is available as high as 1440p on youtube.
Anyways, enjoy. I will find out if its ok to post the bootanimation.zip file in this post.
SyrD0n
Updated Information
There are now 2 boot animation previews available.
The underwater bootanimation.zip is around 11 MB.
That is impressive considering it is a full-screen, seamless, animated rendering for the nexus 10. Virtually every pixel is being used (this one does have some black at the bottom that doesn't change).
Hi everybody!
First of all, I am using Buzz Launcher, which means that my "themes" are made following specific parameters such as the grid size, no labels, etc.
But I think that other launchers allow you to customize your appearence as well.
My phone resolution is 854*480.
I had a 720p one but had to send it back, so for now I can't work on that resolution anymore.
So for those having higher resolutions, well I don't know what the result would be on your screens. Except for wallpapers, I guess icons would be displayed well.
Before sharing my files, I'd like to show you what I've done so far and get your opinion: if you like it or not, what I could/should change, etc.
This to get a nice final result.
And obviously I won't and never will sell those resources because:
- I'm using some stuff such as photographs from other persons
- Some icons are directly made from other icons you can find on the Play Store or Google Image
- I'm here to share
To be edited later (once I have posted 10 messages and can freely post direct links):
I. Icons only
II. Backgrounds only
III. Themes: icons + backgrounds
I. ICONS
II. BACKGROUNDS
III. THEMES
Hey!
One of my nicest try so far: a panda theme! (I love pandas)
The panda is partially made from an iPhone game icon named Land-a-panda (see the attached pictures).
Those icons are for HD displays (720p): 144x144. Work fine on lower resolutions.
And I've "made" a few backgrounds too, giving quite a cool result when used with those icons.
Also, because it's quite boring to always have the same face, I just added 2 other kinds of eyes (see Viber and Video Player icons).
What do you think? Worth sharing them?
Any idea welcome
Let's keep up the monologue.
Seems not be be very interesting. Whatever, I'm sharing my work anyway.
Let's begin with the icons:
192 icons (64 app with 3 different kinds of pandas), pretty high quality: 144x144. See the sample below.
And if you are wondering: yes, it took me ages to save each file.
I'll share the Photoshop template once I can post direct links (man that's some weird annoying policy!), so that you can create your own icons without having to wait for updates (as I may not update this theme anyway).
If you give it a try, please share some photos/screenshots
ZIP file size: 3.62Mb
Note: if you find the icons resolution too high (say you want a 96px² size), you can use a (free) software such as ImRe to massively convert the whole folder. It perfectly and quickly does the job.
Laterz
Hey oi!
New icons, "copied" from a screenshot I saw somewhere (I think it's called themer, it's new and not compatible with all phones (not my X720D).
So here we go, 3 samples and the template file (PSD, Photoshop CS5).
The PSD is made as follow:
- A folder with the white pictures representing the icons (that's the part you really need to work on if you want to make your own icons)
- The icon's shadow (layer)
- The icon's color (layer), locked to the edit mode (you pick your color, use the brush tool and paint: it will paint ONLY the visible pixels).
Theme 5: Japanology (again)
The principle of this theme is simple: the background is the main deal, then there just needs to add the app and choose a transparent PNG to make them invisible.
Main problem with that theme: icons cannot be replaced, which means you must always keep the same applications on your screen.
edit: well it seems that uploading pictures isn't working at the moment. My PC or the servers, I don't know. I'l try to re-upload later if it keeps showing a 404.
Hum there seems to be a problem with uploading pictures from the forum. Even after having edited my post 2 times.
Hoho but I found a way to post links without having 10 posts: quotation (I hope you won't mind)
Click on each picture to enlarge it. See the above post for more information about how to use that "theme" (Buzz Launcher); Note that you must create your own date/time/battery widget (as in the screenshot below).
munchou said:
Click to expand...
Click to collapse
To prevent spam to the forums, new users must wait five minutes between posts. All new user accounts will be verified by moderators before this restriction is removed.
Click to expand...
Click to collapse
Could a moderator do something about that ?
That's really becoming a pain...
Today's icons: ICONS F Black and White
200x200
List:
Alarm Clock
Applications
Calendar
Camera
E-mail
Files
Gallery
Games
GPS
Internet
Notes
Record
Settings
TV
Video Player
And of course the PSD file to add your own ones.
Enjoy!