Android: Drawable vertically alignment for SeekBar

Question

This is waht I need to achieve with xml drawable for SeekBar:

I tried many different variations and this is best I could make.

This is seekbar_thumb_drawable.xml:

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

    <solid android:color="@color/accent_color"/>

    <size
        android:height="20dp"
        android:width="20dp" />

</shape>

This is seekbar_drawable.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:height="5dp"
        android:top="7.5dp">
        <shape
            android:shape="rectangle">
            <solid android:color="@color/seekbar_background" />
            <corners android:radius="2.5dp" />
        </shape>
    </item>

    <item
        android:id="@android:id/progress"
        android:height="10dp"
        android:top="5dp">
        <clip>
            <shape
                android:shape="rectangle">
                <solid android:color="@color/seekbar_progress" />
                <corners android:radius="5dp" />
            </shape>
        </clip>
    </item>

</layer-list>

Result on API 18: Problem is that lines are not verticaly centered.

Result on API 24: This display exactly how I want it to display.

Is there any possible solution to make this appear as on first picture on all devices from API 16?
I do not want to use nine-patch, because I need to use color from resources. I tried padding, gravity, top, bottom, inter-shape, line, rectangle but I could not find solution...

Abdul Wasae · Answer 1 · 2017-06-17T09:06:00.820

3

This is because the android:height and android:width for <item> are only available for API 23 and above. If you use these attributes for API below 23, it will not give you an error, but simply ignore it.

In your case, android:height="5dp", and android:height="10dp" are not being applied.

If you look at the relevant docs or , it says that these were added in API level 23.

edited Jun 17 '17 at 09:06

answered Jun 17 '17 at 08:53

Abdul Wasae

3,614
4
34
56

score 1 · Answer 2 · answered Jun 17 '17 at 11:31

Make update in your drawable files.

In seekbar_thumb_drawable.xml :

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="center">
        <shape android:shape="oval">

            <solid android:color="@color/accent_color" />

            <size
                android:width="20dp"
                android:height="20dp" />

        </shape>
    </item>
</layer-list>

seekbar_drawable.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:height="5dp"
        android:gravity="center">
        <shape android:shape="rectangle">
            <solid android:color="@color/seekbar_background" />
            <corners android:radius="2.5dp" />
        </shape>
    </item>

    <item
        android:id="@android:id/progress"
        android:height="10dp"
        android:gravity="center">
        <clip>
            <shape android:shape="rectangle">
                <solid android:color="@color/seekbar_progress" />
                <corners android:radius="5dp" />
            </shape>
        </clip>
    </item>

</layer-list>

I m using gravity in item, So that drawable item draw in center.

score 0 · Answer 3 · answered Jun 17 '17 at 08:41

You probably faced with already known issue, here is the solution for it. You should define maxHeight and minHeight of the SeekBar the same as the height of it. Or you can even set maxHeight to some big value like 1000dp, if you exepect your height to be wrap_content, like mentioned below the suggested answer in the same thread.

<SeekBar 
    android:thumb="@drawable/seekbar_thumb_drawable"         
    android:progressDrawable="@drawable/seekbar_drawable"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="1000dp"
    <!-- OR -->
    android:maxHeight="16dp"
    android:minHeight="16dp"/>

score 0 · Answer 4 · edited Jun 22 '17 at 14:06

I am also facing same issue in Low API of thumb drawable come above the line So what I did for it.

<SeekBar
    android:id="@+id/seekbar_transparency"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:paddingTop="@dimen/seekbar_thumb_size_space"
    android:paddingBottom="@dimen/seekbar_thumb_size_space"
    android:progress="100"
    android:theme="@style/SeekbarTheme"
    android:thumb="@drawable/thumb_drawable" />

style.xml

<!--Seekbar background change-->
<style name="SeekbarTheme" parent="Theme.AppCompat.Light">
    <!-- active seekbar progress track color -->
    <item name="colorControlActivated">@color/colorSeekBar</item>
    <!-- inactive seekbar progress track color  -->
    <item name="colorControlNormal">@color/colorGray</item>
</style>

thumb_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="2.5dp"
        android:left="2.5dp"
        android:right="2.5dp"
        android:top="2.5dp">

        <shape android:shape="rectangle">
        <size
         android:width="@dimen/seekbar_thumb_size"
         android:height="@dimen/seekbar_thumb_size" />
        <corners android:radius="20dp" />
        <solid android:color="#201DE9B6" />
        </shape>
    </item>

    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">

        <shape android:shape="rectangle">
            <size
                android:width="@dimen/seekbar_thumb_size"
                android:height="@dimen/seekbar_thumb_size" />
            <corners android:radius="20dp" />
            <solid android:color="#AA1DE9B6" />
        </shape>
    </item>
</layer-list>

dimes.xml

<!--Seeckbar thumb size-->
<dimen name="seekbar_thumb_size">10dp</dimen>
<dimen name="seekbar_thumb_size_space">5dp</dimen>

score 0 · Answer 5 · answered Jun 22 '17 at 08:10

<SeekBar
    android:id="@+id/seek_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="3dp"
    android:minHeight="3dp"
    android:progressDrawable="@drawable/nnl_bg_seek_bar_progress"
    android:splitTrack="false"
    android:thumb="@drawable/nnl_sel_seek_bar_thumb"
    tools:ignore="UnusedAttribute"
    />

The code above is my way. You may need to pay attention to these attributes: maxHeight / minHeight / splitTrack.

Android: Drawable vertically alignment for SeekBar

5 Answers5