Theming Guide for Progress Bar

Discussion in 'Team Inversion Conversion' started by thebowers, Jul 16, 2010.

  1. thebowers

    thebowers Premium Member Theme Developer Premium Member

    Joined:
    Nov 24, 2009
    Messages:
    2,547
    Likes Received:
    1
    Trophy Points:
    101
    Location:
    Iowa
    Ratings:
    +1
    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:
    [​IMG]
     
    Last edited: Jul 17, 2010
  2. DF Smod

    DF Smod Silver Member

    Joined:
    Apr 23, 2010
    Messages:
    11,457
    Likes Received:
    92
    Trophy Points:
    163
    Ratings:
    +92
    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
     
  3. skurtz1313

    skurtz1313 Theme Developer Theme Developer

    Joined:
    Apr 8, 2010
    Messages:
    358
    Likes Received:
    0
    Trophy Points:
    16
    Ratings:
    +0
    Great guide thank you for putting this together!
     
  4. kook

    kook Premium Member Theme Developer Premium Member

    Joined:
    Dec 29, 2009
    Messages:
    2,041
    Likes Received:
    0
    Trophy Points:
    101
    Ratings:
    +0
    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
     
  5. microsnook

    microsnook Active Member

    Joined:
    Feb 8, 2010
    Messages:
    1,291
    Likes Received:
    0
    Trophy Points:
    36
    Ratings:
    +0
    That will come in handy, thank you
     
  6. HermitObserver

    HermitObserver Member

    Joined:
    Feb 6, 2010
    Messages:
    310
    Likes Received:
    0
    Trophy Points:
    16
    Ratings:
    +0
  7. thebowers

    thebowers Premium Member Theme Developer Premium Member

    Joined:
    Nov 24, 2009
    Messages:
    2,547
    Likes Received:
    1
    Trophy Points:
    101
    Location:
    Iowa
    Ratings:
    +1
    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.
     
  8. erikfig

    erikfig Member

    Joined:
    May 12, 2010
    Messages:
    544
    Likes Received:
    0
    Trophy Points:
    16
    Ratings:
    +0
    This looks kind of crazy but I will give it a try!
     
  9. thebowers

    thebowers Premium Member Theme Developer Premium Member

    Joined:
    Nov 24, 2009
    Messages:
    2,547
    Likes Received:
    1
    Trophy Points:
    101
    Location:
    Iowa
    Ratings:
    +1
    What color codes did you use for your fill? I like it and might make it my background for the progress bar.
     
  10. kook

    kook Premium Member Theme Developer Premium Member

    Joined:
    Dec 29, 2009
    Messages:
    2,041
    Likes Received:
    0
    Trophy Points:
    101
    Ratings:
    +0
    Thanks....that's exactly what I wanted to know....



    Sent from my Droid using Tapatalk
     
  11. HermitObserver

    HermitObserver Member

    Joined:
    Feb 6, 2010
    Messages:
    310
    Likes Received:
    0
    Trophy Points:
    16
    Ratings:
    +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: Jul 18, 2010
  12. thebowers

    thebowers Premium Member Theme Developer Premium Member

    Joined:
    Nov 24, 2009
    Messages:
    2,547
    Likes Received:
    1
    Trophy Points:
    101
    Location:
    Iowa
    Ratings:
    +1
    thanks for the hex codes
     
  13. RoLa

    RoLa Member

    Joined:
    Jan 31, 2010
    Messages:
    876
    Likes Received:
    0
    Trophy Points:
    16
    Location:
    801
    Ratings:
    +0
    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![​IMG]
    Here is another[​IMG]
     
    Last edited: Aug 1, 2010
  14. sxtnitehawk

    sxtnitehawk Member

    Joined:
    Aug 31, 2010
    Messages:
    36
    Likes Received:
    0
    Trophy Points:
    6
    Ratings:
    +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: Sep 5, 2010
  15. sxtnitehawk

    sxtnitehawk Member

    Joined:
    Aug 31, 2010
    Messages:
    36
    Likes Received:
    0
    Trophy Points:
    6
    Ratings:
    +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?
     
Search tags for this page
android progress bar background image
,
android skin progress bar
,
progres bar .9.png
,
progress bar with theme android
,
progressbar 9 png
,
striped progress bar android
,
themeing guide
,
themer progress bars
,
toast frame android png
,

toast frame.9.png