CODEWITHSUNDEEP
androidandroid-layoutchartsandroid-drawableandroid-progressbar
Antiohia
Antiohia

Reputation: 1232

Vertical line in android progress bar

I need a horizontal progress bar with a black vertical line at the end of the main process. With my code, the progress bar is ok but the line is always in the middle of the bar. I tried using clip but then it disappears instead of going at the end of the segment.

My code

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:id="@android:id/background">
     <shape android:shape="rectangle">
         <corners android:radius="5dip" />
         <solid android:color="#ffffffff" />
         <stroke android:width="1dip" android:color="#ff000000" />
     </shape>
 </item>

 <item android:id="@android:id/progress">
     <clip>
         <shape>
             <corners android:radius="5dip" />
             <solid android:color="#33b5e5" />
             <stroke android:width="1dip" android:color="#ff000000" />
         </shape>
     </clip>
 </item>

 <item android:id="@+id/line">
     <rotate android:fromDegrees="90"
            android:toDegrees="90" >
         <shape android:shape="line">
             <stroke android:width="5dp" android:color="#ff000000"/> 
         </shape>
     </rotate> 
 </item>

</layer-list>

My question

As I have to add another process to the bar, I can't use the secondaryProgress tag for the line. Also, there are quite a lot of possibilities for the position of the line and for the colors of the bar, and I wouldn't like to do 10 different drawables.

Is it possible to achieve what I want with a progress bar or is there a better way to do it? I searched for threads about vertical line and also about multicolor bars, and even about stacked charts. But somehow, I wasn't able to find an appropriate library or a simple way to do my progress bar.

Goal

Here is a picture of what I want to have at the end:

enter image description here

I need the vertical line for displaying a 100% mark in bars which may "exceed 100%". The progress may be displayed from left to right or from right to left.

Upvotes: 3

Views: 2202

Answers (1)

Antiohia
Antiohia

Reputation: 1232

I found a solution... I removed the line item from the code above and added the following code to the onDraw() method:

Paint linePaint = new Paint();
linePaint.setColor(getResources().getColor(android.R.color.black));
final float lineWidth = 5f;
linePaint.setStrokeWidth(lineWidth);
canvas.drawLine(getWidth() * m100 / 100, 0, 
                getWidth() * m100 / 100, getHeight(), 
                linePaint);

In the code, m100 is the position of the line as integer. For example, it is 80 if the 100% like mark should be positioned at 80% of the bar length.

Upvotes: 1

Related Questions