Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

android create pie dount with gradient

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

enter image description here

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>
like image 794
and_dev Avatar asked Jan 12 '15 09:01

and_dev


2 Answers

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

enter image description here

like image 140
Murtaza Khursheed Hussain Avatar answered Oct 14 '22 08:10

Murtaza Khursheed Hussain


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>    
like image 26
lalit vasan Avatar answered Oct 14 '22 09:10

lalit vasan