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.

Ventilate

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.

Worshipful

Yes I did. "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)." - I haven't provided code (mea culpa) but I tried that – Ventilate

Ok. I didn't noticed that. To get this work you have to make your own custom animation and bunch of png files. I'll change my answer. – Worshipful

Answer 2

I saw that a lot of people are looking on this post so I thought that I should edit it and share an example:

Note (this example is not complete, it's still in progress but I guess it's a starting point)

GitHub: Github Example

The important part in this example is below: Create in drawable a xml file custom_progress_bar_horizontal.xml and add the content below.

<?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>
            <padding
                android:bottom="3dip"
                android:top="3dip"
                android:left="3dip"
                android:right="3dip"/>
            <corners
                android:radius="5dip" />
            <gradient
                android:startColor="#2a2b2f"
                android:centerColor="#2a2b2f"
                android:centerY="0.50"
                android:endColor="#2a2b2f"
                android:angle="270" />
        </shape>
    </item>
    <item
        android:id="@android:id/progress">
        <clip>
            <shape>
                <corners
                    android:radius="5dip" />
                <gradient
                    android:startColor="#ff0e75af"
                    android:endColor="#ff1997e1"
                    android:angle="90" />
            </shape>
        </clip>
    </item>
</layer-list>

Add the following code in styles.xml

<style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>
    <item name="android:minHeight">10dip</item>
    <item name="android:maxHeight">20dip</item>
</style>

After you have added the style in your activity layout add:

 <ProgressBar
        android:id="@+id/customProgress"
        style="@style/CustomProgressBar"
        android:layout_width="match_parent"/>

The progress dispaly below in a frame it's a little tricky because you need to extend the ProgressBar class and make the changes there.

I will leave here some examples and notify when I will add them in my github project.

Great example if you want to disaply the progress in your way: NumberProgressBar

Other progress bar examples:

Custom progress bar 1

Custom progress bar 2

For more detail visit here. Android horizontal progress bar?

Ehf

Answer 3

You know, android has a View named: LinearProgressIndicator you can have indeterminate animation in the horizontal progress bar with that.

 <com.google.android.material.progressindicator.LinearProgressIndicator
        android:layout_width="280dp"
        android:layout_height="12dp"
        android:indeterminate="true"
        app:indicatorColor="@color/app_brand_primary"
        app:trackColor="@color/color_divider"
        app:trackCornerRadius="6dp"
        app:trackThickness="12dp" />

p.s - it has a weird behaviour for toggling the indeterminate value programmatically. to do that you should set visibility to invisible, set indeterminate boolean, then show the view again.
example :

        progress.isVisible = false
        progress.isIndeterminate = true
        progress.isVisible = true

Issue : https://github.com/material-components/material-components-android/issues/1921

Trescott