Styling indeterminate horizontal progress bar on android

Question

Styling determinate progress bar is easy, there are many tutorials to achieve that. This is on I'm using:

<ProgressBar
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="8dp"
    android:background="@drawable/progress_background"
    android:progressDrawable="@drawable/progress"
    android:id="@+id/progressBar" />

Drawable progress_background.xml:

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="@color/colorAccent" />
                <corners android:radius="4dp" />
            </shape>
        </clip>
    </item>
</layer-list>

It looks like this:

But when progress is not available yet, I'd like to use indeterminate one. So I tried:

<ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:background="@drawable/progress_background"
        android:progressDrawable="@drawable/progress"
        android:indeterminateTint="@color/colorAccent"
        android:indeterminateTintMode="src_in"
        android:indeterminate="true"
        android:id="@+id/progressBar" />

But indeterminate progress is not stretched to bar height:

I tried to style it using drawable file as well but it looked like broken determinate progress bar (filling from 0 to 100 all over again).

Desired indeterminate progress bar should look like regular one but with 8dp height and rounded corners.

Answer 1

Default indeterminate progress bar animation use a non 9-patch pngs. So it can't be stretched over your 8dp height progress bar. You should add android:indeterminateDrawable with custom animation:

<animation-list
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:oneshot="false">
    <item android:drawable="@drawable/progressbar_indeterminate1" android:duration="50" />
    <item android:drawable="@drawable/progressbar_indeterminate2" android:duration="50" />
    <item android:drawable="@drawable/progressbar_indeterminate3" android:duration="50" />
    ...
    <item android:drawable="@drawable/progressbar_indeterminateX" android:duration="50" />
</animation-list>

Then make drawables to animate it like this (it can be xml or image or 9-patch):

Animation frame 1

Animation frame 2

Never versions of android (api21+) use AnimatedVectorDrawable for indeterminate ProgressBar.