android circular progress background

Question

I want to create a circular progress bar for that I created a drawable, but I can't integrate a background color for the unprogressed part.

this is the drawable code :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/background">
        <shape  xmlns:android="http://schemas.android.com/apk/res/android"
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="true">
            <solid android:color="@color/second_grey"/>
        </shape>
    </item>
    <item  android:id="@android:id/progress">
        <clip>
            <shape
                android:innerRadiusRatio="3"
                android:shape="ring"
                android:thickness="8dp"
                android:useLevel="true">
                <gradient android:type="sweep"
                    android:useLevel="false"
                    android:startColor="@color/blue"
                    android:centerColor="@color/green"
                    android:endColor="@color/magenta"
                    android:angle="0"/>
            </shape>
        </clip>
    </item>
</layer-list>

Background view not displaying properly.

Can you attach screenshot here, So it's better to understand your problem — Fenil Patel, Dec 26 '17 at 10:50
Possible duplicate of [How To Make Circle Custom Progress Bar in Android](https://stackoverflow.com/questions/14688117/how-to-make-circle-custom-progress-bar-in-android) — ADM, Dec 26 '17 at 10:51
Possible duplicate of [How to create circular ProgressBar in android?](https://stackoverflow.com/questions/27213381/how-to-create-circular-progressbar-in-android) — Gowthaman M, Dec 26 '17 at 10:57

Goku · Answer 1 · 2018-03-14T06:58:32.437

Try this

<?xml version="1.0" encoding="utf-8"?>    
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="false">
            <solid android:color="@color/colorLightOrange" />
        </shape>
    </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="20.0"
                android:useLevel="true">
                <solid android:color="@color/colorOrange" />
            </shape>
        </rotate>
    </item>

</layer-list>

XML

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


        <ProgressBar
            android:id="@+id/cmll_progrssbar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:indeterminate="false"
            android:layoutDirection="rtl"
            android:max="100"
            android:progress="100"
            android:progressDrawable="@drawable/circle_progressbar" />

        <TextView
            android:id="@+id/cmll_completed_per"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/cmll_progrssbar"
            android:layout_alignLeft="@id/cmll_progrssbar"
            android:layout_alignRight="@id/cmll_progrssbar"
            android:layout_alignTop="@id/cmll_progrssbar"
            android:layout_gravity="center"
            android:gravity="center"
            android:padding="10dp"
            android:text="100%" />

    </RelativeLayout>

Denysole · Accepted Answer · 2017-12-26T11:14:01.807

Change android:useLevel to false in first shape:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@color/second_grey" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape
                android:innerRadiusRatio="3"
                android:shape="ring"
                android:thickness="8dp"
                android:useLevel="true">
                <gradient
                    android:angle="0"
                    android:centerColor="@color/green"
                    android:endColor="@color/magenta"
                    android:startColor="@color/blue"
                    android:type="sweep"
                    android:useLevel="false" />

            </shape>
        </clip>
    </item>
</layer-list>

android circular progress background

2 Answers2

Linked