Seekbar or progress bar with multiple colors

11,171

Solution 1

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.

Solution 2

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)

enter image description here

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)

enter image description here

I hope this answers your question!

Share:
11,171

Related videos on Youtube

Sandip Jadhav
Author by

Sandip Jadhav

I’m working as Android Developer since 2009. Have created more than 10 Android applications which are published on Google Play and have high rates. Overall experience in IT since 2009. Strongly experienced with custom application design, location based functionality, Geographic Information System (GIS), application UI and unit testing, home-screen widgets, SQLite, Google Play publishing and support. I’m good team player, know software development processes like .net, Java. I use issue-tracking systems: BugZilla; use GIT, SVN for code versions control. Google Associate Android Developer Certification: http://bcert.me/sgietvlm Blog: http://androidmyway.in GitHub: https://github.com/sandipmjadhav Bio: http://sandipjadhav.branded.me/

Updated on September 16, 2022

Comments

  • Sandip Jadhav
    Sandip Jadhav about 1 year

    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.

  • dberm22
    dberm22 over 10 years
    Ahh, darn. I have to admit, @UberPrinny 's answer was much better than mine.
  • desgraci
    desgraci over 9 years
    Just to add some info developer.android.com/guide/topics/resources/… According to this you should put the max on 10.000 Note: The default level is 0, which is fully clipped so the image is not visible. When the level is 10,000, the image is not clipped and completely visible.
  • Iman Marashi
    Iman Marashi over 7 years
    How to set this ProgressBar to be a vertical bar instead of horizontal?
  • Michael Yaworski
    Michael Yaworski over 7 years
    I'm confused about what you do with MyProgressBar.java. Can you explain how to use this?