[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
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!
 
Last edited:

erikalin

Senior Member
Sep 4, 2012
1,062
2,906
Twin Cities, Mini Soda USA
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
 
Last edited:

bigpappags3

Senior Member
May 19, 2013
1,374
2,825
Dalla/Ft.Worth
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.
View attachment 2599359

Sent from my SPH-L710 using Tapatalk

I'm interested. ...always like to learn new things.

http://i.imgur.com/qrByUGN.jpg
 

erikalin

Senior Member
Sep 4, 2012
1,062
2,906
Twin Cities, Mini Soda USA
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. ;)
 

erikalin

Senior Member
Sep 4, 2012
1,062
2,906
Twin Cities, Mini Soda USA
Hi Chad, I'd have to look it up, but rompnit and dazed already have it in MOAR and Wicked. So this is just a newbie guide about image editing and morph zips to replace existing images in the ROMs that have these things already. ;)

I made a Superbowl battery and shared it on both threads, and got inundated with emails from people asking me to make these for them for their own teams. Thought I'd show the few hours of work involved in what they were asking me to do for them, while showing them that it can be time consuming but it is actually simple. Dat's about it. ;)

Sent from my SPH-L710 using Tapatalk
 
Last edited:

Chad The Pathfinder

Senior Member
Mar 18, 2012
2,651
3,173
Central Kentucky
OnePlus 8T
Hi Chad, I'd have to look it up, but rompnit and dazed already have it in MOAR and Wicked. So this is just a newbie guide about image editing and morph zips to replace existing images in the ROMs that have these things already. ;)

Thanks. I'll decompile MOAR's SystemUI and compare the code. Thanks :)
 
Last edited:
  • Like
Reactions: fuzzybuffalo

Ticklefish

Recognized Themer
Oct 27, 2011
6,773
8,627
Hampshire, UK
Hey OP, how do you edit the SystemUI to show the charging pngs sequentially? The thread I followed to get the charging animation to work on my ROM has it only switching back and forth between the tw_stat_sys_battery_charge_x and the tw_stat_sys_battery_x

You'll need to edit the 'stat_sys_battery_charge.xml' in the drawable folder.
 

erikalin

Senior Member
Sep 4, 2012
1,062
2,906
Twin Cities, Mini Soda USA
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
 
Last edited:

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. ;)