1. You want that $100.00 in your pocket or an Amazon Fire TV don't you? Well here's the deal. With our new updated look we are in desperate need of an updated logo. The 'old' one has certainly served us well, but it's time. Find all the details here: bit.ly/1q0k6Wa
  2. DroidForums.net is currently undergoing a major software upgrade. If you are experiencing any problems logging in please: Contact Us

Theming Guide for Progress Bar

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

  1. thebowers
    Offline

    thebowers Premium Member Theme Developer Premium Member

    Joined:
    Nov 24, 2009
    Messages:
    2,548
    Likes Received:
    0
    Trophy Points:
    0
    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:
    [​IMG]
    Last edited: Jul 17, 2010
  2. DF Smod
    Offline

    DF Smod New Member

    Joined:
    Apr 23, 2010
    Messages:
    11,477
    Likes Received:
    93
    Trophy Points:
    0
    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
    Offline

    skurtz1313 Theme Developer Theme Developer

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

    kook Premium Member Theme Developer Premium Member

    Joined:
    Dec 29, 2009
    Messages:
    2,041
    Likes Received:
    0
    Trophy Points:
    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
    Offline

    microsnook New Member

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

    HermitObserver New Member

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

    thebowers Premium Member Theme Developer Premium Member

    Joined:
    Nov 24, 2009
    Messages:
    2,548
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    Iowa
    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
    Offline

    erikfig New Member

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

    thebowers Premium Member Theme Developer Premium Member

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

    kook Premium Member Theme Developer Premium Member

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



    Sent from my Droid using Tapatalk
  11. HermitObserver
    Offline

    HermitObserver New Member

    Joined:
    Feb 6, 2010
    Messages:
    310
    Likes Received:
    0
    Trophy Points:
    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
    Offline

    thebowers Premium Member Theme Developer Premium Member

    Joined:
    Nov 24, 2009
    Messages:
    2,548
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    Iowa
    thanks for the hex codes
  13. RoLa
    Offline

    RoLa New Member

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

    sxtnitehawk New Member

    Joined:
    Aug 31, 2010
    Messages:
    36
    Likes Received:
    0
    Trophy Points:
    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
    Offline

    sxtnitehawk New Member

    Joined:
    Aug 31, 2010
    Messages:
    36
    Likes Received:
    0
    Trophy Points:
    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?
  16. DarthMurdicide
    Offline

    DarthMurdicide New Member

    Joined:
    Nov 24, 2009
    Messages:
    144
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    South of the Mason Dixon
    Does this also apply to any diagonally-striped horizontal progress bars that have two alternating colors, such as when you are downloading an app from the Market? If not, where do you make adjustments to the colors for that?
  17. sxtnitehawk
    Offline

    sxtnitehawk New Member

    Joined:
    Aug 31, 2010
    Messages:
    36
    Likes Received:
    0
    Trophy Points:
    0
    Those are actual images found in drawable-hpdi
  18. mojo_droid
    Offline

    mojo_droid Premium Member Premium Member Developer

    Joined:
    Jul 9, 2010
    Messages:
    367
    Likes Received:
    0
    Trophy Points:
    0
    Thanks for the guide, it worked great!


    Have you tried installing it in recovery by making an update.zip for it?
  19. mojo_droid
    Offline

    mojo_droid Premium Member Premium Member Developer

    Joined:
    Jul 9, 2010
    Messages:
    367
    Likes Received:
    0
    Trophy Points:
    0
    btw, how do you discover things like this? like how did you first learn what hex values to look for in the xml?
  20. YankInDaSouth
    Offline

    YankInDaSouth Theme Developer Theme Developer

    Joined:
    Jul 8, 2010
    Messages:
    2,950
    Likes Received:
    29
    Trophy Points:
    48
    Location:
    Sharpsburg, GA
    Great guide! Worked like a champ - thanks for sharing.

    My question is how do I change the actual background the sliders are on? Like in the OP, the slide itself is pink, but the background it sits on is a solid black where the default (I think) is a semi-transparent gray. I've looked all over the drawable-hdpi and I haven't had much success so I am assuming it's an xml edit?
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