stretchable image source for progressBar

Issue

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.

Solution

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.

Answered By - Eng. Samer T