Develop Reference

How to define gradient to circular progressBar

I have added a progress bar like following in my layout, i also added a color to it, and it works fine.
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyle"
android:layout_width="50dp"
android:layout_height="50dp"
android:indeterminate="true"
android:indeterminateTintMode="src_atop"
android:indeterminateTint="#color/color"
android:layout_gravity="center_vertical|center_horizontal"
android:visibility="visible"
/>
But i need to add a gradient color on it. I added a gradient in colors folder like following.
<gradient android:type="linear"
android:angle="0"
android:startColor="#dc0336"
android:endColor="#ff7f00"
xmlns:android="http://schemas.android.com/apk/res/android" />
and then i assigned this color to the Progressbar
android:indeterminateTint="#color/gradientColor"
But this does not work, I need to know a way to add a gradient to the progressBar

This is a late answer but I think this will help other people. Just Try Following the code.
drawable/loading_progressbar
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="1440">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false">
<size
android:width="60dp"
android:height="60dp" />
<gradient
android:centerColor="#b43787"
android:centerY="0.50"
android:endColor="#7036a3"
android:startColor="#f0376f"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
activity_main.xml
<ProgressBar
android:id="#+id/loading_progress"
android:layout_width="130dp"
android:layout_height="130dp"
android:indeterminateDrawable="#drawable/loading_progressbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
Result

You should use android:progressDrawable instead of android:indeterminateTint.
Your code should look like below:
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="50dp"
android:layout_height="50dp"
android:indeterminate="true"
android:indeterminateTintMode="src_atop"
android:progressDrawable="#drawable/gradientDrawable"
android:layout_gravity="center_vertical|center_horizontal"
android:visibility="visible"
/>
Use the following as your gradient Drawable. Name the file as gradientDrawable.xml and place it under your drawable directory.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="3.5"
android:shape="ring"
android:thickness="2.5dp"
android:useLevel="false">
<gradient
android:angle="0"
android:endColor="#ff7f00"
android:startColor="#dc0336"
android:type="linear" />
</shape>
I have tested your gradient and it looked like this:

You can set gradient background to progress-bar as below:
<ProgressBar
android:layout_width="75dp"
android:layout_height="75dp"
**android:progressDrawable="#drawable/circular"** />
**circular.xml**
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="false">
<solid android:color="#FA969C" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:shape="ring"
android:thicknessRatio="10"
android:useLevel="true">
<gradient
android:centerColor="#CC3037"
android:endColor="#ED4A52"
android:startColor="#A11210"
android:type="sweep" />
</shape>
</rotate>
</item>
</layer-list>

How to set the secondary color of determinate circular progress bar

I want to change the primary and secondary colors of the determinate progress bar which are green and grey respectively. Android default progress bar does not even show the secondary progress. How can i achieve this? thanks !
<ProgressBar
android:id="#+id/progress_circular"
android:layout_width="256dp"
android:layout_height="256dp"
android:indeterminate="false"
style="?android:attr/progressBarStyleLarge"
android:layout_marginTop="18dp"
app:layout_constraintTop_toBottomOf="#id/textView2"
app:layout_constraintStart_toStartOf="#id/mainView"
android:progress="50"
app:layout_constraintEnd_toEndOf="#id/mainView"
/>

You can create custom progressbar style.
custom_progress.xml
<?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="2.8"
android:shape="ring"
android:useLevel="false"
android:type="sweep"
android:thicknessRatio="18.0">
<solid android:color="#color/red"/>
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="-90"
android:toDegrees="-90">
<shape
android:innerRadiusRatio="2.8"
android:shape="ring"
android:angle="0"
android:type="sweep"
android:thicknessRatio="18.0">
<solid android:color="#color/blue"/>
</shape>
</rotate>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<solid android:color="#color/secondaryColor"/>
</shape>
</clip>
</item>
</layer-list>
and in xml:
<ProgressBar
android:layout_centerInParent="true"
android:id="#+id/winRateProgressBar"
android:layout_width="48dp"
android:layout_height="48dp"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminate="false"
android:max="100"
android:progress="20"
android:progressDrawable="#drawable/custom_progress"/>

To customize progress bar do this
in xml.
<ProgressBar
android:id="#+id/progress_circular"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="256dp"
android:layout_height="256dp"
android:layout_marginTop="18dp"
app:layout_constraintTop_toBottomOf="#id/textView2"
app:layout_constraintStart_toStartOf="#id/mainView"
android:progress="50"
app:layout_constraintEnd_toEndOf="#id/mainView"
android:background="#drawable/circle_shape"
android:indeterminate="false"
android:progressDrawable="#drawable/circular_progress_bar" />
where 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.5"
android:thickness="1dp"
android:useLevel="false">
<solid android:color="#CCC" /> // use your color here
</shape>
and 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.5"
android:shape="ring"
android:thickness="2dp"
android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
<gradient
android:angle="0"
android:endColor="#ffffff"
android:startColor="#ffffff"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>

How can I draw circular progress bar as shown in image below?

Progress bar xml is as:
<ProgressBar
android:id="#+id/progressBarCircular"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignTop="#id/squareView_3"
android:layout_toRightOf="#id/squareView_3"
android:layout_marginTop="-105dp"
android:layout_marginLeft="40dp"
android:indeterminate="false"
android:max="100"
android:progress="0"
android:background="#color/BlackText"
android:progressDrawable="#drawable/circular_progressbar" />
circular_progressbar.xml is as:
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/background">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8.0">
<solid android:color="#color/DarkGrey" />
</shape>
</item>
<item android:id="#+id/progress">
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thicknessRatio="12.0">
<solid android:color="#color/green" />
</shape>
</item>
</layer-list>
and for setting progress:
ProgressBar pb = (ProgressBar)view.FindViewById(Resource.Id.progressBarCircular);
pb.Progress = 75;
This is not giving me progress bar as shown below, How can I draw progress bar as below image:
Any help will be heartly appreciated. Thankyou, Happy Coding.

Try this solution, I think you will get your desired output
<?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:angle="0"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#eeeeee" />
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:fromDegrees="270"
android:toDegrees="270">
<shape
android:angle="0"
android:shape="ring"
android:thickness="10dp"
android:useLevel="true">
<solid android:color="#81ca33" />
</shape>
</rotate>
</item>
</layer-list>
And for the rotation, I adjusted attributes in ProgressBar view as:-
<ProgressBar
android:id="#+id/progressBarView"
android:layout_width="200dp"
android:layout_height="200dp"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminateOnly="false"
android:rotation="-90"
android:max="100"
android:progressDrawable="#drawable/circular_progressbar" />

Why circular progressBar background not showing?

This is my style_circular_fill.xml file
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<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="14.0"
android:useLevel="true">
<gradient
android:centerColor="#A9E2F3"
android:endColor="#A9E2F3"
android:startColor="#A9E2F3"
android:type="sweep" />
</shape>
</rotate>
</item>
<item android:id="#android:id/background">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="false">
<gradient
android:centerColor="#FFF"
android:endColor="#FFF"
android:startColor="#FFF"
android:type="sweep" />
</shape>
</item>
And here is the progressbar in my activity.xml file
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="300dp"
android:layout_height="300dp"
android:indeterminate="false"
android:progressDrawable="#drawable/style_circular_fill"
android:max="100"
android:progress="10" />
And here is the result:
I don't know why the white circle background is not showing up...
Are there anything that I did wrong in either of the .xml file?

You can use this library for your material design progress bar.
eg:
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
app:mpb_progressStyle="horizontal"
style="#style/Widget.MaterialProgressBar.ProgressBar.Horizontal" />

I have split your selector into 2 different drawables and set one for background and the other one for progressDrawable and it seems to work fine.
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="300dp"
android:layout_height="300dp"
android:indeterminate="false"
android:progressDrawable="#drawable/style_circular_fill"
android:background="#drawable/background_circular"
android:max="100"
android:progress="20" />
in style_circular_fill :
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="true">
<gradient
android:centerColor="#A9E2F3"
android:endColor="#A9E2F3"
android:startColor="#A9E2F3"
android:type="sweep" />
</shape>
</rotate>
in background_circular :
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="14.0"
android:useLevel="false">
<gradient
android:centerColor="#FFF"
android:endColor="#FFF"
android:startColor="#FFF"
android:type="sweep" />
</shape>

Background style doesn't show up on Progress Bar

I'm trying to do something like this:
This is what my code does:
I've this code in my drawable file:
progress_bar_layout.xml
<?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:innerRadius="70dp"
android:shape="ring"
android:thickness="18dp">
</shape>
</item>
<item android:id="#android:id/progress">
<shape
android:innerRadius="70dp"
android:shape="ring"
android:thickness="18dp">
<gradient
android:endColor="#ff0f315f"
android:startColor="#ff005563"
android:type="sweep" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<shape
android:innerRadius="70dp"
android:shape="ring"
android:thickness="18dp">
<gradient
android:endColor="#ff1490e4"
android:startColor="#ff00c0dd"
android:type="sweep" />
</shape>
</item>
</layer-list>
layout:
<ProgressBar
android:id="#+id/bar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="180dp"
android:layout_height="180dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:max="100"
android:progress="99"
android:progressDrawable="#drawable/progress_bar_layout"
android:secondaryProgress="30" />
The problem is that my background style doesn't show up. That's why i'm using progress to do background's job, but as you can see, it doesn't work pretty well bcs the maximum size is 99, and there's a space in the end. Am i missing some code?

Basically, i had to split progress_bar_layout.xml drawable file for each element, so, one file with the progress settings, and another for background settings.
And then, i added them to the respective elements.
android:background="#drawable/circle_shape"
android:progressDrawable="#drawable/circular_progress_bar" />
Using layer list, the project didn't find the background setting, so this approach solved my problem.
circle_shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="60dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="false">
<solid android:color="#color/blue"></solid>
</shape>
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:innerRadius="60dp"
android:shape="ring"
android:thickness="10dp"
android:useLevel="true">
<solid android:color="#color/blue"></solid>
</shape>
</rotate>