How to set background.png to be background of progress bar and progress to stretch and be part which is filling to max?

Question

I have progress bar and I have two images background.png and progress.png. How to set background.png to be background of progress bar and progress to stretch and be part which is filling to max ?

I have tried like android:progressDrawable="@drawable/progress" but it doesn't work.

Answer 1

Since, you are trying put your own image in ProgressBar then you should create custom ProgressBar which will help you to set your own image as background and progress image.

Here, I'm giving you a way how to do the custom ProgressBar. Create a XML to handle background.png as proress bar's background and progress.png as proress bar's progress indicator with layer-list attribute...named the XML as progressbar.xml

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

    <item
        android:id="@android:id/background"
        <!--setting background.png as background of proressbar-->
        android:drawable="@drawable/background"/>
    <item
        android:id="@+id/progress"
        <!--setting progress.png as progress drawable of proressbar-->
        android:drawable="@drawable/progress">
    </item>

</layer-list>

Create custom ProgressBar named CustomProgressBar which extends ProgressBar. CustomProgressBar.java

public class CustomProgressBar extends ProgressBar {

    public CustomProgressBar(Context context) {
        super(context);
    }

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

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

    @Override
    protected synchronized void onDraw(Canvas canvas) {
        // update the size of the progress bar and overlay
        updateProgressBar();

        // paint the changes to the canvas
        super.onDraw(canvas);
    }

    @Override
    public synchronized void setProgress(int progress) {
        super.setProgress(progress);

        // the setProgress super will not change the details of the progress bar
        // anymore so we need to force an update to redraw the progress bar
        invalidate();
    }

    private float getScale(int progress) {
        float scale = getMax() > 0 ? (float) progress / (float) getMax() : 0;

        return scale;
    }

    private void updateProgressBar() {
        Drawable progressDrawable = getProgressDrawable();

        if (progressDrawable != null && progressDrawable instanceof LayerDrawable) {
            LayerDrawable d = (LayerDrawable) progressDrawable;

            final float scale = getScale(getProgress());

            // get the progress bar and update it's size
            Drawable progressBar = d.findDrawableByLayerId(R.id.progress);

            final int width = d.getBounds().right - d.getBounds().left;

            if (progressBar != null) {
                Rect progressBarBounds = progressBar.getBounds();
                progressBarBounds.right = progressBarBounds.left + (int) (width * scale + 0.5f);
                progressBar.setBounds(progressBarBounds);
            }

        }
    }
}

Create a Style attribute for the custom progress bar in styles.xml...

<resources>

    <style name="Widget"></style>

    <style name="Widget.ProgressBar">
        <item name="android:indeterminateOnly">true</item>
        <item name="android:indeterminateBehavior">repeat</item>
        <item name="android:indeterminateDuration">3500</item>
        <item name="android:minWidth">48dip</item>
        <item name="android:maxWidth">48dip</item>
        <item name="android:minHeight">48dip</item>
        <item name="android:maxHeight">48dip</item>
    </style>

    <style name="Widget.ProgressBar.RegularProgressBar">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@drawable/progressbar</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
        <item name="android:minHeight">1dip</item>
        <item name="android:maxHeight">10dip</item>
    </style>

</resources>

Add the custom CustomProgressBar into your XML. Suppose, you put the CustomProgressBar.java file in com.widgets.custom package...then xml for progress bar will be...

<com.widgets.custom.CustomProgressBar
    android:id="@+id/regularprogressbar"
    style="@style/Widget.ProgressBar.RegularProgressBar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dip" />

In your Activity class initialize the custom progress bar and use as your need. But I'm giving demo Activity class for better understanding...

public class ProgressBarActivity extends Activity {

    private SaundProgressBar mRegularProgressBar;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mRegularProgressBar = (SaundProgressBar) findViewById(R.id.regularprogressbar);

        new UpdateBarTask().execute();
    }

    private class UpdateBarTask extends AsyncTask<Void, Integer, Void> {

        @Override
        protected Void doInBackground(Void... params) {

            int max = mRegularProgressBar.getMax();
            for (int i = 0; i <= max; i++) {
                try {
                    // update every second
                    Thread.sleep(100);
                } catch (InterruptedException e) {

                }

                publishProgress(i);
            }

            return null;
        }

        @Override
        protected void onProgressUpdate(Integer... values) {
            mRegularProgressBar.setProgress(values[0]);
        }
    }
}

Answer 2

I believe for this you need to set a full style for the android:progressBarStyleHorizontal You can see all of the values needed if you go to http://android-holo-colors.com/ and just download a theme that sets the progress bar