Custom Knob View For Controlling Volume?

I want to show progress bar around knob. After following this tutorial I created this knob it is working fine. But How could i modify the above knob to look like the second

Solution 1:

Use two XML files.

circular_progress_drawable.xml

<?xml version="1.0" encoding="utf-8"?><rotatexmlns:android="http://schemas.android.com/apk/res/android"android:fromDegrees="270"android:toDegrees="270"><shapeandroid:innerRadiusRatio="2.5"android:shape="ring"android:thickness="1dp"><gradientandroid:angle="0"android:endColor="#22FA05"android:startColor="#22FA05"android:type="sweep"android:useLevel="false" /></shape></rotate>

and background_circle.xml

<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="ring"android:innerRadiusRatio="2.5"android:thickness="1dp"android:useLevel="false"><solidandroid:color="#000000" /></shape>

and finally

<ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:indeterminate="false"
        android:progressDrawable="@drawable/circular_progress_drawable"
        android:background="@drawable/background_circle"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        android:progress="25" />

Note that set width and height based on the image position you have