How to draw custom circle with a fill color in android?

Question

I'm trying to draw this shape in my android app :

i want to draw a hollow circle with wide stroke,

i want to draw a hollow circle with wide stroke, and i want that each circle will fill in a custom way. if the user enter 57 then the circle stroke will be 57% yellow and in the middle of the shape will be text view. is there a way to do it?

this is my code so far:

public class MyView extends View {

Paint paint;
Path path;

public MyView(Context context) {
 super(context);
 init();
}

public MyView(Context context, AttributeSet attrs) {
 super(context, attrs);
 init();
}

public MyView(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 init();
}

private void init(){
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(10);
paint.setStyle(Paint.Style.STROKE);

}

@Override
protected void onDraw(Canvas canvas) {
 // TODO Auto-generated method stub
 super.onDraw(canvas);

 paint.setStyle(Paint.Style.STROKE);
 canvas.drawCircle(50, 50, 30, paint);



}

}

and the xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:orientation="vertical"
        android:padding="10dp" >

        <TextView
            style="@style/black_textview"
            android:text="@string/status_m" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:baselineAligned="false"
            android:orientation="horizontal" >

            <FrameLayout
                android:id="@+id/frame_graph_1"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_marginTop="10dp"
                android:layout_weight="1"
                android:orientation="vertical" >
            </FrameLayout>

            <FrameLayout
                android:id="@+id/frame_graph_2"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_marginTop="10dp"
                android:layout_weight="1"
                android:orientation="vertical" >
            </FrameLayout>

            <FrameLayout
                android:id="@+id/frame_graph_3"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_marginTop="10dp"
                android:layout_weight="1"
                android:orientation="vertical" >
            </FrameLayout>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

and this is the main class

public  class HomeGraphFragment extends Fragment {

    FrameLayout frameGraph1 , frameGraph2 , frameGraph3;

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View v = inflater.inflate(R.layout.home_graph, container, false);
        init(v);
        return v;
    }

    private void init(View v) {

        frameGraph1 = (FrameLayout)v.findViewById(R.id.frame_graph_1);
        frameGraph2 = (FrameLayout)v.findViewById(R.id.frame_graph_2);
        frameGraph3= (FrameLayout)v.findViewById(R.id.frame_graph_3);

        frameGraph1.addView(new MyView(getActivity()));

    }



}

Answer 1

You can use SweepGradient, passing the your circle center coordinates as parameters.

Answer 2

You can customize your progress bar:

<item android:id="@android:id/background">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thicknessRatio="15.0" >
            <solid android:color="@color/clr_secondary" />
        </shape>
    </rotate>
</item>
<item android:id="@android:id/secondaryProgress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thicknessRatio="15.0" >
            <solid android:color="@color/clr_secondary" />
        </shape>
    </rotate>
</item>
<item android:id="@android:id/progress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270" >
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thicknessRatio="15.0" >
            <solid android:color="@color/clr_primary" />
        </shape>
    </rotate>
</item>

Finally set ProgressBar drawable to your drawable

android:progressDrawable="@drawable/blue_progress_bar"

To display text in center, set RelativeLayout as background and then add ProgressBar and TextView. Then set centerInParent="true" in your parent RelativeLayout