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" />

Using progress bar as border of imageview

I want to put a progress bar to imageview. I tried with following code:
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/image"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="3dp"
android:src="#drawable/defaultprofile" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="64dp"
android:layout_height="64dp"
android:indeterminate="false"
android:progressDrawable="#drawable/circular_progress_bar"
android:background="#drawable/circle_shape"
style="?android:attr/progressBarStyleHorizontal"
android:max="100"
android:progress="65"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/image"
android:layout_alignStart="#+id/image" />
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="1dp"
android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
<gradient
android:angle="0"
android:endColor="#007DD6"
android:startColor="#007DD6"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
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" />
</shape>
Result:
How can I fix it? The progress bar should look like border of imageview. I have to remove the padding.

so your view looks now like that:
All you need not to do is changing height and weight of both views - the're different
EDIT: Now you're have this:
According to http://developer.android.com/intl/es/guide/topics/resources/drawable-resource.html
delete this line
android:innerRadiusRatio="2.5"
SOLUTION: I've already changed some files:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:padding="10dp"
android:id="#+id/mainLayout">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/image"
android:layout_width="65dp"
android:layout_height="65dp"
android:src="#color/colorAccent"/>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="65dp"
android:layout_height="65dp"
android:padding="1dp"
android:progressDrawable="#drawable/circular_progress_bar"
android:background="#drawable/circle_shape"
android:style="?android:attr/progressBarStyleHorizontal"
android:max="100"
android:progress="65"
android:layout_alignLeft="#+id/image"
android:layout_alignTop="#+id/image" />
</RelativeLayout>
Circular Progress bar:
<?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="32dp"
android:shape="ring"
android:thickness="1dp"
android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->
<gradient
android:angle="0"
android:endColor="#007DD6"
android:startColor="#007DD6"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
Circular shape
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:thickness="1dp"
android:innerRadius="32dp"
android:useLevel="false">
<solid android:color="#CCC" />
</shape>
And it looks like:
Hope it help

Android - Round ProgressBar starts at wrong place

I'm trying to add a round progress bar to my app which I want to start at the top of the circle and end at the top. However, anything I try with the angles etc doesn't change the appearance. I'm fairly new to Android so go easy on me. Here is my code:
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="300dp"
android:layout_height="300dp"
android:indeterminate="false"
android:layout_centerInParent="true"
android:progressDrawable="#drawable/circular_progress_bar"
android:background="#drawable/circle_shape"
style="?android:attr/progressBarStyleHorizontal"
android:max="100"
android:progress="30" />
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="6dp"
android:useLevel="false">
<solid android:color="#CCC" />
</shape>
circular_progress_bar.xml
<?xml version="1.0" encoding="utf-8"?>
<clip>
<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="6dp">
<gradient
android:angle="0"
android:endColor="#38C0F4"
android:startColor="#38C0F4"
android:centerColor="#56ccb7"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
</clip>
Here is a screenshot of what is looks like at 30% progress:

You need to edit your circular_progress_bar.xml
Get rid of the clip tags
Add [android:useLevel="true"] to the shape properties. (This is new for Android 5(21))
<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="6dp"
android:useLevel="true">
<gradient
android:angle="0"
android:endColor="#38C0F4"
android:startColor="#38C0F4"
android:centerColor="#56ccb7"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>