How to develop progress bar like attached image?

Question

I have a progress bar, it looks like in image 1 and it should look like image 2. Below is my code for the progress bar. Please advise how to do that. Attached images are links cause it won't allow me to upload images directly.

MyProgressBar

Requirement

Below is the code in Layout:

<ProgressBar
    android:id="@+id/percentage_circle"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="161dp"
    android:layout_height="161dp"
    android:max="100"
    android:progress="0"
    android:progressDrawable="@drawable/xml_custom_circular_progress" />

Below is the code in drawable

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

    <item android:id="@android:id/background" >
        <shape
            android:innerRadiusRatio="2.5"
            android:thicknessRatio="25"
            android:shape="ring"
            android:useLevel="false">
            <solid android:color="@color/black_50" />
            <stroke android:color="@color/text_white"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%" >
            <shape
                android:innerRadiusRatio="2.5"
                android:thicknessRatio="25"
                android:shape="ring"
                >
                <gradient
                    android:endColor="@color/history_graph_gradient_end"
                    android:angle="90"
                    android:startColor="@color/history_graph_gradient_start"
                    android:centerColor="#0033C2"
                    android:type="sweep" />
            </shape>
        </rotate>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%" >
            <shape
                android:innerRadiusRatio="2.5"
                android:thicknessRatio="25"
                android:shape="ring"
                >
                <gradient
                    android:endColor="@color/history_graph_gradient_end"
                    android:angle="90"
                    android:startColor="@color/history_graph_gradient_start"
                    android:centerColor="#0033C2"
                    android:type="sweep" />
            </shape>
        </rotate>
    </item>
</layer-list>

I don't have inner borders showing up and the background of the progressbar. I really need help with it.