Progress bar rounded on both sides in android

Question

I am trying to create a custom progress bar in android. I have used the following xml file for it (progress_bar_horizontal.xml):

<?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>
    <corners android:radius="8dip" />
    <stroke android:width="2dip" android:color="#FFFF"/>
    <solid android:color="#FFFF"/>              
   </shape>
  </item>
  <item android:id="@android:id/secondaryProgress">
   <clip>
    <shape>
     <corners android:radius="8dip" />
     <stroke android:width="2dip" android:color="#FFFF"/>
     <solid android:color="#FF00"/> 
    </shape>
   </clip>
  </item>
  <item android:id="@android:id/progress">
   <clip>
    <shape>
     <corners android:radius="8dip" />
     <stroke android:width="2dip" android:color="#FFFF"/>
     <solid android:color="#FF00"/> 
    </shape>
   </clip>
  </item>
 </layer-list>

Everything works great apart from the fact I would like to have the progress in my progress bar rounded on both sides. The aforementioned code makes a progress bar to be rounded on the left hand side and simply cut (not rounded) on the right hand side. It is because of the clip tag probably. Could you please help me on that? What should i change to have the progress in my progress bar rounded on both sides?

The full layout goes below:

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
  <LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:background="@drawable/gradient_progress"
  android:padding="10dip"
  >
   <LinearLayout
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="horizontal"
   >
    <TextView
     android:id="@+id/progress_header"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textColor="#FF000000"
     android:textAppearance="?android:attr/textAppearanceMedium"
     android:textStyle="bold"
     android:text="Uploading"               
    />
    <TextView
     android:id="@+id/progress_percent"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:textColor="#FF000000"
     android:textAppearance="?android:attr/textAppearanceMedium"
     android:textStyle="bold"
     android:text="55%"         
     android:paddingLeft="10dip"
    />      
   </LinearLayout>          
   <ProgressBar
    android:id="@+id/progress_bar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_gravity="center"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@drawable/progress_bar_horizontal"
    android:maxHeight="12dip"    
    android:minHeight="12dip"    
    android:max="100" 
   />
  </LinearLayout>
 </LinearLayout>

Here is the result of my effort: link text

I would like the red bar to have rounded edges on the right hand side as well. Thank you so much for your comments.

Answer 1

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:

Answer 2

Just change the label <clip> to <scale> like this:

<scale android:scaleWidth="100%">

Answer 3

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.

Answer 4

You can use the LinearProgressIndicator provided by the Material Components Library and the app:trackCornerRadius attribute.

Something like:

    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:indeterminate="true"
        app:indicatorSize="xxdp"
        app:trackCornerRadius="xdp"/>

Note: it requires at least the version 1.3.0-alpha04.

Answer 5

In order to solve the problem where the end graphics overlap themselves when the progress is very low, I've written an extension to the ProgressBar class that adds a fixed start offset to the progress bar, while otherwise functioning as normal.

Just call 'setMaxWithPercentOffset()' or 'setMaxWithOffset()' rather than 'setMax()' passing in the value you want to add as a start offset to the progress bar.

If anyone has solved this problem without requiring the start offset let me know!

/**
 * This progress bar can be used when the progress bar end graphics are styled in some way.
 * In this case, the progress bar must always have a small percentage of progress, otherwise
 * the styled ends of the progress overlap each other.
 *
 */
public class EndStyledProgressBar extends ProgressBar {
    private static final int DEFAULT_START_OFFSET_PERCENT = 5;

    private int mStartOffset;
    private int mRealMax;

    public EndStyledProgressBar(Context context) {
        super(context);
        commonConstructor();
    }

    public EndStyledProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        commonConstructor();
    }

    public EndStyledProgressBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        commonConstructor();
    }

    private void commonConstructor() {
        mRealMax = super.getMax();
        mStartOffset = 0;

        setMaxWithPercentOffset(DEFAULT_START_OFFSET_PERCENT, mRealMax);

        super.setProgress(super.getProgress() + mStartOffset);
        super.setSecondaryProgress(super.getSecondaryProgress() + mStartOffset);
    }

    public void setProgress(int progress) {
        super.setProgress(progress + mStartOffset);
    }

    public void setSecondaryProgress(int secondaryProgress) {
        super.setSecondaryProgress(secondaryProgress + mStartOffset);
    }

    public int getProgress() {
        int realProgress = super.getProgress();
        return isIndeterminate() ? 0 : (realProgress - mStartOffset);
    }


    public  int getSecondaryProgress() {
        int realSecondaryProgress = super.getSecondaryProgress();
        return isIndeterminate() ? 0 : (realSecondaryProgress - mStartOffset);
    }

    public int getMax() {
        return mRealMax;
    }


    /**
     * Don't call this, instead call setMaxWithPercentOffset() or setStartOffsetInPercent()
     *
     * @param max
     */
    public void setMax(int max) {
        super.setMax(max);
    }

    /**
     * Sets a new max with a start offset (in percent) included.
     *
     * @param startOffsetInPercent start offset for the progress bar to avoid graphic errors.
     */
    public void setMaxWithPercentOffset(int startOffsetInPercent, int max) {
        mRealMax = max;
        int startOffset = (mRealMax * startOffsetInPercent) / 100;

        setMaxWithOffset(startOffset, max);
    }

    /**
     * Sets a new max with a start offset included.
     *
     * @param startOffset start offset for the progress bar to avoid graphic errors.
     */
    public void setMaxWithOffset(int startOffset, int max) {
        mRealMax = max;

        super.setMax(startOffset + max);

        setStartOffset(startOffset);

        super.setMax(startOffset + max);
    }


    /**
     * Sets a new start offset different from the default of 5%
     *
     * @param startOffset start offset for the progress bar to avoid graphic errors.
     */
    private void setStartOffset(int startOffset) {
        int newStartOffset = startOffset;

        // Ensure the start offset is not outside the range of the progress bar
        if (newStartOffset < 0) newStartOffset = 0;
        if (newStartOffset >= super.getMax()) newStartOffset = super.getMax();

        // Apply the start offset difference
        if (mStartOffset != newStartOffset) {
            int diff = newStartOffset - mStartOffset;
            super.setMax(super.getMax() + diff);
            super.setProgress(super.getProgress() + diff);
            super.setSecondaryProgress(super.getSecondaryProgress() + diff);
            mStartOffset = newStartOffset;
        }
    }
}

Answer 6

Final rounded both sides progress bar without 9-patch is: android:progressDrawable="@drawable/progress_horizontal_green"

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/progress">
    <scale android:scaleWidth="100%">
        <shape>
            <corners android:radius="5dip"/>
            <solid android:color="#33FF33"/>
        </shape>
    </scale>
</item>