How to change color in circular progress bar?
I am using circular progress bar on Android. I wish to change the color of this. I am using
"?开发者_JAVA百科android:attr/progressBarStyleLargeInverse"
style. So how to change the color of progress bar.
How to custom the style? Furthermore, what is the definition of the style?
For API 21 and Higher. Simply set the indeterminateTint property. Like:
android:indeterminateTint="@android:color/holo_orange_dark"
To support pre-API 21 devices:
mProgressSpin.getIndeterminateDrawable()
.setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN );
In the res/drawable folder, put this:
progress.xml
<?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="#00ffffff"
android:angle="0"/>
</shape>
</rotate>
Set startColor
and endColor
as per your choice .
Now set that progress.xml
in ProgressBar
's backgound .
Like this
<ProgressBar
android:id="@+id/ProgressBar01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateDrawable="@drawable/progress"
/>
1.First Create an xml file in drawable folder under resource
named "progress.xml"
<?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="360" >
<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/pink"
android:startColor="@android:color/transparent"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
2.then make a progresss bar using the folloing snippet
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/relativeLayout1"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:indeterminate="true"
android:indeterminateDrawable="@drawable/progress" />
You can change color programmatically by using this code :
ProgressBar v = (ProgressBar) findViewById(R.id.progress);
v.getIndeterminateDrawable().setColorFilter(0xFFcc0000,
android.graphics.PorterDuff.Mode.MULTIPLY);
If you want to change ProgressDialog's progressbar color, u can use this :
mDilog.setOnShowListener(new OnShowListener() {
@Override
public void onShow(DialogInterface dialog) {
ProgressBar v = (ProgressBar)mDilog.findViewById(android.R.id.progress);
v.getIndeterminateDrawable().setColorFilter(0xFFcc0000,
android.graphics.PorterDuff.Mode.MULTIPLY);
}
});
To add to Dato's answer, i find SRC_ATOP to be a preferable filter to multiply as it better supports the alpha channel.
ProgressBar v = (ProgressBar) findViewById(R.id.progress);
v.getIndeterminateDrawable().setColorFilter(0xFFcc0000, android.graphics.PorterDuff.Mode.SRC_ATOP);
android:indeterminateTint="@color/progressbar"
styles.xml
<style name="CircularProgress" parent="Theme.AppCompat.Light">
<item name="colorAccent">@color/yellow</item>
</style>
<ProgressBar
android:layout_width="@dimen/d_40"
android:layout_height="@dimen/d_40"
android:indeterminate="true"
style="@style/Widget.AppCompat.ProgressBar"
android:theme="@style/CircularProgress"/>
That's work for me.
<ProgressBar
android:id="@+id/ProgressBar01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="@color/black"/>
With the Material Components Library you can use the CircularProgressIndicator
with these attributes:
indicatorColor
trackColor
<com.google.android.material.progressindicator.CircularProgressIndicator android:indeterminate="true" app:trackColor="@color/..." app:indicatorSize="90dp" app:indicatorColor="@color/..." />
To customize circular ProgressBar we need to create a indeterminateDrawable to show custom progress bar
<?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="1">
<shape
android:innerRadiusRatio="3"
android:shape="ring"
android:thicknessRatio="8"
android:useLevel="false">
<size
android:height="48dip"
android:width="48dip" />
<gradient
android:centerColor="#f96047"
android:centerY="0.50"
android:endColor="#fb9c8d"
android:startColor="#f72d0c"
android:type="sweep"
android:useLevel="false" />
</shape>
</rotate>
We need to include drawable in progressbar just as below:
<ProgressBar
android:layout_width="wrap_content"
android:layout_centerInParent="true"
style="?android:attr/progressBarStyleLarge"
android:visibility="visible"
android:progressDrawable="@drawable/widget_progressbar"
android:indeterminateDrawable="@drawable/widget_progressbar"
android:layout_height="wrap_content" />
check this answer out:
for me, these two lines had to be there for it to work and change the color:
android:indeterminateTint="@color/yourColor"
android:indeterminateTintMode="src_in"
PS: but its only available from android 21
for me theme wasn't working with accentColor. But it did work with colorControlActivated
<style name="Progressbar.White" parent="AppTheme">
<item name="colorControlActivated">@color/white</item>
</style>
<ProgressBar
android:layout_width="@dimen/d_40"
android:layout_height="@dimen/d_40"
android:indeterminate="true"
android:theme="@style/Progressbar.White"/>
<style name="progressColor" parent="Widget.AppCompat.ProgressBar">
<item name="colorControlActivated">@color/colorPrimary</item>
</style>
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="250dp"
android:theme="@style/progressColor"
android:layout_height="250dp"
android:layout_centerInParent="true" />
Add to your activity theme, item colorControlActivated, for example:
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
...
<item name="colorControlActivated">@color/rocket_black</item>
...
</style>
Apply this style to your Activity in the manifest:
<activity
android:name=".packege.YourActivity"
android:theme="@style/AppTheme.NoActionBar"/>
To supplement Muhamed Riyas M's top voted answer:
Faster rotation
android:toDegrees="1080"
Thinner ring
android:thicknessRatio="16"
Light white
android:endColor="#80ffffff"
Try using a style and set colorControlActivated too desired ProgressBar color.
<style name="progressColor" parent="Widget.AppCompat.ProgressBar">
<item name="colorControlActivated">@color/COLOR</item>
</style>
Then set the theme of the ProgressBar to new style.
<ProgressBar
android:id="@+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="@style/progressColor"
/>
You can use a style for changing the color of progress like below
<style name="AppTheme.anyName">
<item name="colorAccent">YOUR_COLOR</item>
</style>
and use it in the ProgressBar like below
<ProgressBar
style="?android:attr/progressBarStyle"
android:theme="@style/AppTheme.WhiteAccent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/dimen_30"
/>
Hope it helps.
You can do this with a custom dialog pretty easily, reusing the xml from other answers:
<?xml version="1.0" encoding="utf-8"?>
<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/oceanBlue"
android:startColor="@android:color/transparent"
android:type="sweep"
android:useLevel="false" />
</shape>
Just do this:
public static class ModifiedProgressDialog extends ProgressDialog {
public ModifiedProgressDialog(Context context) {
super(context);
}
@Override
public void show() {
super.show();
setIndeterminateDrawable(getContext().getResources().getDrawable(R.drawable.blue_progress));
}
}
For all those wondering how to increase the speed of custom progress
<?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="1080"><!--HERE YOU COULD INCREASE SPEED BY SETTING TODEGRESS(1080 is 3 loops instead of 1 in same amt of time)-->
<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>
Set android:indeterminateDrawable="@drawable/progress_custom_rotate"
Use Below Code for Custom Circular Ring Progress Bar
Copy Below code and create "progress_custom_rotate.xml" in Drawable folder
<?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="1080">
<shape android:shape="ring" android:innerRadiusRatio="3"
android:thicknessRatio="8" android:useLevel="false">
<size android:width="48dip" android:height="48dip" />
<gradient android:type="sweep" android:useLevel="false"
android:startColor="#4c737373" android:centerColor="#4c737373"
android:centerY="0.50" android:endColor="#ffffd300" />
</shape>
</rotate>
It takes color value from your Res/Values/Colors.xml -> colorAccent if you change it, your progressBar color changes aswell.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/black</item>
<item name="colorPrimaryDark">@color/white</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="progressColor" parent="Widget.AppCompat.ProgressBar">
<item name="colorControlActivated">@color/black</item>
</style>
</resources>
<ProgressBar
android:id="@+id/progressBar2"
style="?android:attr/progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:theme="@style/progressColor"
app:layout_constraintBottom_toBottomOf="@+id/textView3"
app:layout_constraintStart_toEndOf="@+id/textView3"
app:layout_constraintTop_toTopOf="@+id/textView3" />
You can change your progressbar colour using the code below:
progressBar.getProgressDrawable().setColorFilter(
getResources().getColor(R.color.your_color), PorterDuff.Mode.SRC_IN);
精彩评论