How to draw a vertical line in “android Horizontal Progress bar”

Question

I need to make a custom horizontal progress bar like the image given below.

And I have designed the the progress bar like the image below using layer-list in drawable:

I want to draw a vertical line when progress is greater than 25 like the image that I need. I wrote this code but it didn't work.

myProgressBar = (ProgressBar) findViewById(R.id.progress);
Canvas canvas = new Canvas();
Paint p = new Paint();
p.setStrokeWidth(2);
p.setColor(Color.WHITE);
canvas.drawLine(a, b, c, d, p);

if(myProgressBar.getProgress() > 25){
    myProgressBar.draw(canvas);
}

So please help me in drawing a vertical line in the progress bar. This is my first question in the stack overflow so there may be some mistakes sorry for this.

Answer 1

You can try to using layer list

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:id="@android:id/background">
       <shape>
            <corners android:radius="3dip" />
            <gradient
                android:angle="0"
                android:endColor="#e9e9f4"
                android:startColor="#e9e9f4" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:angle="0"
                    android:endColor="#16a023"
                    android:startColor="#16a023" />
            </shape>
        </clip>
    </item>
    <item android:id="@+id/line" >
        <rotate android:fromDegrees="90" android:pivotX="10%" >
           <shape android:shape="line" >
               <stroke android:width="2dp" android:color="#ffffff" />
           </shape>
       </rotate>
   </item>
</layer-list>

Answer 2

From my point of view is that uhave to render that line when it is greater than 25.. try this and lemme know

if(myProgressBar.getProgress() > 25){
    canvas.drawLine(a, b, c, d, p);
    myProgressBar.draw(canvas);
}

Answer 3

Question is pretty old but still comes up on google. I'm not sure if you want your vertical lines above or below the progress status. Ali's answer make the line appear above and I wanted the line appear below so here is my version of the layer-list :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <layer-list>
            <item>
                <shape android:shape="rectangle">
                    <solid android:color="@color/light_gray"/>
                    <corners
                        android:bottomRightRadius="10dp"
                        android:topRightRadius="10dp" />
                </shape>
            </item>
            <item>
                <rotate android:fromDegrees="90" android:pivotX="53%">
                    <shape android:shape="line" android:tint="@color/white">
                        <stroke android:width="1dp"/>
                    </shape>
                </rotate>
            </item>
        </layer-list>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <scale android:scaleWidth="100%">
                <shape android:shape="rectangle">
                    <solid android:color="@color/bright_teal"/>
                    <corners
                        android:bottomRightRadius="10dp"
                        android:topRightRadius="10dp" />
                </shape>
            </scale>
        </clip>
    </item>
</layer-list>

The second item in the nested layer-list is your vertical line. You can put as much vertical lines as you want and set their position by changing the android:pivotX value.