Seekbar or progress bar with multiple colors

Question

I want to create a bar like this initially when progress is zero it will be a

Answer 1

Clip your "on" drawable:
over your "off" drawable:

by using res/drawable/custom_progress_drawable.xml

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

    <!-- Background -->
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/custom_progress_bar_off"/>

    <!-- Secondary progress - this is optional -->
    <item android:id="@android:id/secondaryProgress">
        <clip android:drawable="@drawable/custom_progress_bar_secondary" />
    </item>

    <!-- Progress -->
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/custom_progress_bar_on" />
    </item>

</layer-list>

From an Activity, use

Drawable progressDrawable = ResourcesCompat.getDrawable(getResources(), R.drawable.custom_progress_drawable, getTheme());
myProgressBar.setProgressDrawable(progressDrawable);

or in xml, use

android:progressDrawable="@drawable/custom_progress_drawable"

And here's the result when using android:max="10" in xml:

It's a little bit off, but you could use setMax() with something more like 10000 and do some offsetting calculations when calling setProgress() to make it cleaner.

Answer 2

Like already suggested i think you should go for an layer-list and set multiple drawables then. Main problem on this is that i need to be resizeable. An fixed size solution would be quite easy to implement.

Answer 3

You can't actually set the progress bars to different colors. You can however use only the on drawable and get the effect that you want. You could just apply a layer mask. What I mean is add a Relative layout which is initially say dark grey throughout i.e the gradient has only ONE color which is dark gray. Now, use code to set the gradient color on the left programmatically. Obviously the color on the left is going to be transparent. Learn more about Linear Gradients. That's about it. You just need to calculate the position from where the right gradient starts, rather where the left gradient(transparent)ends.

This method is slightly flawed and may not work on ALL devices.

The flawless method would be to create multiple .9png images and set the drawable of the progress dialog programmatically every time.

Answer 4

Finally! I went on a mission to figure this out for you, so if this suffices, feel free to give me that bounty, haha.

---

Try using this in your layout:

    <View android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight=".20"/>

            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:orientation="horizontal"
                android:gravity="center"
                android:layout_weight="0.62">
                <View android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight=".03"/>
                <ProgressBar style="?android:attr/progressBarStyleHorizontal"
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="0.94"
                    android:progressDrawable="@drawable/progressmask"
                    android:progress="0"
                    android:max="10"
                    android:rotation="180"/>
                <View android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight=".03"/>
            </LinearLayout>
    <View
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight=".18"/>
</LinearLayout>

which references this drawable (progressmask.xml):

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <corners android:radius="50dip" />
        <gradient android:startColor="#00000000" android:endColor="#00000000" android:angle="270" />
        <stroke android:width="1dp" android:color="#00000000" />
    </shape>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="50dip" />
            <gradient android:startColor="#aa000000" android:endColor="#aa000000"
                android:angle="270" />
            <stroke android:width="1dp" android:color="#00000000" />
        </shape>
    </clip>
</item>
</layer-list>

and this image (colorprogress.png)

What it does is set the image as the background of a linearlayout, which contains a progressbar. The progressbar adds a semi-transparent black mask to the image to make it appear that the lights are off.

NOTE: In order to get this affect, I had to monkey with the progress bar (i.e. flip it, and set it to only 10 intervals. You will have to do some math to get the progress to line up with the image. i.e. setprogress((100-trueprogress)/10). Sorry I did not do this part for you.

This is what it will look like at progress 50% (the small x's and triangles will disappear on the device)

I hope this answers your question!