Theming Guide for Progress Bar

thebowers

Premium Member
Premium Member
Theme Developer
Joined
Nov 24, 2009
Messages
2,545
Reaction score
1
Location
Iowa
Making this thread for people having issues figuring this out. Hope this helps you all.

Apps and resources needed
HxD hex editor can be found here Downloads | mh-nexus .
Color guides to go off of. I use this site for color gradients. #9d9e9d Gradient Color Chart
7-zip for opening .apk files with out changing .zip to extract. 7-Zip
framework-res.apk (after all this file is located in here).

Starting the process
1. Take 7-zip and extract framework-res.apk somewhere on your computer.
2. Navigate with in the new folder called framework-res to /res/drawable.
3. In here you will find the file progress_horizontal.xml
4. Open this file with HxD.

Understanding Hex values
The hex color values are backwards of what they would be in normal xml. The first default value in this xml is 9D 9E 9D FF. People get confused here so we are going to break it down.

The first 9D is for blue (B)
The 9E is for green (G)
The second 9D is for red (R)
Last is FF for alpha (A) - I always leave this value alone.

In normal hex it would be this way FF 9D 9E 9D.

First is FF for alpha (A)
The first 9D is for red (R)
The 9E is for green (G)
Last is the 9D for blue (B)

Do you see the difference? Lets do another example with different hex value. 9D128D is a purple color (just using it as different values).

9D = R
12 = G
8D = B

So in binary, here in Hxd it would be this way 8D 12 9D FF

8D = B
12 = G
9D = R

Now to edit the file
1. Now the file is open in HxD. Hit Ctrl+F to bring up the find box.
2. In this box put 08 00 00 1c in the Search for box. For data-type switch to Hex-values. Search direction should be for forward. Go ahead and click ok.
3. Now 08 00 00 1C will be highlighted. The eight numbers next to it are the color value in hex format. There will be nine of these values in this xml.

Default values in the xml > normal hex format
1. 9D 9E 9D FF --- FF 9D 9E 9D
2. 74 76 74 FF --- FF 74 76 74
3. 5A 5D 5A FF --- FF 5A 5D 5A
4. 00 D3 FF 80 --- 80 FF D3 00
5. 00 CB FF A0 --- A0 FF CB 00
6. 00 B6 FF 80 --- 80 FF B6 00
7. 00 D3 FF FF --- FF FF D3 00
8. 00 CB FF FF --- FF FF CB 00
9. 00 B6 FF FF --- FF FF B6 00
The first three are for the background and the last six are for the foreground (fill progress).

4. Click next to the highlight hex string of 08 00 00 1C. You can edit the 9D 9E 9D FF or leave it alone. I skip the first three since they are the background. These values represent the start, end and middle of the gradient

value 1 = start
value 2 = end
value 3 = middle

Middle is going to be the darkest one.

5. To get from one value to the next hit Ctrl+F again and hit ok. Make sure that you don't have 08 00 00 1C highlighted or it won't go to the next one.
6. Go to value 4 (00 D3 FF 80). In this example I am going to change it to FF00DC (pink). I put that hex color in the website from above. Get color info. Then click the link for color gradient colors. We will look at that in a bit. Back to HxD. I would put it in as DC 00 FF 80. Then hit Ctrl+F and hit ok.
7. We should be on value 5 (00 CB FF A0). When doing this color I go to the gradient chart for the start color to black. I go down 12 colors from FF00DC to CC00B0. That is what I am going to put in for value 5. So in HxD I put in B0 00 CC A0. Then hit Ctrl+F and hit ok.
8. Value 6 (00 B6 FF 80). Back to the chart. I go down 8 colors from CC00B0 to AA0092. This is going to be value 6. In HxD put in 92 00 AA 80. Hit Ctrl+f to go to value 7.
9. Value 7 is going to be the same as 4 but with alpha of FF. (DC 00 FF FF). Ctrl+F to go to value 8.
10. Value 8 is going to be the same as 5 but with alpha of FF. (B0 00 CC FF). Ctrl+F to go to value 9.
11. Value 9 is going to be the same as 6 but with alpha of FF. (92 00 AA FF). This is the last value. Go to file and save. Now you will have a progress_horizontal.xml and a progress_horizontal.bak (the .bak file is the orginal.

Pushing the new file to the system
1. Open the framework-res.apk as an archive with 7-zip. Go to /res/drawable. Take the progress_horizontal.xml we just did and put it in here. Hit the folder up until all the way out of framework-res.apk.
2. Either take the framework-res.apk and put in the tools folder of ADB and push to phone or use Root explorer to do this. I would stay away from doing this with terminal as it usually causes problems. Also with using ADB, you may want to do this while in recovery.
3. Reboot you phone for the changes to take affect. All progress bars should now be the gradient color you just made, enjoy.


I will add pics later of what the above example of pink will look like when done. Feel free to post your new bars here as well.:icon_eek:
49565eb4.jpg
 
Last edited:

DF Smod

Silver Member
Joined
Apr 23, 2010
Messages
11,341
Reaction score
88
Bowers you always have good information. This one is pretty detailed, I have had success in changing my own progress bar but it looks like I could learn more here, thanks for posting this
 

skurtz1313

Theme Developer
Theme Developer
Joined
Apr 8, 2010
Messages
358
Reaction score
0
Great guide thank you for putting this together!
 

kook

Premium Member
Premium Member
Theme Developer
Joined
Dec 29, 2009
Messages
2,036
Reaction score
1
Are 4,5,6 the top part of the progress bar and 7,8,9 the bottom? If not, how would you go about doing a fade?

Sent from my Droid using Tapatalk
 
OP
thebowers

thebowers

Premium Member
Premium Member
Theme Developer
Joined
Nov 24, 2009
Messages
2,545
Reaction score
1
Location
Iowa
Are 4,5,6 the top part of the progress bar and 7,8,9 the bottom? If not, how would you go about doing a fade?

Sent from my Droid using Tapatalk

4 = top or start of gradient
5 = bottom or end of gradient
6 = middle or darkest part of gradient

7,8,9 are the same colors in the same order. Only thing different is the alpha or transparency to the colors. This is just by going from the orginal values.

Experiment and see what happens. I am just giving info on what the defaults are and a quick way to change colors that are not a flat color.
 

kook

Premium Member
Premium Member
Theme Developer
Joined
Dec 29, 2009
Messages
2,036
Reaction score
1
Thanks....that's exactly what I wanted to know....

Are 4,5,6 the top part of the progress bar and 7,8,9 the bottom? If not, how would you go about doing a fade?

Sent from my Droid using Tapatalk

4 = top or start of gradient
5 = bottom or end of gradient
6 = middle or darkest part of gradient

7,8,9 are the same colors in the same order. Only thing different is the alpha or transparency to the colors. This is just by going from the orginal values.

Experiment and see what happens. I am just giving info on what the defaults are and a quick way to change colors that are not a flat color.



Sent from my Droid using Tapatalk
 
Joined
Feb 6, 2010
Messages
307
Reaction score
0
4th Value: 68 68 68
5th Value: 39 39 39
6th Value: 15 15 15

Took a lot of fine tuning to get it the way I like it, so I really hope you can enjoy it, too :) Thanks for the guide man.
 
Last edited:
OP
thebowers

thebowers

Premium Member
Premium Member
Theme Developer
Joined
Nov 24, 2009
Messages
2,545
Reaction score
1
Location
Iowa
thanks for the hex codes
 

RoLa

Member
Joined
Jan 31, 2010
Messages
874
Reaction score
0
Location
801
Here is the one I did for Inspired. As stated in the OP, There are 9 instances for the edit....the first three control the background color. I did grey for #1 and #2 and black for the third. The next six are for the top part (cyan color) I did grey for the 1st and last and then cyan for the middle four.The grey color is 362f26....so in the edit it looks like this...262f36 FF Thank You Jairomeo and thebowers!
snap20100801112554.png

Here is another
phoneh.png
 
Last edited:

sxtnitehawk

Member
Joined
Aug 31, 2010
Messages
36
Reaction score
0
I tried this and I'm getting a bootloop.....obviously i did something wrong...cant figure out what though...

Edit: I tried again and nothing changed... No boot loop but also no change in color.....
 
Last edited:

sxtnitehawk

Member
Joined
Aug 31, 2010
Messages
36
Reaction score
0
After trying again and again and again I decided to push/pull in recovery to see if the changes actually end up on the phone...

got into recovery, pushed...waited a minute, pulled, checked, and yeah the changed are in the file...

boot up the phone, pull again.....changes are gone.....

somehow, my phone is reverting the file back automatically.....

Ideas?
 
Top