[Sony Ericsson Xperia Mini, Mini Pro, Xperia Pro, A] ultim@weapon:
Download the attachments below.

I attached my own Penguin battery icon that I made, but it looks too small when used. So you should try to use as much of the image canvas size as possible.

START

Open the battery blueprint PSD image file with Photoshop. There are 10 layer sets, each with 10 layers inside.

GET THE BATTERY TUBE IMAGE

Open the image you want to use as the battery, select the part of the image you want using marquee tool, magic wand, etc.

(the image better be of size smaller than 150x150). CTRL+C to copy the selected part of the image. close this image window (not the whole photoshop application).

PLACE THE BATTERY TUBE IMAGE

In the BATTERY image, switch to the 'BATTERY TUBE' layer (used as the topmost layer) and the press CTRL+V to paste

the previously selected image in that layer. The image will appear. Press CTRL+T and resize the image so that it

fits inside the canvas by dragging the corners of the selection (or you can move by dragging the image from inside

it)

EMPTY THE TUBE

While in BATTERY TUBE layer, select the part of the image where the battery juice should be contained/displayed

and press delete to make a hole in the layer.

PUT THE JUICE INSIDE THE TUBE

You need to resize the image so that the hole will cover all (and exactly) the battery bars. Using the rectangular

marquee tool, select an area that covers the entire battery tube image (THE WHOLE IMAGE NOT ONLY THE JUICE HOLE) .

Transform the image by pressing CTRL+T and drag or move such that the juice hole covers exactly the 1% bar from

the bottom and 100% bar from the top, that is, cover the battery juice (not necessarily exact if its too much of a

trouble). Make sure to center the image on the canvas size too. Move with arrow keys for more precision.

REMOVE ANY JUICE OUTSIDE THE TUBE

While still in the BATTERY TUBE layer. select the juice hole with magic wand, then press SHIFT+CTRL+I to invert

the selection. Now, without discarding the selection,

Switch to the 'Layer 1' and press delete.

Switch to the 'Layer 2' and press delete....

Continue doing this for all layers - Layer 3 upto Layer 100

(i.e., switch to each and every layer and press delete)

CHECK CURRENT STATUS

Congrats! Your battery icon is now complete!!!

If you get something that looks like an elephant, then you probably skipped reading some lines.

If you get something that looks exactly like what you started with, go and play hide and seek with your neighbour kids and come back five years later!!!

Otherwise, follow...

GET THE NAMES AND DIMENSIONS OF THE ORIGINAL BATTERY IMAGES

Minimise Photoshop.

Open your SystemUI.apk with WINRAR. Open the 'res' folder and extract the 'drawable-mdpi' or any folder containing

the battery icons (depends on your ROM) anywhere on your computer.

Close winrar. Open the extracted drawable-mdpi folder. Delete all other images except the ones used for the status bar battery.

These battery images are named as stat_sys_battery_<battery level>.png and stat_sys_battery_charge_anim<0 to

5>.png but they might differ depending on your ROM. Note the dimensions of a battery by placing your mouse

over an image or right click\properties\details.

For the sake of this tutorial, I take it that the battery icons are in res/drawable-mdpi folder

RESIZE YOUR IMAGE TO STANDARD SIZE

Restore Photoshop again. Resize the image (menu bar\Image\Image size...) and enter the dimensions you noted earlier.

SAVE THE BATTERY LEVEL IMAGES

In the layers window, hide all battery level layers and 'SAVE AS' (press CTRL+SHIFT+S) the image. Select the

format as 'PNG' and browse to the folder 'drawable-mdpi' (used earlier) containing the battery images. Click on

the stat_sys_battery_0.png and save, allowing the prompt to replace the existing image.

Then make the Layer 1 visible and 'SAVE AS' it in PNG format and click on the stat_sys_battery_1.png, replacing

the existing image. Next, make Layer 1 and Layer 2 visible and do the same, but replacing the

stat_sys_battery_2.png. Continue making the next higher layer (indicating the battery percentage) visible and

'SAVE AS' it as the stat_sys_battery_<battery level>.png where <battery level> is the highest visible layer.

Continue to 100% :P

Renaming the battery level images depends on your ROM. So match the names to the names of the images of your ROM.

SAVE THE CHARGING ANIMATIONS IMAGES

For the five charging animations images, Create another layer(topmost) and draw a charging indicator (like a

bolt). Center it.

Then make ONLY the Layer sets 1-10 and 11-20 visible and save as stat_sys_battery_charge_anim0.png

Next make the layer sets 21-30 and 31-40 also visible and save as stat_sys_battery_charge_anim1.png.

Continue like this till 100% by incrementing by 20% (or equivalently 2 layer sets) till you get

stat_sys_battery_charge_anim5.png.

Charging animation names also depend on your ROM.

EQUIP SYSTEMUI.APK

Now you have everything ready. Open your SystemUI.apk again with WINRAR. open the res\drawable-mdpi folder within

winrar. Switch to the window containing your newly made battery icons. CTRL+A to select all the images and then

drag them to the 'drawable-mdpi' folder of the WINRAR window, selecting OK for the prompt.

CLOSING

CLOSE EVERYTHING!!! Save your Battery image in Photoshop for future use.

BUILDING FLASH ZIP

Open the update.zip attachment with WinRAR. Open system folder then app folder (within the zip). Drag your edited SystemUI.apk to this app folder.

Close the WinRAR window.

TRANSFERRING

Place the update.zip in /sdcard of your phone

FLASHING

Reboot.into recovery. In recovery, choose apply update from sdcard (or manually install update.zip).

Reboot when done.

THINKING

?????

LOOKING

Be proud to see your own battery icon!!!

By default I've set the level colours as

RED - 0-14%

ORANGE - 15-29%

YELLOW - 30-39%

GREEN - 40-100%

Feel free to change the level colours or apply any styles to not make it look cartoonish :P

All the best.