Seek bar, change path color from yellow to white

Question

I have two questions:

1) how do I change the color of the seek bar (path) from yellow (the default color) to white. What I mean to say is, while I slide the thumb , it turns the line traversed from grey to yellow. I want track/line to either remain grey or white..Basically I want just the thumb to move with no color change in the seek bar.

2) How to change the thumb of seekbar from rectangle to circle/sphere/round shape.

any pointers will be appreciated.

score 97 · Accepted Answer · edited Dec 26 '22 at 07:59

I want to complete the answer from above for the people who are new to the system,

the missing xmls ( background_fill , progress_fill and progress could look like that for a gradient red

progress.xml

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item 
            android:id="@android:id/background" 
            android:drawable="@drawable/background_fill" />

        <item android:id="@android:id/progress">
           <clip android:drawable="@drawable/progress_fill" />
        </item>
  </layer-list>

background_fill.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient 
        android:startColor="#FF555555" 
        android:centerColor="#FF555555"
        android:endColor="#FF555555" 
        android:angle="90" />

    <corners android:radius="5px" />

    <stroke 
        android:width="2dp" 
        android:color="#50999999" />

    <stroke 
        android:width="1dp" 
        android:color="#70555555" />
</shape>

progress_fill.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient 
        android:startColor="#FF470000" 
        android:centerColor="#FFB80000"
        android:endColor="#FFFF4400" 
        android:angle="180" />

    <corners android:radius="5px" />

    <stroke 
            android:width="2dp" 
            android:color="#50999999" />
    
    <stroke 
            android:width="1dp" 
            android:color="#70555555" />
</shape>

i did not complete the implementing for android:thumb, so the thumb will be still the original one

Therefore we just have to delete this line again from our layout xml where we define the seekbar

android:thumb="@drawable/thumb"

Hello, your example works perfect, but I can't add custom thumb for seekbar. Could you do me a favour to show how to add thumb to your example? Thanks! — dmytro, May 08 '18 at 10:22

score 72 · Answer 2 · edited Feb 19 '11 at 17:35

72

You should set SeekBar XML properties:

<SeekBar 
            ....
    android:progressDrawable="@drawable/progress"
    android:thumb="@drawable/thumb"
            ....
/>

Where progress is something like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background" 
    android:drawable="@drawable/background_fill" />

<item android:id="@android:id/progress">
    <clip android:drawable="@drawable/progress_fill" />
</item>
</layer-list>

and thumb is

<?xml version="1.0" encoding="utf-8"?>    
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:drawable="@drawable/thumb_fill" />
</selector>

edited Feb 19 '11 at 17:35

Jeno Csupor

2,869
6
30
35

answered Aug 13 '10 at 20:41

Asahi

13,378
12
67
87

Hello, I tried to create above .xml files in drawable folder. but I got this error: No resource found that matches the given name (at 'drawable' with value '@drawable/background_fill'). No resource found that matches the given name (at 'drawable' with value '@drawable/progress_fill'). – David Prun Aug 16 '10 at 19:36
3

Those are drawables that you have to create yourself:you could use 9.png (or another drawable resource - http://developer.android.com/reference/android/graphics/drawable/Drawable.html and http://developer.android.com/guide/topics/resources/drawable-resource.html) to decorate your seekbar as you wish. – Asahi Aug 20 '10 at 08:51
1

this answer is very much correct :) user357349 must accept it true – Rohit Sharma Jan 20 '11 at 09:52

score 29 · Answer 3 · answered Jul 09 '16 at 21:00

29

Since SeekBar uses colorAccent by default, you can create a new style with your custom color as colorAccent then use theme attribute to apply it to the SeekBar.

<SeekBar>
    .
    .
    android:theme="@style/MySeekBarTheme"
    .
</SeekBar>

in the @style:

 <style name="MySeekBarTheme" parent="Widget.AppCompat.SeekBar" >
        <item name="colorAccent">#ffff00</item>
 </style>

answered Jul 09 '16 at 21:00

hedisam

521
6
10

1

Thanks ... you saved my lot of effort :) – Anshul Agarwal Jan 06 '17 at 10:08

score 16 · Answer 4 · edited Oct 08 '16 at 23:16

16

seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);

edited Oct 08 '16 at 23:16

minhaz

4,233
3
33
49

answered Aug 02 '16 at 14:30

score 10 · Answer 5 · answered Jan 08 '17 at 13:06

You can just add tint from API level 21.

Add these properties to seekbar element:

android:progressTint="@android:color/white" android:thumbTint="@android:color/white"

Final result:

<SeekBar
    android:id="@+id/is"
    android:layout_width="match_parent"
    android:max="100"
    android:progressTint="@android:color/white"
    android:thumbTint="@android:color/white"/>

score 3 · Answer 6 · answered Aug 13 '18 at 12:47

1. Create a drawable XML: Name it : progress_drawable

<?xml version="1.0" encoding="UTF-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="line">

<stroke android:width="1dp" android:color="#fff"/>

</shape>

2. Assign it to Seekbar

            <SeekBar
                    android:id="@+id/slider_1"
                    android:progressDrawable="@drawable/progress_drawable"
                    android:layout_width="180dp"
                    android:layout_height="32dp"
                    android:layout_gravity="center"
                    android:rotation="270" />

score 0 · Answer 7 · answered Apr 10 '18 at 14:14

Just change the accent color of your style

<style name="TickMarkSeekBar" parent="Theme.KefTheme">
        <item name="tickMark">@drawable/tickmark</item>
        <item name="thumbTint">@android:color/white</item>
        <item name="colorAccent">@android:color/white</item>
    </style>

Seek bar, change path color from yellow to white

7 Answers7

progress.xml

background_fill.xml

progress_fill.xml

Linked

Related