Home » Android » Indeterminate circle progress bar on android is white, despite colorAccent color

Indeterminate circle progress bar on android is white, despite colorAccent color

Posted by: admin April 23, 2020 Leave a comment

Questions:

I’m unable to figure out how to change the color of the indeterminate circle progress bar on API-21. I’ve made sure that my colorAccent is set correctly. My understanding is that the system should take from colorAccent and tint the ProgressBar accordingly. Any idea what could be going wrong?

app/src/main/res/layout-v21/fragment_story_comments.xml

<ProgressBar
        android:id="@+id/progress_bar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="visible"/>

app/src/main/res/values/themes.xml

<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowNoTitle">true</item>
</style>

app/src/main/res/values/colors.xml

<color name="colorAccent">#ff5722</color>
<color name="colorPrimary">#ff5722</color>
<color name="colorPrimaryDark">#e64a19</color>
How to&Answers:

Note: This only works from Android 5.0 (Lollipop) and up, as per the original request. For older Android versions you’ll have to replace the ProgressBar’s progressDrawable.

Expanding upon Liam’s answer, I managed to get this working on XML using the indeterminateTint flag.

Apparently to get it to work, you need to set the indeterminate and indeterminateTintMode flags.

The mode is a bit of mystery for me. I tried all of them but only got the expected results with src_in and src_atop. I don’t know what those modes actually do, so if anyone can expand on this I’d be grateful.

In any case this should work:

<ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:indeterminateTint="#F00"
    android:indeterminateTintMode="src_in" />

Answer:

this works for lower versions of android, too:

if (progBar.getIndeterminateDrawable() != null) {
        progBar.getIndeterminateDrawable().setColorFilter(getResources().getColor(R.color.accent), android.graphics.PorterDuff.Mode.SRC_IN);
}

Answer:

I managed to change the colour of the ProgressBar on API 21 programatically from the green, to white like this:

mProgressBar.getIndeterminateDrawable().setColorFilter(new LightingColorFilter(0xFF000000, 0xFFFFFF));

However, I still can’t figure out how to do it in XML, but hopefully this will help someone.

Answer:

You should set a color for activated controls in your theme:

 <item name="colorControlActivated">@color/accent</item>

This works only for Android 5.0+