Progress bar rounded on both sides in android
Just change the label <clip>
to <scale>
like this:
<scale android:scaleWidth="100%">
Here's an updated answer for the times:
The Android source code uses Patch 9 files to achieve the effect: http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/4.4_r1/frameworks/base/core/res/res/drawable/progress_horizontal_holo_dark.xml/
So start in your layout xml:
<ProgressBar
android:id="@+id/custom_progress_bar"
style="@android:style/Widget.ProgressBar.Horizontal"
android:indeterminateOnly="false"
android:progressDrawable="@drawable/custom_progress_bar_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="13"
android:progress="33"
android:secondaryProgress="66" />
You can move a lot of this to a style xml but that's beside the point. What we really care about is android:progressDrawable="@drawable/custom_progress_bar_horizontal"
- which is going to allow us to specify our own custom progress bars:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background"
android:drawable="@android:drawable/custom_progress_bg" />
<item android:id="@android:id/secondaryProgress">
<scale android:scaleWidth="100%"
android:drawable="@android:drawable/custom_progress_secondary" />
</item>
<item android:id="@android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="@android:drawable/custom_progress_primary" />
</item>
</layer-list>
Or you don't have to use a Patch 9 for your background- for example here's a simple white background with a 1dp border:
<item android:id="@android:id/background">
<shape>
<corners android:radius="6.5dp" />
<solid android:color="@android:color/white" />
<stroke
android:width="1dp"
android:color="@android:color/darker_gray" />
</shape>
</item>
Android Asset Studio has an awesome tool to help you generate Patch 9 files: http://android-ui-utils.googlecode.com/hg/asset-studio/dist/nine-patches.html
Example primary xdpi png with padding before the tool:
Example secondary xdpi png with padding before the tool:
And the final output:
As far as I know, this is not possible. Because internally ClipDrawable
(i.e. clip tag) cuts the given shape/drawable using canvas.clipRect()
. Btw, you can copy the ClipDrawable
source from here and clip a particular path based on the progress level.