A Beginner's Guide
You can do this for MK3 stock-based builds ~ i.e. the MK3 builds of MOAR or Wicked Sensations
News! This guide was featured on the news portal!
For example, this animated gif shows the battery charging animation from the one I made for myself. It uses my own app icon plus a google-like cube I drew. The animation I made looks like this (view in browser or click image). Fun for me...
This is actually very easy once you see what you have to do. The time-consuming part is editing 203 tiny images. Okay? Check it out.
Update: You can also make a huge animated battery - more space for more detail. Be creative! You could make all sorts of different animations with more space. I have ideas. I'm sure you can be creative. I made one with my google-ish theme. It looks like what you see here. If you want to make a gigantic animated battery, follow these same steps in this OP and just use the correct template file below. See also here for more info on the gigantic animated battery.
First get these things:
1b. Download this file BIG_Goog_Anim_Batt.zip if you want to make a gigantic animated battery: http://www.androidfilehost.com/?fid=23329332407576520
2. Get 7-zip if you don’t have it. Free here: http://www.7-zip.org
3. Get Paint.net if you don’t have an image editor that can work with transparency/alpha layers and png files. Free here: http://www.getpaint.net/
4. Find or create two different images to use as a base. This is the reason you’re doing this, because you want a certain thing. Find or create two images that you want to use for this. You’ll use one image to make the 101 images for unplugged percentages. You’ll use the other image to make the 102 images for the animation when plugged in. They need to be 45 px X 45 px, transparent png files, or you can make them into that. For gigantic animated battery they need to be 42 px X 84 px wide, or you can make them into that.
Once you have your two base images at the correct size for your desired animated battery sequence, let’s get you started on the little bit tedious part…
Do these things:
2. TAKE THAT FOLDER OUT to your desktop or something (drawable-xhdpi)
3. Look inside that folder. Replace all of those images with whatever you are creating for your own animated battery image set. (That part can take a while.) You must use the exact file names for every one, and use the same image size as what I have in there. Just “save as” and double click on each one to replace, so you’re certain to not change any of the file names by mistake.
4. After you’ve done all your images, drag that shiny new drawable-xhdpi folder back into the zip file. Close the zip file. Rename the zip file so you know it’s the one you just made.
5. Make a backup then flash that zip to check out your work.
Or if you are a visual person, I recorded making one that I wanted to make for myself. Not my best video, don’t judge, but a quick thing if you need to see it happen. I had a robot voice do the talking in the video too, for no particular reason other than it’s funny to me. The video refers to the regular sized animated battery. Making the gigantic animated battery is the same process. Just use bigger images.
Hope this is helpful. Here are the four I have made up to share:
New! Giant Animated Google-ish (as shown in the larger gif of the OP): http://www.androidfilehost.com/?fid=23329332407576520
Red Sox: http://www.androidfilehost.com/?fid=23329332407566593
Sigma and Cube (as shown in the top gif of the OP): http://www.androidfilehost.com/?fid=23329332407569004