Android SeekBar thumb gets clipped/cut off

Question

When using a custom thumb drawable with a SeekBar view, the thumb drawable is clipped at the left and right edges of the view.

How can I fix this behavior?

score 102 · Accepted Answer · answered May 28 '10 at 00:11

102

You should be able to fix this by setting paddingLeft and paddingRight on your SeekBar to half the thumb width (remember to use density-independent units). You can also control the space allowed at the edges for a seek bar's thumb by calling setThumbOffset.

answered May 28 '10 at 00:11

Roman Nurik

29,665
7
84
82

What's the deault size of default thumb? – Hurda Jun 13 '12 at 08:55
1

@Hurda The mdpi (holo) size is 32x32 and the mdpi (pre-holo) is 32x29 – Parth Mehrotra Apr 06 '13 at 06:38
3

Note, if you are working with VerticalSeekBars, you STILL use paddingRight & paddingLeft – Parth Mehrotra Apr 06 '13 at 06:39
2

This happened to me even without a custom thumb drawable, just using different themes based on platform version. Setting `paddingLeft` and `paddingRight` to `16dp` seemed to be the way to be sure it works in all versions with all standard themes. – cprcrack Apr 20 '13 at 02:22
This is definitely the fix to use, works on 2.3.3 and 4.x for me. – Meanman Jan 31 '14 at 17:36
Using both the `ThumbOffset` and the `padding` causes the thumb to NOT reach the end of the seekbar on 4.4.2. A little bit of the track is visible to the right even after moving the thumb to the end. If i use only padding, it looks fine. But on 3.0, i have to use `ThumbOffset` and `padding` to avoid the thumb getting clipped. Is it possible to manage this situation so that it looks good on all versions? – faizal Jul 27 '14 at 05:41
4

@Roman Nurik paddingLeft and paddingRight is not doing anything for my seekbar – Ishant Sagar Dec 08 '16 at 13:19
9

Adding `android:thumbOffset="-0dp"` did it for me – Yoraco Gonzales Feb 08 '17 at 01:35
I used a rather large thumb image (but reasonable size) and padding alone wouldn't fix it. I ended up using `android:paddingLeft="20dp" android:paddingRight="20dp" android:thumbOffset="16dp"` – Someone Somewhere Mar 19 '18 at 01:38
Important to note the difference between the two solutions in this answer: adding a padding causes the line to occupy less of the seek bar's area and that might be not what you want. The offset on the other hand limits the movement of the thumb drawable stopping it before the edge of the line (when the edge of the thumb is on the edge and not the middle of it). That might also be not what you want. – Yoel Gluschnaider Oct 01 '21 at 06:52

score 31 · Answer 2 · edited Mar 01 '16 at 14:15

31

I ran into this issue myself, and I believe the "correct" decision would be to modify android:thumbOffset as the default style for a SeekBar sets it to 8px.

edited Mar 01 '16 at 14:15

IntelliJ Amiya

74,896
15
165
198

answered Jan 18 '11 at 18:36

Nicholi

1,083
19
33

1

+1! My designer will appreciate this approach, so now our slider's track can align on the left and right with everything else as expected. Thanks for the tip! – Marcel Ray Jul 03 '11 at 20:37
1

android:thumbOffset has no effect on 2.3.3. I had to use padding. – jul Aug 25 '13 at 01:44
`android:thumOffset` has no effect on 2.3.3 but you can use the `setThumbOffset` method. – Brtle Aug 21 '14 at 14:16
This is actually the right and useful answer, BIG thanks! – YH_WU Dec 10 '19 at 02:21

score 9 · Answer 3 · edited Jul 07 '16 at 22:47

9

For default SeekBar I used these settings and it works fine:

android:paddingLeft="6dp"
android:paddingRight="6dp"

android:thumbOffset="8dp"

edited Jul 07 '16 at 22:47

Laurel

5,965
14
31
57

answered Aug 01 '12 at 19:59

kayz1

7,260
3
53
56

score 1 · Answer 4 · answered Jan 14 '13 at 18:08

Just for clarification.

On some places I have seen

 android:thumbOffset="8dp"

and some

android:thumbOffset="8px"

so I looked at the source code. this is the original style

<style name="Widget.SeekBar">
        <item name="android:indeterminateOnly">false</item>
        <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:indeterminateDrawable">@android:drawable/progress_horizontal</item>
        <item name="android:minHeight">20dip</item>
        <item name="android:maxHeight">20dip</item>
        <item name="android:thumb">@android:drawable/seek_thumb</item>
        <item name="android:thumbOffset">8dip</item>
        <item name="android:focusable">true</item>
    </style>

from

https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/res/res/values/styles.xml

score 1 · Answer 5 · answered Feb 23 '21 at 13:13

1

I was getting the bottom of my default seekbar thumb clipped. None of the fixes here worked. I ended up using

     android:clipToPadding="false"

on the parent view. This solved issue.

answered Feb 23 '21 at 13:13

GAllan

409
4
11

score 0 · Answer 6 · answered Dec 02 '20 at 12:52

<androidx.appcompat.widget.AppCompatSeekBar
        android:id="@+id/progress_loan_period"
        android:layout_width="@dimen/dp_0"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dp_15"
        android:progressDrawable="@drawable/seek_bar"
        android:thumb="@drawable/ic_slider"
        android:paddingStart="@dimen/dp_0"
        android:paddingEnd="@dimen/dp_0"
        android:thumbOffset="-0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/label_loan_period" />

This gets the job done

score 0 · Answer 7 · answered Dec 22 '21 at 05:57

0

Nothing worked for me but I just changed the color of the thumb different then the background color of the parent layout and it worked for me.

answered Dec 22 '21 at 05:57

Nabeel Ahmed

223
5
15

Android SeekBar thumb gets clipped/cut off

7 Answers7

Linked

Related