Change ProgressBar.Horizontal indeterminate Behaviour

Question

I try to achieve a horizontal indeterminate ProgressBar, which will reverse its animation on end. To clarify, I want the progress bar to animate from 0 to 100, and afterwards back from 100 to 0. Here's a video of the standard animation, which I want to reverse on end.

According to documentation of ProgressBar this should be possible with xml, but i cannot achieve this. You can either set repeat (standard?) or cycle (this is what I want)

Here's my implementation:

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="fill_parent"
    android:layout_height="8dip"
    android:indeterminate="true"
    android:indeterminateOnly="true"      //tried "false" too
    android:indeterminateBehavior="cycle" // type "reverse" is the one from linked video?
    android:max="100" />

Tried with max-value, and different style-parents

However, I found the value android:indeterminateDuration="[value]" and set one to 1second, the other to 10seconds. In the end, both progressloaders had the same length, which leaves me with the thought, that the styles might be overwritten somewhere?!

Does anyone know how to fix this?

Bounty Update: Question solved, for a working example where indeterminateBehaviour is working

Answer 1

I couldn't find how to change the animator in the ProgressBar, so I'm suggesting you to go with your own drawable.

Draw the progress as a rectangle

In a trivial example, let's make the progress look like a rectangle:

res/drawable/vector_drawable_progress_indeterminate_horizontal.xml (name inspired by core/res/res/drawable/vector_drawable_progress_indeterminate_horizontal.xml)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="10dp"
    android:width="100dp"
    android:viewportHeight="10"
    android:viewportWidth="100" >
        <group
            android:name="rect1_grp"
            android:scaleX="1" >
            <path
                android:pathData="M 0,0 h 100 v 10 h -100 Z"
                android:fillColor="?attr/colorControlActivated" />
        </group>
</vector>

Animate the horizontal scale

Of course, this rectangle is not animated at all, so you want to wrap it in an object that changes it's horizontal scale (scaleX of rect1_grp).

res/drawable/custom_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector android:drawable="@drawable/vector_drawable_progress_indeterminate_horizontal"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <target
        android:animation="@anim/progress_indeterminate_horizontal_rect1"
        android:name="rect1_grp"/>
</animated-vector>

The only thing that's left to do, is to have your own animation:

res/anim/progress_indeterminate_horizontal_rect1:

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="1500"
        android:propertyName="scaleX"
        android:valueFrom="0"
        android:valueTo="1"
        android:valueType="floatType"
        android:repeatMode="reverse"
        android:repeatCount="infinite"/>

</set>

The animation grows the scale linearly from 0f to 1f, and repeats infinitely, with a reverse mode (which avoids having a sequence of two animators: one for the scale increase, and one for the decrease).

Enjoy

Now, all you have to do is use this drawable in res/layout/activity.xml:

<ProgressBar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="8dip"
    android:indeterminate="true"
    android:indeterminateDrawable="@drawable/custom_progress" />

Left to do

• I stripped the progress to the bare minimum. You might want to have a background drawable. You might also want to restore the secondary progress.
• You may customize the interpolator in the animation.

Answer 2

<layer-list>
<item android:id="@android:id/background">
    <shape>
        <corners android:radius="2dip" />
        <gradient android:startColor="#43ffffff" android:centerColor="#43ffffff" android:centerY="0.75" android:endColor="#43ffffff" android:angle="270" />
    </shape>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="2dip" />
            <gradient android:startColor="#fff" android:endColor="#fff" android:angle="270" />
        </shape>
    </clip>
</item>

uses this drawable

Look at this picture