I am using a circular ProgressBar in my Activty.
My Problem is that its color isnt changing properly where only BG color is Changing.
So how can I change the color of ProgressBar without BG.
I tried this thread- How to change default color of progress bar?
http://i.stack.imgur.com/DEpyM.jpg
You can do all in xml files
After some search I got the answer :
you progress bar code :
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:max="100"
android:indeterminateDrawable="#drawable/progress"
/>
and the progress drawable is consisting of a rotating ring has a gradiant color of your choise like this :
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
android:toDegrees="360">
<shape android:shape="ring" android:innerRadiusRatio="3"
android:thicknessRatio="8" android:useLevel="false">
<size android:width="76dip" android:height="76dip" />
<gradient android:type="sweep" android:useLevel="false"
android:startColor="#007700"
android:endColor="#115511"
android:angle="0"
/>
</shape>
</rotate>
just like this , please rate this answer :)
Better way (using AppCompat libs):
final int color = Color.WHITE; // Or any other one
final ProgressBar progressBar= (ProgressBar) findViewById(R.id.progress_bar);
DrawableCompat.setTint(progressBar.getIndeterminateDrawable(), color);
Related
How can I recreate the rotation of a ProgressBar of type progressBarStyleLarge?
I have this layout:
<androidx.core.widget.ContentLoadingProgressBar
android:id="#+id/loadingIndicator"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:indeterminateDrawable="#drawable/loadingindicator"
style="?android:attr/progressBarStyleLarge" />
Drawable loadingindicator:
<?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:duration="0"
android:toDegrees="360" >
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="40"
android:useLevel="false" >
<size
android:height="48dip"
android:width="48dip" />
<gradient
android:startColor="#ff00ff"
android:centerColor="#ff00ff"
android:endColor="#ffffff"
android:centerY="0.50"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
But this causes a smooth constant rotation instead of the - I believe - 2 parallel rotations that are displayed with the default style.
Specifically I want to recreate the animation of the Indeterminate circular progress indicator, as shown here:
https://material.io/components/progress-indicators/#circular-progress-indicators
XY question disclosure:
I need this because I want to customize the stroke thickness and outer margin of the ProgressBar.
You could use CircularProgressDrawable in code like:
val drawable = CircularProgressDrawable(context).apply {
strokeWidth = // desired width in pixels
}
progressBar.indeterminateDrawable = drawable
Documentation:
https://developer.android.com/reference/android/support/v4/widget/CircularProgressDrawable
I have custom circle progressbar in Android which I made with drawable circular.xml
Here is my progressbar:
<ProgressBar
android:id="#+id/circle_progress_id"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="40dp"
android:layout_height="40dp"
android:indeterminate="false"
android:max="100"
android:rotation="-90"
android:progressDrawable="#drawable/circular"
android:layout_toRightOf="#id/checkbox_id"
android:background="#drawable/circle_shape"/>
Here is code from #drawable/circular
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadiusRatio="3.4"
android:shape="ring"
android:thicknessRatio="9.0"
android:useLevel="true" >
<gradient
android:endColor="#4CAF50"
android:startColor="#4CAF50"
android:type="sweep"
android:useLevel="true" />
</shape>
</item>
</selector>
And it works fine and show progress after:
recyclerTaskHolder.progressBarStage.setProgress(getStageProgressValue(myTask));
But it absolutely empty when it is zero progress.
I need to show for user empty gray color progress bar when it is zero progress. Or show empty part of progress bar with gray color when it is between zero and 100%.
I tried to make custom background of progress bar
android:background="#drawable/circle_shape"
Here is circle_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:innerRadiusRatio="3.4"
android:shape="ring"
android:thicknessRatio="9.0"
android:useLevel="true"
android:visible="true">
<gradient
android:endColor="#000000"
android:startColor="#000000"
android:type="sweep"
android:useLevel="true" />
</shape>
</item>
</selector>
But it didn't help me and empty progress bar is still invisible.
Unfortunately I didn't find the reason of this issue.
But I use this library for Circle Progress Bar and it works fine.
CircularProgressBar
It is easy to use this library.
I started porting my app into lollipop. I was able to theme the whole app to a particular color I like but I can't change the color of the ProgressDialog which is always green. Is there any way to do this?
You have to find the asset and change its color with photoshop, or create a new asset and use that as progress dialog.
The new asset can be created like :
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
android:toDegrees="360">
<shape android:shape="ring" android:innerRadiusRatio="3"
android:thicknessRatio="8" android:useLevel="false">
<size android:width="76dip" android:height="76dip" />
<gradient android:type="sweep" android:useLevel="false"
android:startColor="#447a29"
android:endColor="#447a29"
android:angle="0"
/>
</shape>
and call this progress.xml for example then use it like this :
<ProgressBar
android:id="#+id/ProgressBar01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background ="#xml/progress">
and you have only to change the start and end color to make it how you want it
When I add horizontal ProgressBar it behaves as expected -- I set the progress value and it shows it.
However when I add ProgressBar (circular) it spins. And that's it. In such form it is more "please wait" indicator, that any progress bar, because progress value is not shown.
So my question is (assuming Progress in name means progress) -- how to stop spinning and shows progress value? For example if I set max to 100, and value to 50 I would expect to see half-circle arc.
In other words how to make circular ProgressBar to behave like horizontal ProgressBar, with only exception of the shape?
I know that this is an old post but I ran into the same issue and I make it work.
It is actually easier than you think, you have to set a custom progress in an xml file inside your drawable folder and handle the attributes "fromDegrees" and "toDegrees" from the < rotate > tag:
This is the code for custom_progress.xml (you can customize yours as you like but you must not modify "fromDegrees" and "toDegrees")
<?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.3"
android:shape="ring"
android:useLevel="false"
android:type="sweep"
android:thicknessRatio="15.0">
<solid android:color="#0099ff"/>
</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.3"
android:shape="ring"
android:angle="0"
android:type="sweep"
android:thicknessRatio="15.0">
<solid android:color="#e0e0e0"/>
</shape>
</rotate>
</item>
</layer-list>
And for your progress bar you have to set this attributes:
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="100dp"
android:layout_height="100dp"
android:indeterminate="false"
android:max="100"
android:progress="20"
android:progressDrawable="#drawable/custom_progress" />
What is happening here is that the progress will start in degree -90 which for me is the top side of the progress bar view and towards the right and it will continue towards the same degree, this will make the view progress to start and end in the same degree.
NOTE:
If you set 0 for both "fromDegrees" and "toDegrees" the progress will start from the right side of the circle.
Hope it helps people with the same requirement.
Since Api 21 you can do something like that: Assuming that your ProgressBar defind this way:
<ProgressBar xmlns:android="http://schemas.android.com/apk/res/android"
style="?android:attr/progressBarStyleLarge"
android:id="#+id/progress_bar"
android:layout_width="#dimen/item_width"
android:layout_height="#dimen/item_height"
android:clickable="false"
android:indeterminate="true"
android:indeterminateDrawable="#drawable/progress"/>
and this is progress.xml:
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8"
android:useLevel="false" >
<size
android:height="76dip"
android:width="76dip" />
<gradient
android:angle="0"
android:endColor="#color/colorGrayText"
android:startColor="#android:color/transparent"
android:type="sweep"
android:useLevel="false" />
</shape>
Now you can do this on your ProgressBar:
ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress_bar);
if (progressBar != null) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
RotateDrawable rotateDrawable = (RotateDrawable) progressBar.getIndeterminateDrawable();
rotateDrawable.setToDegrees(0);
}
}
Like toadzky commented, there's no baked-in method. You might try this ProgressWheel. If nothing else, it should give you idea of how to implement it.
For determinate progress bar means the progress bar which doesn't keep on rotating and user can set a fixed percentage over that.
<ProgressBar
android:id="#+id/pb_sharpness"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="#dimen/dp_50"
android:layout_height="#dimen/dp_50"
android:layout_marginTop="#dimen/dp_16"
android:indeterminate="false"
android:max="100"
android:progressDrawable="#drawable/custom_progress_bar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
For adding drawable to above progress bar
<?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.3"
android:shape="ring"
android:useLevel="false"
android:type="sweep"
android:thicknessRatio="15.0">
<solid android:color="#color/white_color"/>
</shape>
</item>
<item android:id="#android:id/progress">
<rotate
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="180"
android:toDegrees="0"
>
<shape
android:innerRadiusRatio="2.3"
android:shape="ring"
android:angle="0"
android:type="sweep"
android:thicknessRatio="15.0">
<gradient
android:startColor="#color/color_5646F3"
android:endColor="#color/color_ED88FE" />
</shape>
</rotate>
</item>
You can access the visibility property of the progress bar and set it to invisible when you need it to be invisible like this
ProgressBar progressBar = view.findViewById<ProgressBar>(R.id.progressbar)
progressBar.visibility = ProgressBar.INVISIBLE
i am trying to change the color of horizontal progress bar but it is not changing. i did some googling and gone through some example given in ur site. But i am not getting success to change the color accurately.
i used progressBar.setProgressDrawable(Drawable d) but it sets the background color of the whole progress bar view instead of setting the background color of only the bar itself.
Please, any body help me.
thanks
Hi I am using this code in my project. I hope it works for you.
// Create ProgressBar in your layout file.
<ProgressBar
android:id="#+id/yourid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:progressDrawable="#drawable/slider"
/>
// Create .xml file in your drawable folder with name slider.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#android:id/background"
android:drawable="#drawable/grey_bar_music"/>
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/blue_bar_music" />
</item>
</layer-list>
//grey_bar_music ->Background image name for your progressbar.
//blue_bar_music->Progress bar change color using this image when it start from 0.
You Can create custom_progress.xml file in drawable folder -
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
android:toDegrees="360">
<shape android:shape="ring" android:innerRadiusRatio="2"
android:thicknessRatio="6" android:useLevel="false">
<size android:width="76dip" android:height="76dip" />
<gradient android:type="sweep" android:useLevel="false"
android:startColor="#c76a37"
android:endColor="#A4B4B9"
/>
</shape>
</rotate>
//And add below code to your layout file to create progress bar
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="68dp"
android:progressDrawable="#drawable/custom_progress"
/>
Hope this will help you.