Seekbar or progress bar with multiple colors

Sandip Jadhav picture Sandip Jadhav · May 7, 2013 · Viewed 10.5k times · Source

enter image description here

I want to create a bar like this initially when progress is zero it will be a fade in color but and as progress goes on it will become bright on that part(This is best I can explain) main thing is i want bar to show all colors at the same time.

Answer

EricRobertBrewer picture EricRobertBrewer · May 17, 2013

Clip your "on" drawable:enter image description here
over your "off" drawable:enter image description here

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:

enter image description here

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.