[How to] Make your own animated battery [TW] [mod] [beginner]

Search This thread

erikalin

Senior Member
Sep 4, 2012
1,062
2,906
Twin Cities, Mini Soda USA

Lol. It's not actual theming because that's already done in these ROMs. Just showing how to replace png files. I got more email requests from people asking me to make these for them than anything else I've done, so I spent a couple hours "teaching a man to fish" ...;)

Sent from my Verizon HTC One M8
 

Top Liked Posts

  • There are no posts matching your filters.
  • 27
    How to make your own animated battery
    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...

    output_41k_LCR.gif

    Sigma_Cube_Batt.png

    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.
    Big_Goog_Anim_Batt.gif


    First get these things:

    1a. Download this file Template_Animated_Batt.zip. for regular sized animated battery: http://www.androidfilehost.com/?fid=23329332407569005
    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:

    1. Do not unzip, just navigate into your template zip to this folder:
    Vrtheme/system/app/SystemUI.apk/res/drawable-xhdpi

    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.

    Video Walk-through:

    Please do not quote the OP in a reply.

    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
    Seahawks: http://www.androidfilehost.com/?fid=23329332407568579
    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


    If you make some good stuff, take screenshots and share the zip file on this thread!
    6
    I made a new, oversized animated battery for my own phone. I'm into this google-ish theme I've been working on, so here is another fun animated battery if anyone wants it. It has a sort of flickering lightning bolt for under 30, and then four google-color cubes that fill in from left to right. Unplugged images are the same in this one but you can always make them different if you want for your own.

    This is an animated gif. If viewing on mobile, click thru to view animation:
    Big_Goog_Anim_Batt.gif

    Download here: http://www.androidfilehost.com/?fid=23329332407576520

    This works on Wicked Sensations MK3 to add some goggley color variety to your theme.

    My screenshot shows it on MOAR MK3. To use this oversized animated battery as your stock battery in MOAR:
    Go into Settings -> My Device -> MOAR Mod control - Battery Settings -> change color to white and uncheck alpha.

    Backup first in case you don't like it. I like it. :good:

    If you want to make a huge animated battery image set for yourself, follow the steps in the OP. Instead of using the template ZIP in the OP, just use my flashable zip fle from this post. Replace all of my images with your own of the same size, one by one. The little video in the OP walks you through how to do that. Enjoy.

    animbattss_1.png
    6
    I see some downloads and video views. Anyone have a screenshot to show off your creations for animated batteries?

    New Question...

    Any interest in a tutorial for how to create your own custom toggles? Not talking about just replacing the image behind them but actually drawing the individual toggles out how you want? Let me know. Lots of creativity around here and I'm glad to support that. And newbies don't need to sit back and not take part in things like this kind of basic theming. I'll set ya' up. ;)
    output_a_Q41_Na.gif

    Such as this example.
    uploadfromtaptalk1393313157218.jpg

    Sent from my SPH-L710 using Tapatalk
    6
    Okay, right on. I'll put it together in a few days. I think I don't need to start a new thread for a new tutorial of this nature. I will just keep it in this thread and change the title when I add the tutorial on drawing and replacing toggle images. I hope people will notice it's here! ;)

    I'll use the same format - explaining in steps plus making up a video demo with the robot-voice, same as what I put in the OP here. I'll do that unless someone has a suggestion for a different format. No need to reply unless you have a request or suggestion for how to make the toggles tutorial better than like what you see in the OP for the animated battery tutorial...

    Otherwise, stay tuned. ;)
    4
    Hey! I just noticed while searching for something else that my guide here was featured on the portal! Thank you to whomever recommended it.
    P.S. Future reference, I like to know when my stuff is on the portal, so... feel free to mention to me. ;)