Search code examples
androidprogress-barseekbar

Seekbar or progress bar with multiple colors

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.

Solution

  • 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.