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>
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
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With