Welcome to XDA

Search to go directly to your device's forum

Register an account

Unlock full posting privileges

Ask a question

No registration required
Post Reply

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

OP erikalin

4th February 2014, 05:12 PM   |  #1  
erikalin's Avatar
OP Recognized Contributor
Flag Boston - Southern NH ish
Thanks Meter: 2,641
 
950 posts
Join Date:Joined: Sep 2012
Donate to Me
More
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...



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:

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 by erikalin; 17th June 2014 at 11:54 PM.
The Following 26 Users Say Thank You to erikalin For This Useful Post: [ View ]
4th February 2014, 05:33 PM   |  #2  
EVObastard's Avatar
Senior Member
Philladelphia
Thanks Meter: 235
 
401 posts
Join Date:Joined: Jan 2013
More
Wahoo my first, first reply.
Oh and this is awesome, exactly what I've been looking for.

SGS3
Android 4.3
MK3 modem
KT747 kernel
4th February 2014, 06:39 PM   |  #3  
dazednconfused's Avatar
Recognized Themer / Recognized Developer
Flag Charleston, WV
Thanks Meter: 20,445
 
6,377 posts
Join Date:Joined: Jan 2011
Donate to Me
More
Nice job erikalin putting this how to together. Thanks for sharing with us all.
The Following User Says Thank You to dazednconfused For This Useful Post: [ View ]
5th February 2014, 05:13 AM   |  #4  
ryno2333's Avatar
Member
Thanks Meter: 25
 
37 posts
Join Date:Joined: Oct 2010
This is great. Nice job

Sent from my SPH-L710 using Tapatalk
5th February 2014, 01:55 PM   |  #5  
prboy1969's Avatar
Recognized Contributor
Flag Michigan
Thanks Meter: 7,034
 
10,320 posts
Join Date:Joined: May 2009
More
Nice write up. Thanks .

TEAM MiK MikROMs Since 3/13/11
25th February 2014, 08:26 AM   |  #6  
erikalin's Avatar
OP Recognized Contributor
Flag Boston - Southern NH ish
Thanks Meter: 2,641
 
950 posts
Join Date:Joined: Sep 2012
Donate to Me
More
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.

Such as this example.
Click image for larger version

Name:	uploadfromtaptalk1393313157218.jpg
Views:	210
Size:	130.2 KB
ID:	2599359

Sent from my SPH-L710 using Tapatalk
Last edited by erikalin; 25th February 2014 at 08:39 AM.
The Following 5 Users Say Thank You to erikalin For This Useful Post: [ View ]
25th February 2014, 09:13 AM   |  #7  
bigpappags3's Avatar
Senior Member
Flag Dalla/Ft.Worth
Thanks Meter: 2,784
 
1,352 posts
Join Date:Joined: May 2013
More
Quote:
Originally Posted by erikalin

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.


Such as this example.
Attachment 2599359

Sent from my SPH-L710 using Tapatalk

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

http://i.imgur.com/qrByUGN.jpg
25th February 2014, 10:10 PM   |  #8  
CNexus's Avatar
Recognized Contributor
Flag /home/cnexus/android
Thanks Meter: 13,700
 
9,047 posts
Join Date:Joined: May 2012
Donate to Me
More
Quote:
Originally Posted by bigpappags3

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

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

+1

Always interested in learning something new
26th February 2014, 03:40 AM   |  #9  
Chaz187's Avatar
Recognized Themer
Flag Orange city
Thanks Meter: 2,882
 
2,088 posts
Join Date:Joined: Sep 2011
Donate to Me
More
+2

Sent from my SPH-L900 using Xparent Green Tapatalk 2
26th February 2014, 09:53 AM   |  #10  
erikalin's Avatar
OP Recognized Contributor
Flag Boston - Southern NH ish
Thanks Meter: 2,641
 
950 posts
Join Date:Joined: Sep 2012
Donate to Me
More
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.

The Following 5 Users Say Thank You to erikalin For This Useful Post: [ View ]
Post Reply Subscribe to Thread

Tags
battery mod
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes