I am trying to customize a status bar so it will look like this image:enter image description here

However, after a good couple of hours all I have is a status bar with the background I need only (Image 2): enter image description here

The current code I have is: xml layout:

<ProgressBar
                android:id="@+id/pBarOverallStatus"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_marginLeft="10dip"
                android:layout_marginRight="10dip"
                android:layout_weight="94"
                android:indeterminateOnly="false"
                android:max="100"
                android:progressDrawable="@drawable/progress_bar_states" >
            </ProgressBar>

The progress_bar_states.xml:

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

    <!-- <item android:id="@android:id/progress">
        <bitmap
            android:gravity="center"
            android:src="@drawable/progressbar_progressing" />

        <corners android:radius="10dp" />
    </item>
     -->

</layer-list>

Removing the comment, where proressbar_progressing looks like enter image description here then I am having something a bit ugly as there are no corners. enter image description here

I am adding the background from code, something like:

overallStatus = (ProgressBar) findViewById(R.id.pBarOverallStatus);
Resources res = getResources();
overallStatus.setBackgroundDrawable(res.getDrawable(R.drawable.progressbar_background));
overallStatus.setProgress(5
Edit
Report