[Solved] How to create custom circular progress view in android [closed]

by


You need to create two drawable files for this

Create this two files in res > drawable

1. circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.8"
    android:thickness="10dp"
    android:useLevel="false">
    <solid android:color="#CCC" />

</shape>

2. circular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadiusRatio="2.8"
        android:shape="ring"
        android:thickness="10dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#e2d631"
            android:startColor="#dcdc38"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

now in your layout.xml i.e in res > layout > (your layout file)

                  <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    >

                    <ProgressBar
                        android:id="@+id/pb_syllabus"
                        style="?android:attr/progressBarStyleHorizontal"
                        android:layout_width="120dp"
                        android:layout_height="120dp"
                        android:layout_centerInParent="true"
                        android:background="@drawable/circle_shape"
                        android:progress="60"
                        android:progressDrawable="@drawable/circular_progress_bar" />

                    <TextView
                        android:layout_width="40dp"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:gravity="center"
                        android:text="60%"
                        android:textColor="#ffffff"
                        android:textSize="21sp"
                        android:textStyle="bold" />
                </RelativeLayout>

0

solved How to create custom circular progress view in android [closed]