android create pie dount with gradient

Question

Is there any way to create circle with gradient like this ?

As far as i get is this:

<shape
       android:innerRadiusRatio="3"
       android:thicknessRatio="10"
       android:shape="ring">
     <gradient
               android:endColor="@color/cyan_dark"
               android:startColor="@color/red"
               android:type="radial"
               android:gradientRadius="340"
               android:centerX="50%"
               android:centerY="0" />
</shape>

Shameful

What's your actual result? – Proportionable

Answer 1

XML

<ProgressBar
        android:id="@+id/yourId"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="89dp"
        android:layout_height="89dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:max="100"
        android:progress="70"
        android:progressDrawable="@drawable/shapering" />

shapering drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="10" >

    <gradient
        android:centerColor="#D6DE47"
        android:centerX="50%"
        android:centerY="0"
        android:endColor="#DE47A7"
        android:gradientRadius="340"
        android:startColor="#6D47DE"
        android:type="sweep" />

</shape>

Result

Overglaze

thanks, for your replay but, I neede to support also in 100 progress, which in your answer if you change the progress to 100 the "yellow effect" will be display in both side, – Shameful

I want something like this, but instead of empty i want grey color for empty area , how can i achieve this? – Robles

Answer 2

use this

 <ProgressBar
        android:id="@+id/progressWheel"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="152dp"
        android:layout_height="152dp"
        android:layout_centerInParent="true"
        android:progress="100"
        android:indeterminate="false"
        android:progressDrawable="@drawable/circular_progress_bar" />

in drawable circular_progress_bar (change color according to your need)

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<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:shape="ring"
            android:thicknessRatio="25.0" >
            <gradient
                android:centerColor="@color/red"
                android:endColor="@color/gray"
                android:startColor="@color/gray"
                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:shape="ring"
            android:thicknessRatio="25.0" >
            <gradient
                android:centerColor="@color/green"
                android:endColor="@color/green"
                android:startColor="@color/green"
                android:type="sweep" />
        </shape>
    </rotate>
</item>
</layer-list>    

Marginalia

Answer 3

use this

<ProgressBar
    android:id="@+id/progressWheel"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="152dp"
    android:layout_height="152dp"
    android:layout_centerInParent="true"
    android:progress="100"
    android:indeterminate="false"
    android:progressDrawable="@drawable/circular_progress_bar" />

in drawable circular_progress_bar (change color according to your need)

 <?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
 <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:shape="ring"
        android:thicknessRatio="25.0" >
        <gradient
            android:centerColor="@color/red"
            android:endColor="@color/gray"
            android:startColor="@color/gray"
            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:shape="ring"
        android:thicknessRatio="25.0" >
        <gradient
            android:centerColor="@color/green"
            android:endColor="@color/green"
            android:startColor="@color/green"
            android:type="sweep" />
    </shape>
 </rotate>
</item>
 </layer-list>    

Stereotaxis

Answer 4

You should use type="sweep" instead of "radial" to create gradient like on the pic. For example:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="7.0">
        <gradient
            android:startColor="#FF0000"
            android:centerColor="#00FF00"
            android:endColor="#0000FF"
            android:type="sweep" />
    </shape>
</item>

Corral