0

I was given a design for a custom ProgressBar that looks like this:

enter image description here

The way it works is that the bar is completely blue at 0 progress, and as progress is incremented, each side fills in equally white toward the center until the entire bar is white at max progress.

I've got the bar set up just fine. I'm using two ProgressBar objects, one that moves left-to-right, and the other rotated so that it moves right-to-left.

The part I'm stuck at is how to draw those extra circle shapes that move toward the center along with the white progress <clip>. I tried just adding an extra <shape> to my <clip> item in the XML, but that stretched the circle out as if it was using the circles to fill in the bar.

Is there a way I can add these extra shapes to the ProgressBar XML itself, or do I need to create another drawable for these shapes and then update their position manually in code? I'm not sure what the correct approach is here and I haven't been able to find any similar examples in my research. Any help is appreciated!

Here's the XML I'm using for the progressDrawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/background">
        <shape>
            <corners
                android:topLeftRadius="12dp"
                android:bottomLeftRadius="12dp"/>
            <solid android:color="#29A4DD"/>
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners
                    android:topLeftRadius="12dp"
                    android:bottomLeftRadius="12dp"
                    android:topRightRadius="0dp"
                    android:bottomRightRadius="0dp"/>
                <solid android:color="#F05926"/>
            </shape>
        </clip>
    </item>
</layer-list>
NoChinDeluxe
  • 3,446
  • 1
  • 16
  • 29
  • just use one `PrograessBar` with a custom `Drawable`, see [here](http://stackoverflow.com/a/30873744/2252830) on how to create one, this `Drawable` is ready for use with `setProgressDrawable` – pskink Jun 22 '16 at 16:22
  • While I'm aware pretty much anything can be done programatically with a custom `Drawable`, I'm unfamiliar with drawing that way and would like to save myself some time researching if I can accomplish this in XML. For example, Romain Guy accomplished something similar to what I want within a circular `ProgressBar`, so it seems it would be possible for a horizontal bar as well: http://stackoverflow.com/questions/23915561/how-does-progressbar-drawable-work?rq=1 – NoChinDeluxe Jun 22 '16 at 17:40

0 Answers0