Seekbar Thumb clipping

Question

I'm creating a custom Seekbar with thumb.

Currently it looks like this: https://i.stack.imgur.com/p2gS7.jpg

The problem: The drawable i'm using for the thumb (an oval shape) clips over the progressbar.

My code look like this:

The Seekbar in the layout:

<SeekBar
        android:background="@android:color/holo_red_light"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:thumb="@xml/thumb_image"
        android:progressDrawable="@xml/progress"
        android:max="100"/>

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">
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:startColor="#ff9d9e9d"
                android:centerColor="#ff5a5d5a"
                android:centerY="0.75"
                android:endColor="#ff747674"
                android:angle="270"
                />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:startColor="#80ffd300"
                    android:centerColor="#80ffb600"
                    android:centerY="0.75"
                    android:endColor="#a0ffcb00"
                    android:angle="270"
                    />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:startColor="#FFD700"
                    android:centerColor="#FFB90F"
                    android:centerY="0.75"
                    android:endColor="#FFA500"
                    android:angle="270"
                    />
            </shape>
        </clip>
    </item>

</layer-list>

thumb_image.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval"
    android:color="@android:color/transparent">
    <solid android:color="@android:color/black" />
    <size
        android:width="30dp"
        android:height="30dp" />
</shape>

score 6 · Accepted Answer · edited May 23 '17 at 12:17

6

try android:splitTrack="false" in the seek bar

For reference see this thread Custom seekbar thumb not transparent on Lollipop API21

edited May 23 '17 at 12:17

Community

1
1

answered Sep 15 '15 at 14:35

Deepak Goyal

4,747
2
21
46

score 5 · Answer 2 · answered Mar 04 '20 at 21:13

5

What worked for me was setting android:clipChildren="false" on the parent view.

answered Mar 04 '20 at 21:13

frankelot

13,666
16
54
89

1

Great solution. 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 solution worked better than the many other options I tried for my situation. – Ben Mar 15 '21 at 02:01

score 2 · Answer 3 · answered May 06 '19 at 06:20

2

I have used android:thumbOffset="-0dp" and assigned custom thumb and its working fine. Implemented many solutions but they are not working perfectly because of custom thumb drawable but this one is straightforward with minimal changes.

answered May 06 '19 at 06:20

Ravi Yadav

2,296
3
25
32

This works, but we aware it will bring the thumb completely within the layout, so it may not line up well if you have evenly spaced out labels under the seekBar. – Ben Mar 15 '21 at 01:57

Seekbar Thumb clipping

3 Answers3