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

Question

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>

Answer 1

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