Drawing a custom Seek Bar

Question

I am trying to draw a custom seekbar. Below is the screenshot what i want to achieve.

I have completed the seekbar, but the only problem is the thumb of the seekbar. Following is the code of the thumb of my seekbar.

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:thickness="4dp"
    android:useLevel="false"
    android:tint="#22B7FF">
    <solid
        android:color="#22B7FF" />
    <size
        android:width="32dp"
        android:height="130dp" />

</shape>

I know how to draw vertical line I want to draw the complete thumb in the drawable xml itself and not use view tag I don't understand how to draw vertical line at the exact center of the thumb. Any help would be appreciated

I think it'd be better to create a custom view for it. Search "android draw custom view" on google. Also some examples for you: https://medium.com/@romandanylyk96/android-draw-a-custom-view-ef79fe2ff54b http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples — Cagatay Barin, Feb 13 '18 at 10:35
refer : -https://stackoverflow.com/questions/45928383/draw-custom-seekbar-on-android — Ali, Feb 13 '18 at 10:36
Possible duplicate of [Custom seekbar (thumb size, color and background)](https://stackoverflow.com/questions/41693154/custom-seekbar-thumb-size-color-and-background) — Gowthaman M, Feb 13 '18 at 10:36
http://www.coderconsole.com/2015/03/android-seekbar-scrubber.html — Nitesh Tiwari, Feb 13 '18 at 10:50
@Pritish alternative solution https://stackoverflow.com/questions/3333658/how-to-make-a-vertical-seekbar-in-android — Gowthaman M, Feb 13 '18 at 10:55

Mohit · Accepted Answer · 2018-02-13T11:18:33.000

Code for your Thumb. Edit the height and top bottom spaces of this accordingly :

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- This is the main color -->

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp" />
            <solid android:color="#22B7FF" />
            <size
                android:width="10dp"
                android:height="20dp" />
        </shape>
    </item>

    <item
        android:bottom="7dp"
        android:left="4.5dp"
        android:right="4.5dp"
        android:top="7dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/black" />

            <size
                android:width="1dp"
                android:height="4dp" />

        </shape>
    </item>

    <item
        android:bottom="7dp"
        android:left="2.5dp"
        android:right="6.5dp"
        android:top="7dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/black" />

            <size
                android:width="1dp"
                android:height="4dp" />

        </shape>
    </item>


    <item
        android:bottom="7dp"
        android:left="6.5dp"
        android:right="2.5dp"
        android:top="7dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/black" />

            <size
                android:width="1dp"
                android:height="4dp" />

        </shape>
    </item>


</layer-list>

Drawing a custom Seek Bar

1 Answers1