square edged indeterminate progress bar in android

Question

I'm trying to customize an indeterminate progress bar in xml but I can't find a way to square the edges. I've found the default xml drawables from the SDK resources but they just reference PNGs with no mention of shape.

This is the default xml from the SDK resources:

<?xml version="1.0" encoding="utf-8"?>
<animation-list
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:oneshot="false">
    <item android:drawable="@drawable/progressbar_indeterminate1" android:duration="200" />
    <item android:drawable="@drawable/progressbar_indeterminate2" android:duration="200" />
    <item android:drawable="@drawable/progressbar_indeterminate3" android:duration="200" />
</animation-list>

progressbar_indeterminate1, 2 and 3 are just square PNGs but it always displays the progress bar with rounded edges.

I've tried creating a shape and using the PNGs as a background with this:

<animation-list
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:oneshot="false">

   <item
        android:drawable="@drawable/progressbar_indeterminate1"
        android:duration="200">
        <shape>
            <corners android:radius="0dp" />
        </shape>
    </item>

</animation-list>

But it doesn't change the shape. I'd post images but I don't have enough reputation yet. What am I missing? Thanks for any help.

Answer 1

I just had the same problem and it seems that indeterminate drawable that is set using XML has rounded corners. In case you need square (or probably any other) edges then you need to set indeterminate drawable with the code:

// line below is needed to have sharp corners in the indeterminate drawable,
// ProgressBar when parsing indeterminate drawable from XML sets rounded corners.
progressBar.setIndeterminateDrawable(context.getResources().getDrawable(R.drawable.progressbar_indeterminate));

And then example of progressbar_indeterminate that I used:

<?xml version="1.0" encoding="UTF-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
 <item android:drawable="@drawable/progress_2b" android:duration="100" />
 <item android:drawable="@drawable/progress_1b" android:duration="100" />
</animation-list>

I needed to have images repeated so I created progress_1b (and 2b) as follows:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/progress_1"
    android:tileMode="repeat" >
</bitmap>`

Where drawable/progress_1 are real images that I want to be repeated as background of indeterminate progressbar.

This solution worked for me.

Answer 2

This worked for me. No PNGs. Just colors.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <corners android:radius="0dip" />
        <stroke android:width="2px" android:color="#80c4c4c4"/>
        <solid android:color="#08000000"/>
    </shape>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="0dip" />
            <solid android:color="#11416a"/>
        </shape>
    </clip>
</item>
</layer-list>

Answer 3

I was looking to create a horizontal indeterminate ProgressBar without rounded corners that simply swept from left to right over and over again. To that end I created the following drawable:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="@color/app_orange"/>
            </shape>
        </clip>
    </item>

</layer-list>

This works just fine for a normal ProgressBar but when I set it as the indeterminateDrawable in the ProgressBar's layout file I got the correct animated behavior but the size of the ProgressBar became tiny and refused to stretch across the entire page as I had set in the layout.

After despairing of making this work I decided to create a custom view and animate it myself. To that end I used ObjectAnimator which was introduced in API 11. To use it in API 10 (and lower) I included the jar from the NineYearOldAndroid project. Worked like a charm.

The final step was to create my custom view:

public class ProgressLoad extends ProgressBar
{
    public ProgressLoad(Context context, AttributeSet attrs)
    {
        super(context, attrs);

        ObjectAnimator animator = ObjectAnimator.ofInt(this, "progress", 0, 101);         // Need the 101 for the progress bar to show to the end.
        animator.setDuration(2000);
        animator.setRepeatCount(ObjectAnimator.INFINITE);
        animator.setRepeatMode(ObjectAnimator.RESTART);

        animator.start();
    }
}

Then I simply included this custom view in my layout:

<com.example.views.ProgressLoad
            android:id="@+id/pb_load"
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="match_parent"
            android:layout_height="5dp"
            android:layout_gravity="top"
            android:progressDrawable="@drawable/content_progress_bar_determinate"/>

And voila, I had a horizontal rectangular progress bar (without rounded corners) whose progress bar swept across repeatedly. When I was done with it I simply removed the custom view from its parent.

The advantage of this technique is that one can set the speed at which the animation sweeps across by simply changing the value passed to animator.setDuration(int value).