stretchable image source for progressBar

Question

I created progress bar in activity_main.xml file as following:

 <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="fill_parent"
        android:layout_height="25dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" 
        android:max="100"
        android:progress="0"
        android:progressDrawable="@drawable/myprogdraw" />

then I created a myprogdraw.xml in drawable folder to control brogressBar design as following:

<item android:id="@android:id/background">
    <shape>
        <gradient
            android:angle="180"
            android:centerColor="#ddd"
            android:endColor="#888"
            android:startColor="#42a" />
    </shape>
</item>
<item android:id="@android:id/progress">
    <bitmap
        android:src="@drawable/prog"
        android:tileMode="repeat" />
</item>

and use the following image for this:

but the layout is not as desired, it looks repeated like the following:

so how can I make the bitmap stretchable not repeatable for progressBar ?

as show above the image used is a 9 patch image, but nothing changed.

Answer 1

This can be done by using clip element instead of bitmap element, and here is the xml file for layer-list

<?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>
            <gradient
                android:angle="0"
                android:centerColor="#ddd"
                android:endColor="#999"
                android:startColor="#999" />

            <corners android:radius="5dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/progress" />

        <shape>
            <corners android:radius="5dp" />
        </shape>
    </item>

</layer-list>

As a quick test, I built a new empty project, then add a progress bar, and edit text to use it to control progress bar value by calling setProgress method on click new button:

The result as wanted exactly, and as show below:

I noticed that rounded corners applied on background, but not applied on progress, this could be another issue and need another question to solve, however it is ok for now.