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.

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.

Answer 1

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>

Answer 2

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>

Answer 3

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" />

Answer 4

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;
}