Android seekbar clipped thumb

Question

I ran into some weird problem..I implemented a seekbar with custom thumb..and when I ran my app on HTC Desire, it all works fine..but, when I ran it on Samsung Galaxy, the thumb becomes clipped!

Here are the screenshots..

Desire:

Desire seekbar

Samsung Galaxy:

Galaxy seekbar

I would be grateful for any thoughts..tnx

myprogress.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@android:id/background">
    <shape>
        <corners
            android:radius="10dp" />
        <gradient
                android:startColor="@color/gray"
                android:centerColor="@color/gray"
                android:centerY="0.75"
                android:endColor="@color/gray"
                android:angle="270"
        />
    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
        <corners
            android:radius="10dp" />
            <gradient
                    android:startColor="@color/white"
                    android:centerColor="@color/white"
                    android:centerY="0.75"
                    android:endColor="@color/white"
                    android:angle="270"
            />
        </shape>
    </clip>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape>
        <corners
            android:radius="10dp" />
            <gradient
                android:startColor="#FFA500"
                android:centerColor="@color/yellow"
                android:centerY="0.75"
                android:endColor="@color/yellow"
                android:angle="270"
            />
        </shape>
    </clip>
</item>

style:

<style name="mySeekBar">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:progressDrawable">@drawable/myprogress</item>
    <item name="android:indeterminateDrawable">@android:drawable/progress_horizontal</item>
    <item name="android:minHeight">10dip</item>
    <item name="android:maxHeight">10dip</item>
    <item name="android:thumb">@drawable/thumb</item>
    <item name="android:thumbOffset">4dp</item>
    <item name="android:focusable">true</item>

seekbar xml:

<SeekBar android:id="@+id/player_seek_horizontal"
        android:layout_gravity="center_vertical" 
        android:max="100" 
        android:layout_marginLeft="50dp" 
        android:layout_width="180dp" 
        android:thumb="@drawable/thumb" 
        android:layout_height="wrap_content" 
        style="@style/mySeekBar" 
        android:background="@drawable/background_transparent_rounded" 
        android:paddingRight="4dp" android:paddingLeft="4dp"/>

Were you able to resolve this? I am facing the same problem with the default seekbar. Using the `padding` and `thumbOffset` makes it behave differently on different API versions. — faizal, Jul 27 '14 at 05:53

Ragunath Jawahar · Accepted Answer · 2014-02-10T17:20:50.380

37

Adjust the android:paddingLeft, android:paddingRight and android:thumbOffset properties of your SeekBar to achieve desired results.

Padding right and left should be half of thumb's width.

edited Feb 10 '14 at 17:20

answered Jun 30 '11 at 05:42

Ragunath Jawahar

19,513
22
110
155

If you looked those xmls, you would see that I tried that already..If I set it right for one device, it turns out bad for another – Tomislav Novoselec Jun 30 '11 at 07:43
2

@TomislavNovoselec, Padding right and left should be half of thumbs width. That should work. – JRC Oct 13 '11 at 09:28
1

How do you find out or set the thumb width? – faizal Jul 27 '14 at 05:45
I set `android:paddingLeft="15dp"` and `android:paddingRight="15dp"`. It worked on all versions of Android on emulator and device that i have tried. – faizal Jul 27 '14 at 08:13
How to set thumb width? Thanks. – valerybodak Nov 25 '15 at 09:52
@faizal, If you have a xml-defined thumb it can be done with inside the shape attribute. – Max Makeichik Sep 23 '16 at 14:49
@Ragunath Jawahar paddingLeft and paddingRight is not doing anything for my seekbar – Ishant Sagar Dec 08 '16 at 13:41

score 12 · Answer 2 · edited May 06 '15 at 15:14

12

<SeekBar
    ...
    android:paddingLeft="5dp"  
    android:paddingRight="5dp"
    android:thumbOffset="0px" />

It worked for me.

edited May 06 '15 at 15:14

Andrew

36,676
11
141
113

answered May 01 '12 at 13:33

sandy

3,311
4
36
47

score 6 · Answer 3 · answered Apr 19 '18 at 14:32

6

add following attributes to your parent layout

android:clipChildren="false"
android:clipToPadding="false"

answered Apr 19 '18 at 14:32

DroidBender

7,762
4
28
37

4

It's OK bro, you're only 7 years late :) – Tomislav Novoselec Apr 19 '18 at 16:53
Great solution. Only needed the clipChildren part in my case. The slight drawback is the thumb will not respond if it is touched on the outer side of the seekBar layout (outer thumb half). This is a minor issue and this approach worked better than the many other options I tried for my situation. – Ben Mar 15 '21 at 02:04

Android seekbar clipped thumb

3 Answers3