Circular ProgressBar Background: Android Xamarin

Question

I have a circular progress-bar and it works fine.But Background is not appearing, even though i have given shape for "background" in the xml drawable file and also progress starts from the right side of the circle (as shown in the figure). I want it to make it from the top.

enter image description here

Here is my code:

 <ProgressBar
        android:id="@+id/progressBarToday"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_centerInParent="true"
        android:indeterminate="false"
        android:max="60"
        android:progress="0"
        android:progressDrawable="@drawable/progressbar" />

progressbar.xml

    <?xml version="1.0" encoding="UTF-8" ?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"> <---not working!
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="7.0">
        <solid android:color="@color/red"/>
        </shape>
    </item>
    <item android:id="@android:id/progress">
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="7.0">
        <solid android:color="@color/blue"/>
        </shape>
    </item>
    </layer-list>

I use following code to set progress:

    ProgressBar pb = (ProgressBar)FindViewById (Resource.Id.progressBarToday);  
    _progressBar.Progress = _progressCount;

Why the background is not appearing? and How can i make the progress start from the top?

Anyone please help, Thanks.

Where do you define progressBarStyleHorizontal? – Jakub Holovsky Sep 21 '15 at 09:49 — Jakub Holovsky, Sep 21 '15 at 09:49

score 27 · Answer 1 · answered Jun 14 '14 at 16:44

You need to add the following attribute to the background item:

android:useLevel="false"

Like so:

<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:id="@android:id/background"> <---not working!
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:useLevel="false"
        android:thicknessRatio="7.0">
        <solid android:color="@color/red"/>
    </shape>
  </item>
  <item android:id="@android:id/progress">
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="7.0">
        <solid android:color="@color/blue"/>
    </shape>
  </item>
</layer-list>

I've been through so many posts and none worked till this one, I've looked at this value but the documentation did not make me think it has anything to do with my problem. I'll be glad for a clarification if you have it and thanks anyway! — MikeL, Mar 29 '18 at 14:34

score 6 · Answer 2 · answered Jun 10 '14 at 23:38

To start from the top, you can use "rotate

<item android:id="@android:id/progress">
    <rotate
        android:fromDegrees="-90"
        android:toDegrees="-90">
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thicknessRatio="7.0"
            android:useLevel="true">
            <solid android:color="@color/blue"/>
        </shape>
     </rotate>
</item>

score 4 · Accepted Answer · answered Apr 11 '14 at 06:17

4

I got it working

     <ProgressBar
            android:id="@+id/progressBarToday"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="50dip"
            android:layout_height="50dip"
            android:layout_centerInParent="true"
            android:indeterminate="false"
            android:max="60"
            android:progress="0"
            android:background="@drawable/bg" // here is working background
            android:progressDrawable="@drawable/progressbar" />

answered Apr 11 '14 at 06:17

Erma Isabel

2,167
8
34
64

Is there any way to make the progress bar thicker? – roshkattu Jun 10 '14 at 11:21
yes, change the thickness ratio android:thicknessRatio="7.0" – Erma Isabel Jun 11 '14 at 03:13
4

@Erma Isabel can you please put the @drawable/bg and @drawable/progressbar code. Thanks in Advance – Somir Saikia Dec 18 '14 at 10:02
`@drawable/bg`is an image, picture, whereas `@drawable/progressbar`is the progressbar.xml file you can see in the question. – Eli Jul 18 '17 at 11:37

Nandan Singh · Answer 4 · 2015-08-01T11:13:49.650

Yes. I am too late but this may help other. This code will return a bitmap image and can be used in a ImageView or ImageButton .

private Bitmap progressBar(int progress) {

       Bitmap bitmap = Bitmap.createBitmap(300, 300, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        paint.setColor(Color.parseColor("#FF0000"));
        paint.setStrokeWidth(20);
        paint.setAntiAlias(true);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawCircle(150, 150, 140, paint);
        paint.setColor(Color.parseColor("#01aa01"));
        paint.setStrokeWidth(16);
        paint.setStyle(Paint.Style.STROKE);
        final RectF oval = new RectF();
        paint.setStyle(Paint.Style.FILL);
        oval.set(10, 10, 290, 290);
        canvas.drawArc(oval, 270, (progress * 360) / 100, true, paint);
        paint.setStrokeWidth(1);
        paint.setTextSize(100);
        paint.setTextAlign(Align.CENTER);
        paint.setColor(Color.parseColor("#ffffff"));
        canvas.drawText("" + progress, 150, 150 + (paint.getTextSize() / 3),
                paint);

    return bitmap;
}

Circular ProgressBar Background: Android Xamarin

4 Answers4

Linked