Seekbar or progress bar with multiple colors

Question

I want to create a bar like this initially when progress is zero it will be a

Answer 1

Finally! I went on a mission to figure this out for you, so if this suffices, feel free to give me that bounty, haha.

---

Try using this in your layout:

which references this drawable (progressmask.xml):

and this image (colorprogress.png)

What it does is set the image as the background of a linearlayout, which contains a progressbar. The progressbar adds a semi-transparent black mask to the image to make it appear that the lights are off.

NOTE: In order to get this affect, I had to monkey with the progress bar (i.e. flip it, and set it to only 10 intervals. You will have to do some math to get the progress to line up with the image. i.e. setprogress((100-trueprogress)/10). Sorry I did not do this part for you.

This is what it will look like at progress 50% (the small x's and triangles will disappear on the device)

I hope this answers your question!