Android: SeekBar with custom drawable

Question

I have SeekBar with custom drawable. Progress element is not rendered from left side exactly but it is moved to right. How can I avoid this?

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@android:id/summary"
    android:background="@null"

    android:progressDrawable="@drawable/seekbar"
    android:thumb="@drawable/seekbar_thumb"/>

seekbar.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/seekbar_background"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress" />
    </item>

</layer-list>

seekbar_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">

    <stroke android:width="2dp" android:color="@color/colorNeutral" />

</shape>

seekbar_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">

    <stroke
        android:width="4dp"
        android:color="@color/colorAccentDark" />
</shape>

EDIT:

As mentioned in comments if there will be both widths same problem disappear. But I need make it with two different widths through drawable is it possible? Maybe with different shapes not just lines?

what about the width of progress? try changing it to 2dp, just to know if that's causing the problem. — Anoop Kanyan, Jan 21 '16 at 20:08
What you can do, if your choices of color are not limitless, is create a set of seekbar xml files with the right theme and then inflate them programatically when needed. — , Jan 29 '16 at 15:52

score 15 · Accepted Answer · edited Jun 20 '20 at 09:12

I can not explain why this is an issue when drawing strokes, I think it has something to do with the strokes width, but I did not yet find the source to verify.

Fixing the Overlay

To remove the issue at hand, you can just set an inset on your left side. A value of 1dp or 2dp both work and the seekbar will be drawn properly.

Note: Using this approach there should be no risk that the background could be too short and not visible with low progress values, since the thumb would overlay and hide it in any case.

<?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/seekbar_background"
        android:left="2dp"><!-- or 1dp -->
    </item>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress"/>
    </item>
</layer-list>

score 6 · Answer 2 · edited Nov 25 '16 at 10:04

Observation

When you create a line using shape drawable it leaves the left and right padding (from the view in which this drawable is being used.)equal to the half of its stroke width.

Workaround

You need to wrap your progress_background with an inset drawable and then set it as progress background. The inset can be like the following-

inset_seekbar_background.xml

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/seekbar_progress"
    android:insetLeft="2dp"
    android:insetRight="2dp" />

and your final seekbar.xml will be like-

<?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/inset_seekbar_background"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress" />
    </item>

</layer-list>

Alternates

1.You can use an 9 path image for line as it is done in the default material design-

<?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/abc_scrubber_primary_mtrl_alpha" />
    <item android:id="@android:id/secondaryProgress">
        <scale android:scaleWidth="100%">
            <selector>
                <item android:state_enabled="false">
                    <color android:color="@android:color/transparent" />
                </item>
                <item android:drawable="@drawable/abc_scrubber_primary_mtrl_alpha" />
            </selector>
        </scale>
    </item>
    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <selector>
                <item android:state_enabled="true">
                    <color android:color="@android:color/transparent" />
                </item>
                <item android:drawable="@drawable/abc_scrubber_primary_mtrl_alpha" />
            </selector>
        </scale>
    </item>
</layer-list><!-- From: file:/usr/local/google/buildbot/src/googleplex-android/mnc-supportlib-release/frameworks/support/v7/appcompat/res/drawable/abc_seekbar_track_material.xml -->

2.You can set the theme to your view with different color in android style as-

<style name="AppTheme.SeekBar">
        <item name="colorPrimary">@color/colorAccent</item>
        <item name="colorPrimaryDark">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorPrimaryDark</item>
</style>

Here I have used all there options for Seekbars-

            <SeekBar 
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/AppTheme.SeekBar" />

            <SeekBar
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <SeekBar
                android:layerType="software"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/seekbar" />

And here is the output-

score 3 · Answer 3 · answered Jan 22 '16 at 00:41

3

As it appear the issue in progress I think they both should be the same width

but you in progress make width = 4 android:width="4dp"

and seekbar width = 2 android:width="2dp"

just match them to be 2 or 4 dont use different values

answered Jan 22 '16 at 00:41

Mina Fawzy

20,852
17
133
156

after long research I think you cant , may be you can try make padding zero – Mina Fawzy Jan 24 '16 at 14:15

score 3 · Answer 4 · answered Jan 28 '16 at 01:04

Try using a .9.png drawable of width 4dp (converted to px) .

Keep 1 dp at top and bottom transparent.

And add colour to the center 2 dp of your choice for the background.

This way both background and progress will be of same width but the background will look thinner than progress bar.

score 2 · Answer 5 · edited Jan 30 '16 at 13:58

2

Try like this using android:layout_marginLeft="-3dp" or -2dp

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@android:id/summary"
    android:background="@null"
    android:layout_marginLeft="-2dp"
    android:progressDrawable="@drawable/seekbar"
    android:thumb="@drawable/seekbar_thumb"/>`

edited Jan 30 '16 at 13:58

David Medenjak

33,993
14
106
134

answered Jan 28 '16 at 10:58

SudheeR Bolla

171
2
12

score 2 · Answer 6 · answered Jan 29 '16 at 16:02

If your choices of color has a limit and is predefined. You can try to add XML files with Seekbars using different themes.

Something like this:

themed_seekbar_one.xml

<?xml version="1.0" encoding="utf-8"?>
<SeekBar
    ...
    android:theme="@style/first_theme">
</SeekBar>

themed_seekbar_two.xml

<?xml version="1.0" encoding="utf-8"?>
<SeekBar
    ...
    android:theme="@style/second_theme">
</SeekBar>

You can then inflate does views programatically like this:

SeekBar seekbar = (SeekBar)getLayoutInflater().inflate(R.layout.themed_seekbar_xxx, null);

Android: SeekBar with custom drawable

6 Answers6

Fixing the Overlay

Linked